:root{ --vs-brand:#FD064F; }

/* --- Ecrã de escolha (Iniciar sessão | PIN | Face ID) --- */
.vs-login-chooser{
  text-align:center; padding:20px 0; margin-bottom:20px;
}
.vs-chooser-title{
  font-size:22px; font-weight:700; color:var(--vs-brand); margin:0 0 24px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  text-shadow:0 1px 3px rgba(0,0,0,.3);
}
.vs-login-buttons{
  display:flex; flex-direction:column; gap:12px; max-width:320px; margin:0 auto;
}
.vs-buttons-memorized{ display:flex; flex-direction:column; gap:12px; }
.vs-login-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px 20px; border:none; border-radius:10px;
  font-size:16px; font-weight:600; cursor:pointer; transition:opacity .2s, transform .05s;
  font-family:inherit; min-height:48px; box-sizing:border-box;
}
.vs-login-btn:active{ transform:scale(.98); }
.vs-login-btn.vs-btn-primary{
  background:var(--vs-brand); color:#fff;
}
.vs-login-btn.vs-btn-secondary{
  background:#2b2b2b; color:#fff; border:2px solid transparent;
}
.vs-login-btn.vs-btn-secondary:hover{ opacity:.9; }

/* Voltar e formulário sessão */
.vs-form-wrap{ position:relative; padding-top:8px; }
.vs-back-link{
  display:inline-block; margin-bottom:16px; color:#555; font-size:14px; text-decoration:none;
}
.vs-back-link:hover{ color:#111; }

/* Continuar como X + Alterar (entre título e botões) */
.vs-user-bar,
.vs-session-user-bar{
  margin-top:8px; margin-bottom:16px; padding:10px 14px; background:#f5f5f5; border-radius:8px;
  font-size:14px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:nowrap;
}
.vs-session-user-bar{ margin-top:0; margin-bottom:16px; }
.vs-continue-as{
  font-weight:600; color:#111; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vs-change-user{
  color:var(--vs-brand); font-size:13px; text-decoration:none; flex-shrink:0;
}
.vs-change-user:hover{ text-decoration:underline; }
.vs-chooser-username{ margin-bottom:16px; }
.vs-chooser-input{ width:100%; box-sizing:border-box; }

/* Dica para definir PIN (abaixo dos botões) */
.vs-pin-hint-wrap{ margin:20px auto 0; max-width:320px; text-align:center; }
.vs-pin-hint{
  font-size:13px; color:#fff; cursor:pointer; margin:0;
  text-shadow:0 1px 3px rgba(0,0,0,.5), 0 0 2px rgba(0,0,0,.4);
  padding:6px 12px; background:rgba(0,0,0,.35); border-radius:6px;
  display:inline-block;
}
.vs-pin-hint:hover{ background:rgba(0,0,0,.5); text-shadow:0 1px 3px rgba(0,0,0,.6); }
.vs-pin-hint-box{
  margin-top:10px; padding:12px 14px; font-size:13px; color:#555; text-align:left;
  background:#f8f8f8; border-radius:8px; border:1px solid #eee; line-height:1.5;
}

/* Botão X fechar no modal PIN */
.vs-pin-close{
  position:absolute; top:15px; right:15px; z-index:10;
  font-size:34px; font-weight:700; color:#000; line-height:1;
  padding:10px 12px; border-radius:999px; cursor:pointer;
  border:none; background:none; font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}
.vs-pin-close:hover{ opacity:.7; }

/* Modo PIN (username + continuar) */
.vs-pin-mode{
  text-align:center; padding:20px 0; max-width:320px; margin:0 auto;
}
.vs-mode-title{ font-size:20px; font-weight:700; color:#111; margin:0 0 8px; }
.vs-mode-desc{ font-size:14px; color:#555; margin:0 0 16px; }
.vs-input{
  width:100%; padding:12px 14px; margin-bottom:14px; border:1px solid #ccc;
  border-radius:8px; font-size:16px; box-sizing:border-box;
}
.vs-input:focus{ outline:none; border-color:var(--vs-brand); }

/* --- Fullscreen branco translúcido --- */
.vs-pin-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; }
.vs-pin-backdrop{ position:absolute; inset:0; background:rgba(255,255,255,.85); }

/* container minimalista (sem cartão) */
.vs-pin-container.vs-compact{
  position:relative; z-index:2; width:360px; max-width:92%;
  background:transparent; box-shadow:none; border-radius:0; padding:0; text-align:center;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
}
.vs-title{ color:#111; font-weight:700; font-size:22px; margin:0 0 10px; }

.vs-pin-dots{ display:flex; justify-content:center; gap:12px; margin:0 0 14px; }
.vs-pin-dots .dot{ width:14px; height:14px; border-radius:50%; border:2px solid #111; background:transparent; display:inline-block; opacity:.8; }
.vs-pin-dots .dot.filled{ background:#111; }

#vs-pin-input{ position:absolute; opacity:0; pointer-events:none; height:0; width:0; left:-9999px; }

/* Keypad circular estilo iOS */
.vs-keypad{
  display:grid;
  grid-template-columns:repeat(3,72px);
  grid-template-rows:repeat(4,72px);
  gap:16px;
  justify-content:center;
  margin:40px 0 30px;
}
.vs-keypad .k{
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  font-size:26px; font-weight:500;
  border:none; background: #2b2b2b; color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
  transition: all .2s ease;
}
.vs-keypad .k:hover{ background:#2b2b2b; box-shadow:0 6px 16px rgba(0,0,0,.14); }
.vs-keypad .k:active,
.vs-keypad .k.pressed{
  transform:scale(.95);
  background:var(--vs-brand);
  color:#fff;
  box-shadow:0 2px 8px rgba(253,6,79,.35);
}
.vs-keypad .k[disabled]{ opacity:.4; pointer-events:none; }

/* Posições da última linha */
.vs-keypad .k-back{ grid-column:1; grid-row:4; }                  /* ← (esquerda)  */
.vs-keypad .k-submit{ grid-column:3; grid-row:4; display:none; } /* OK (direita) */
.vs-keypad .k[data-key="0"]{ grid-column:2; grid-row:4; }         /* 0 (centro)   */

/* Quando pronto (4 dígitos) mostra o OK e pinta */
.vs-keypad.vs-ready .k-submit{
  display:flex;
  background:var(--vs-brand);
  color:#fff;
  font-weight:600;
  box-shadow:0 4px 12px rgba(253, 6, 79, 0.35);
}

/* desativa zoom e seleção nos botões */
.vs-keypad, .vs-keypad .k {
  -webkit-user-select: none;   /* impede seleção de texto */
  -webkit-touch-callout: none; /* sem menu de toque */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;  /* evita gestos de zoom / duplo tap */
}

/* botão Cancelar fixo no canto superior direito */
.vs-actions{
  position:absolute; top:20px; right:22px; margin:0; padding:0; display:block;
}
.vs-actions .btn-link{
  background:transparent; border:none; color:#333; font-size:14px; font-weight:500;
  cursor:pointer; transition:opacity .2s ease;
}
.vs-actions .btn-link:hover{ opacity:.7; }

.btn-link{ background:transparent; border:none; color:#333; font-size:14px; }
.btn-info{ background:transparent; border:none; color:#333; font-size:14px; margin-top:50px; }

.vs-feedback{
  margin-top:16px; min-height:48px; font-size:14px;
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
}
.vs-feedback .vs-feedback-msg{ line-height:1.4; }
.vs-feedback-loading .vs-feedback-spinner{
  width:20px; height:20px; border:2px solid #e0e0e0; border-top-color:var(--vs-brand);
  border-radius:50%; animation:vs-spin .7s linear infinite;
}
@keyframes vs-spin{ to{ transform:rotate(360deg); } }
.vs-feedback-success .vs-feedback-check{
  width:32px; height:32px; border:2px solid #22c55e; border-radius:50%;
  background:#22c55e; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; animation:vs-check-pop .3s ease;
}
.vs-feedback-success .vs-feedback-check::after{
  content:''; width:10px; height:16px; border:solid #fff; border-width:0 2.5px 2.5px 0;
  transform:rotate(45deg); margin-top:-6px;
}
.vs-feedback-success{ color:#16a34a !important; }
@keyframes vs-check-pop{ 0%{ transform:scale(0); opacity:0; } 50%{ transform:scale(1.15); } 100%{ transform:scale(1); opacity:1; } }

/* escondemos o "lembrar dispositivo" */
.vs-trust{ display:none; }