/* MiDoMet Login — classi composite riusabili.
   I token (`--water-*`, `--mido-red*`, `--navy`, ...) sono definiti in
   login-modern.css: questo file aggiunge SOLO le superfici riutilizzabili
   (glass card + bottone primario brand) che `index.php` compone sopra
   alle classi base `.login-card` e `.login-submit`. */

.mido-glass-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 32px;
  /* Sfumatura interna anziche' fondo piatto: la luce "cade" dall'alto verso
     il basso, simulando un foglio di vetro inclinato. */
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.82) 0%,
    rgba(245, 251, 255, 0.74) 60%,
    rgba(234, 247, 255, 0.7) 100%);
  /* Multi-layer shadow, raffinata 2026-05-30: ridotta da 5 a 4 layer + blur più
     contenuti (era 80/120px -> alone troppo esteso). Hairline interno chiaro +
     halo teal hairline + 2 drop shadow morbidi. Profondita' senza pesantezza. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 0 0 1px rgba(142, 216, 255, 0.16),
    0 14px 30px -12px rgba(7, 91, 138, 0.14),
    0 34px 70px -30px rgba(11, 143, 211, 0.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.06);
  backdrop-filter: blur(22px) saturate(1.06);
}

/* Halo perimetrale extra "premium": un secondo bordo soft fuori dal card,
   simula la riflessione di luce ambient sul vetro. */
.mido-glass-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.85),
    rgba(142, 216, 255, 0.35) 35%,
    rgba(255, 255, 255, 0) 60%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.7;
}

.mido-primary-btn {
  border: 0;
  border-radius: 16px;
  /* Gradient brand statico (raffinato 2026-05-30: rimossa l'animazione infinita
     ctaAmbient "background che respira" — un bottone che pulsa colore di continuo
     non è elegante; l'eleganza viene dalla quiete, vedi feedback animazioni). */
  background: linear-gradient(135deg, var(--mido-red) 0%, var(--mido-red-dark) 100%);
  color: #fff;
  /* Ombra brand più SOTTILE e ravvicinata (era 0 18px 35px .28 -> alone rosso
     che "grida"). Hairline interno chiaro per dare materia al tasto. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 10px 22px -8px rgba(231, 45, 63, 0.34);
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out);
}

.mido-primary-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 16px 30px -8px rgba(231, 45, 63, 0.4);
}

@media (max-width: 768px) {
  .mido-glass-card {
    border-radius: 24px;
  }
}