/* ══════════════════════════════════════════════════════
   AUTH — MãoCerta Identity
   Consistente com a home: #0B1629, #F59E0B, branco, Nunito
   ══════════════════════════════════════════════════════ */

/* ── Telas de auth compartilham o mesmo fundo da home ── */
#page-login,
#page-cadastro,
#page-otp,
#page-perfil-novo,
#page-otp-phone,
#page-otp-code,
#page-otp-perfil-cliente,
#page-otp-perfil-prestador,
#page-otp-pendente {
  background: #0B1629;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

/* ── Wrapper full-screen com fundo ── */
.mc-auth-screen {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #0B1629;
  font-family: 'Nunito', system-ui, sans-serif;
  position: relative;
  overflow: hidden;
  animation: mc-auth-fadein 0.35s ease both;
}

@keyframes mc-auth-fadein {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes mc-auth-fadein-left {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Background image layer (igual à hero da home) ── */
.mc-auth-bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/background.png');
  background-size: cover;
  background-position: center top;
  z-index: 0;
}

/* ── Gradient overlay escurecendo de cima pra baixo ── */
.mc-auth-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11,22,41,0.55) 0%,
    rgba(11,22,41,0.30) 25%,
    rgba(11,22,41,0.80) 55%,
    #0B1629 78%
  );
  z-index: 1;
}

/* ── Topo: Logo + back button ── */
.mc-auth-top {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 20px 18px;
  gap: 6px;
  animation: mc-slideup 0.5s 0.05s ease both;
}

.mc-auth-back {
  position: absolute;
  left: 16px;
  top: 32px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.mc-auth-back:active { background: rgba(255,255,255,0.22); }

.mc-auth-logo-wrap {
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5));
}
.mc-auth-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}
.mc-auth-brand {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
}
.mc-auth-brand-mao  { color: #ffffff; }
.mc-auth-brand-certa { color: #F59E0B; }

/* ── Card branco deslizando de baixo ── */
.mc-auth-card {
  position: relative;
  z-index: 2;
  flex: 1;
  background: #fff;
  border-radius: 26px 26px 0 0;
  padding: 28px 22px env(safe-area-inset-bottom, 24px);
  overflow-y: auto;
  box-shadow: 0 -6px 32px rgba(0,0,0,0.22);
  animation: mc-card-up 0.45s 0.12s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes mc-card-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Pull indicator ── */
.mc-auth-card::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  background: #E5E7EB;
  border-radius: 2px;
  margin: 0 auto 20px;
}

/* ── Título e subtítulo do card ── */
.mc-auth-title {
  font-size: 22px;
  font-weight: 900;
  color: #0B1629;
  margin-bottom: 4px;
  line-height: 1.2;
}
.mc-auth-subtitle {
  font-size: 14px;
  color: #6B7280;
  margin-bottom: 22px;
  font-weight: 600;
}

/* ── Phone input grande ── */
.mc-phone-wrap {
  display: flex;
  align-items: center;
  background: #F5F6FA;
  border: 2px solid #E5E7EB;
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.18s, box-shadow 0.18s;
  margin-bottom: 6px;
}
.mc-phone-wrap:focus-within {
  border-color: #F59E0B;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
}
.mc-phone-flag {
  padding: 0 14px;
  font-size: 20px;
  border-right: 1.5px solid #E5E7EB;
  height: 56px;
  display: flex;
  align-items: center;
  background: #fff;
  flex-shrink: 0;
}
.mc-phone-input {
  flex: 1;
  padding: 16px 16px;
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #0B1629;
  background: transparent;
  border: none;
  outline: none;
  letter-spacing: 1px;
}
.mc-phone-input::placeholder { color: #D1D5DB; font-weight: 600; letter-spacing: 0; }

/* ── Botão primário — igual à home ── */
.mc-auth-btn {
  width: 100%;
  height: 54px;
  border-radius: 50px;
  background: #F59E0B;
  color: #0B1629;
  border: none;
  font-family: 'Nunito', sans-serif;
  font-size: 17px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 4px 22px rgba(245,158,11,0.38);
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
  -webkit-tap-highlight-color: transparent;
  margin-top: 4px;
  letter-spacing: 0.01em;
}
.mc-auth-btn:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(245,158,11,0.22);
}
.mc-auth-btn:disabled {
  background: #F3F4F6;
  color: #9CA3AF;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.mc-auth-btn.loading {
  background: #FBBF24;
  pointer-events: none;
}
.mc-auth-btn .mc-btn-spinner {
  width: 20px; height: 20px;
  border: 2.5px solid rgba(11,22,41,0.2);
  border-top-color: #0B1629;
  border-radius: 50%;
  animation: mc-spin 0.65s linear infinite;
  display: none;
}
.mc-auth-btn.loading .mc-btn-spinner { display: block; }
.mc-auth-btn.loading .mc-btn-label   { display: none; }
@keyframes mc-spin { to { transform: rotate(360deg); } }

/* ── Link secundário ── */

.mc-auth-link {
  color: #0B1629;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1.5px solid #F59E0B;
  padding-bottom: 1px;
}
.mc-auth-link:hover { color: #F59E0B; }

/* ── Hint de erro ── */
.mc-auth-error {
  background: #FEF2F2;
  border: 1.5px solid #FECACA;
  color: #DC2626;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
  display: none;
  animation: mc-shake 0.3s ease;
}
.mc-auth-error.show { display: block; }
@keyframes mc-shake {
  0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)}
}

/* ── Reenviar código ── */
.mc-resend-row {
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  color: #9CA3AF;
  font-weight: 600;
}
.mc-resend-btn {
  background: none;
  border: none;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #0B1629;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-decoration-color: #F59E0B;
  transition: color 0.15s;
}
.mc-resend-btn:disabled { color: #9CA3AF; text-decoration: none; cursor: default; }
.mc-resend-timer {
  font-weight: 700;
  color: #F59E0B;
}

/* ── Tipo Selector (Cliente/Prestador) ── */
.mc-tipo-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

/* ── Form fields ── */
.mc-field {
  margin-bottom: 14px;
}
.mc-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.mc-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #E5E7EB;
  border-radius: 12px;
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #0B1629;
  background: #F9FAFB;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  appearance: none;
  -webkit-appearance: none;
}
.mc-input:focus {
  border-color: #F59E0B;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
  background: #fff;
}
.mc-input::placeholder { color: #D1D5DB; }
select.mc-input { cursor: pointer; }

/* ── Termos ── */

/* ── Divider / Demo ── */

/* ── Demo Buttons ── */

.mc-demo-btn-admin 
.mc-demo-arrow { margin-left: auto; font-size: 16px; color: #D1D5DB; }

/* ── Phone info hint ── */
.mc-phone-hint {
  font-size: 12px;
  color: #9CA3AF;
  font-weight: 600;
  margin-top: 6px;
  text-align: center;
}

/* ── OTP phone display ── */

/* ── Prestador extras fields (conditional) ── */

/* ── Success state ── */
.mc-auth-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 0 0;
}
.mc-auth-success-icon {
  font-size: 56px;
  margin-bottom: 12px;
  animation: mc-pop 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes mc-pop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── Responsive ── */
@media (max-height: 680px) {
  .mc-auth-top { padding: 20px 20px 12px; }
  .mc-auth-logo { width: 50px; height: 50px; }
  .mc-auth-brand { font-size: 22px; }
  .mc-auth-card { padding: 20px 18px env(safe-area-inset-bottom, 16px); }
  
}

/* ── OTP pages: erro em tema escuro ── */
#page-otp-phone .mc-auth-error,
#page-otp-code .mc-auth-error,
#page-otp-perfil-cliente .mc-auth-error,
#page-otp-perfil-prestador .mc-auth-error {
  background: rgba(239,68,68,0.18);
  border-color: rgba(239,68,68,0.45);
  color: #FCA5A5;
}

/* ══ DESKTOP — centraliza telas de auth ════════════════════════════ */
@media (min-width: 600px) {
  /* Só aplica display:flex quando a página está ATIVA
     Evita mostrar todas as páginas empilhadas no desktop */
  #page-login.active,
  #page-cadastro.active,
  #page-otp.active,
  #page-perfil-novo.active,
  #page-otp-phone.active,
  #page-otp-code.active,
  #page-otp-perfil-cliente.active,
  #page-otp-perfil-prestador.active,
  #page-otp-pendente.active {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #060f1e;
  }

  .mc-auth-screen {
    width: 100%;
    max-width: 420px;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    box-shadow: 0 0 80px rgba(0,0,0,0.6);
  }
}

@media (min-width: 900px) {
  .mc-auth-screen {
    max-width: 390px;
    min-height: 700px;
    height: 90vh;
    height: 90dvh;
    border-radius: 28px;
    overflow: hidden;
  }
}