/* ==========================================
MUSICALWORLD — CSS DA TELA DE LOGIN / CADASTRO
(NOVO DESIGN)

Arquivo:
css/login.css

Responsabilidades:

* Estilizar login e cadastro.
* Controlar o layout da autenticação.
* Estilizar campos com ícones e botões.
* Exibir estados visuais de erro e sucesso.
* Respeitar a área segura do Android/iOS.

Visual:

* Marca em quadrado roxo com barras de equalizador.
* Abas Entrar / Cadastrar em controle segmentado.
* Campos de 50px com ícone à esquerda.
* Botão principal roxo.
* Login social com Google e Apple.
========================================== */


/* ==========================================
VARIÁVEIS
========================================== */

:root {

  --auth-bg: #f8fafc;
  --auth-card: #ffffff;

  --auth-text: #0f172a;
  --auth-text-soft: #334155;
  --auth-muted: #64748b;
  --auth-subtle: #94a3b8;

  --auth-border: #e2e8f0;
  --auth-border-strong: #dfe3ed;

  --auth-field-bg: #f8fafc;
  --auth-chip: #f1f5f9;

  --auth-primary: #6d4aff;
  --auth-primary-dark: #5f3ff0;
  --auth-primary-text: #4c2fd1;
  --auth-primary-ring: rgba(109, 74, 255, 0.12);

  --auth-danger: #dc2626;
  --auth-success: #15803d;

  --auth-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --auth-safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));

}


/* ==========================================
BASE
========================================== */

* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

  font-family:
  Manrope,
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  Roboto,
  Helvetica,
  Arial,
  sans-serif;

}

html {

  /* Impede que o navegador altere o tamanho da fonte por conta própria */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

}

body {

  background-color: var(--auth-bg);

  color: var(--auth-text);

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 100vh;

  min-height: 100dvh;

  -webkit-font-smoothing: antialiased;

  -webkit-tap-highlight-color: transparent;

}

.app-container {

  width: 100%;

  max-width: 420px;

  background-color: var(--auth-card);

  min-height: 100vh;

  min-height: 100dvh;

  display: flex;

  flex-direction: column;

  position: relative;

  overflow-x: hidden;

  justify-content: flex-start;

  align-items: center;

  padding:
    calc(var(--auth-safe-top) + 32px)
    22px
    calc(var(--auth-safe-bottom) + 24px);

}

@media (min-width: 421px) {

  .app-container {

    height: min(850px, calc(100vh - 32px));

    min-height: 0;

    border-radius: 28px;

    overflow-y: auto;

    border: 1px solid var(--auth-border);

    box-shadow: 0 8px 40px rgba(15, 23, 42, 0.08);

    padding-top: 40px;

  }

}


/* ==========================================
CARD (SEM CAIXA — O CONTEÚDO FICA DIRETO NA TELA)
========================================== */

.checkout-card {

  background: transparent;

  border: 0;

  border-radius: 0;

  box-shadow: none;

  padding: 0;

  display: flex;

  flex-direction: column;

  width: 100%;

  max-width: 380px;

  align-items: center;

  gap: 22px;

  /* Centraliza quando sobra espaço, sem cortar o topo quando falta */
  margin: auto;

}


/* ==========================================
CABEÇALHO — MARCA + NOME
========================================== */

.auth-header {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

  text-align: center;

}

.auth-logo-mark {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 4px;

  width: 60px;

  height: 60px;

  background-color: var(--auth-primary);

  border-radius: 18px;

}

.auth-logo-mark span {

  display: block;

  width: 5px;

  border-radius: 3px;

  background-color: #ffffff;

}

.auth-logo-mark span:nth-child(1) { height: 14px; }

.auth-logo-mark span:nth-child(2) { height: 26px; }

.auth-logo-mark span:nth-child(3) { height: 20px; }

.auth-logo-mark span:nth-child(4) { height: 30px; }

.auth-title {

  font-size: 26px;

  font-weight: 800;

  color: #172033;

  letter-spacing: -0.03em;

  line-height: 1;

}

.auth-title span {

  color: var(--auth-primary);

}

.auth-welcome {

  text-align: center;

}

.auth-heading {

  font-size: 20px;

  font-weight: 800;

  color: var(--auth-text);

  letter-spacing: -0.01em;

  line-height: 1.25;

}

.auth-subtitle {

  font-size: 13px;

  color: var(--auth-muted);

  line-height: 1.5;

  margin-top: 4px;

}


/* ==========================================
TOGGLE ENTRAR / CADASTRAR
========================================== */

.auth-toggle-container {

  position: relative;

  display: flex;

  background-color: var(--auth-chip);

  border-radius: 14px;

  padding: 4px;

  width: 100%;

  height: 48px;

  overflow: hidden;

}

.auth-toggle-slider {

  position: absolute;

  top: 4px;

  left: 4px;

  width: calc(50% - 4px);

  height: calc(100% - 8px);

  background-color: #ffffff;

  border: 1px solid rgba(15, 23, 42, 0.06);

  border-radius: 11px;

  transition:
    transform
    0.3s
    cubic-bezier(0.4, 0, 0.2, 1);

  z-index: 1;

}

.auth-tab-btn {

  flex: 1;

  background: none;

  border: none;

  color: var(--auth-muted);

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  z-index: 2;

  transition: color 0.2s;

  text-align: center;

}

.auth-tab-btn.active {

  color: var(--auth-primary-text);

  font-weight: 800;

}

.auth-toggle-container.right
.auth-toggle-slider {

  transform: translateX(100%);

}


/* ==========================================
SUB-TOGGLE DE CADASTRO (SE UTILIZADO)
========================================== */

.cadastro-tipo-container {

  position: relative;

  display: flex;

  background-color: var(--auth-chip);

  border-radius: 12px;

  padding: 3px;

  width: 100%;

  height: 40px;

  overflow: hidden;

}

.cadastro-tipo-slider {

  position: absolute;

  top: 3px;

  left: 3px;

  width: calc((100% - 6px) / 3);

  height: calc(100% - 6px);

  background-color: #ffffff;

  border: 1px solid rgba(15, 23, 42, 0.06);

  border-radius: 9px;

  transition:
    transform
    0.3s
    cubic-bezier(0.4, 0, 0.2, 1);

  z-index: 1;

}

.cadastro-tipo-slider.cliente { transform: translateX(0%); }

.cadastro-tipo-slider.cantor { transform: translateX(100%); }

.cadastro-tipo-slider.musico { transform: translateX(200%); }

.tipo-btn {

  flex: 1;

  background: none;

  border: none;

  color: var(--auth-muted);

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;

  z-index: 2;

  transition: color 0.2s;

  text-align: center;

}

.tipo-btn.active {

  color: var(--auth-primary-text);

}


/* ==========================================
FORMULÁRIOS
========================================== */

.auth-form-pane {

  display: flex;

  flex-direction: column;

  gap: 14px;

  width: 100%;

  animation:
    fadeInAuth
    0.3s
    ease-in-out;

}

@keyframes fadeInAuth {

  from {

    opacity: 0;

    transform: translateY(6px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

.form-group {

  display: flex;

  flex-direction: column;

  gap: 6px;

  width: 100%;

}

.form-group label {

  font-size: 12px;

  color: var(--auth-text-soft);

  font-weight: 600;

}


/* ==========================================
CAMPO COM ÍCONE
========================================== */

.mw-input-wrap {

  position: relative;

  display: flex;

  align-items: center;

  width: 100%;

}

.mw-input-icon {

  position: absolute;

  left: 15px;

  width: 20px;

  height: 20px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;

  color: var(--auth-subtle);

  pointer-events: none;

  transition: color 0.2s;

}

.mw-input-wrap:focus-within .mw-input-icon {

  color: var(--auth-primary);

}

.input-custom {

  background-color: var(--auth-field-bg);

  border: 1px solid var(--auth-border-strong);

  border-radius: 14px;

  height: 50px;

  padding: 0 14px 0 46px;

  color: var(--auth-text);

  font-size: 14px;

  outline: none;

  width: 100%;

  transition:
    border-color 0.2s,
    background-color 0.2s,
    box-shadow 0.2s;

}

.input-custom::placeholder {

  color: var(--auth-subtle);

}

.input-custom:focus {

  border-color: var(--auth-primary);

  background-color: #ffffff;

  box-shadow: 0 0 0 4px var(--auth-primary-ring);

}

/* Espaço para o botão do olho */

.mw-input-wrap--senha .input-custom {

  padding-right: 52px;

}

/*
 * Botão mostrar/ocultar senha.
 * É criado pelo js/auth/MostrarSenha.js dentro do campo.
 */

.mw-input-wrap .mw-password-toggle {

  position: absolute;

  top: 50%;

  right: 8px;

  transform: translateY(-50%);

  display: flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  padding: 0;

  margin: 0;

  background: transparent;

  border: 0;

  border-radius: 10px;

  color: var(--auth-subtle);

  cursor: pointer;

}

.mw-input-wrap .mw-password-toggle svg {

  display: block;

  width: 20px;

  height: 20px;

}

.mw-input-wrap .mw-password-toggle:hover {

  color: var(--auth-primary);

}

.mw-input-wrap .mw-password-toggle:focus-visible {

  outline: 2px solid var(--auth-primary);

  outline-offset: 1px;

}


/* ==========================================
SELECT (TIPO DE ARTISTA)
========================================== */

select.input-custom {

  padding-left: 14px;

  padding-right: 40px;

  cursor: pointer;

  appearance: none;

  -webkit-appearance: none;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  background-repeat: no-repeat;

  background-position: right 14px center;

  background-size: 18px;

}


/* ==========================================
ESTADO DE ERRO DO CAMPO
========================================== */

.input-custom.input-error {

  border-color: #ef4444 !important;

  background-color: #fff7f7;

  box-shadow:
    0 0 0 3px
    rgba(239, 68, 68, 0.10);

  animation:
    campoErro
    0.35s
    ease-out;

}

.input-custom.input-error:focus {

  border-color: var(--auth-danger) !important;

  background-color: #ffffff;

  outline: none;

  box-shadow:
    0 0 0 3px
    rgba(239, 68, 68, 0.14);

}

@keyframes campoErro {

  0% { transform: translateX(0); }

  20% { transform: translateX(-3px); }

  40% { transform: translateX(3px); }

  60% { transform: translateX(-2px); }

  80% { transform: translateX(2px); }

  100% { transform: translateX(0); }

}


/* ==========================================
MENSAGEM DE ERRO DO CAMPO
========================================== */

.auth-field-error {

  display: none;

  align-items: center;

  gap: 5px;

  margin-top: -2px;

  color: var(--auth-danger);

  font-size: 12px;

  font-weight: 500;

  line-height: 1.35;

}

.auth-field-error.visible {

  display: flex;

  animation:
    mensagemErroEntrada
    0.2s
    ease-out;

}

@keyframes mensagemErroEntrada {

  from {

    opacity: 0;

    transform: translateY(-3px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}


/* ==========================================
MENSAGEM GERAL DO FORMULÁRIO
========================================== */

.auth-form-message {

  display: none;

  width: 100%;

  padding: 11px 13px;

  border-radius: 12px;

  font-size: 13px;

  font-weight: 600;

  line-height: 1.45;

  text-align: center;

}

.auth-form-message.visible {

  display: block;

  animation:
    authMensagemEntrada
    0.25s
    ease-out;

}

.auth-form-message.erro {

  color: #b91c1c;

  background: #fef2f2;

  border: 1px solid #fecaca;

}

.auth-form-message.sucesso {

  color: var(--auth-success);

  background: #f0fdf4;

  border: 1px solid #bbf7d0;

}

@keyframes authMensagemEntrada {

  from {

    opacity: 0;

    transform: translateY(-4px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}


/* ==========================================
LINHA "ESQUECEU A SENHA?"
========================================== */

.auth-form-extras {

  display: flex;

  justify-content: flex-end;

  margin-top: -4px;

}

.link-esqueci-senha {

  font-size: 13px;

  color: var(--auth-primary);

  text-decoration: none;

  font-weight: 600;

}

.link-esqueci-senha:hover {

  text-decoration: underline;

}


/* ==========================================
BOTÃO PRINCIPAL
========================================== */

.btn-continuar-proximo {

  background-color: var(--auth-primary);

  color: #ffffff;

  border: none;

  border-radius: 14px;

  height: 52px;

  padding: 0 16px;

  font-size: 15px;

  font-weight: 800;

  cursor: pointer;

  width: 100%;

  text-align: center;

  transition:
    background-color 0.2s,
    opacity 0.2s,
    transform 0.15s;

  margin-top: 4px;

}

.btn-continuar-proximo:hover {

  background-color: var(--auth-primary-dark);

}

.btn-continuar-proximo:active {

  transform: scale(0.99);

}

.btn-continuar-proximo:disabled {

  cursor: wait;

  opacity: 0.7;

}

.btn-continuar-proximo:focus-visible {

  outline: 3px solid var(--auth-primary-ring);

  outline-offset: 2px;

}


/* ==========================================
DIVISOR
========================================== */

.auth-divider {

  display: flex;

  align-items: center;

  text-align: center;

  width: 100%;

  margin: 4px 0 0;

}

.auth-divider::before,
.auth-divider::after {

  content: '';

  flex: 1;

  border-bottom:
    1px solid var(--auth-border);

}

.auth-divider span {

  padding: 0 12px;

  font-size: 12px;

  color: var(--auth-subtle);

  font-weight: 500;

}


/* ==========================================
BOTÕES SOCIAIS
========================================== */

.social-buttons-container {

  display: flex;

  gap: 10px;

  width: 100%;

}

.btn-social {

  flex: 1;

  background-color: #ffffff;

  border:
    1px solid var(--auth-border-strong);

  border-radius: 14px;

  height: 48px;

  padding: 0 10px;

  color: var(--auth-text-soft);

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  transition:
    background-color 0.2s,
    border-color 0.2s;

}

.btn-social svg {

  width: 18px;

  height: 18px;

  flex: 0 0 18px;

}

.btn-social:hover {

  background-color: var(--auth-field-bg);

  border-color: #cbd5e1;

}

.btn-social:focus-visible {

  outline: 3px solid var(--auth-primary-ring);

  outline-offset: 2px;

}


/* ==========================================
OPÇÃO "SOU ARTISTA"
========================================== */

.cadastro-artista-opcao {

  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 6px;

}

.cadastro-artista-label {

  display: flex;

  align-items: center;

  gap: 10px;

  cursor: pointer;

  width: fit-content;

  user-select: none;

}

.cadastro-artista-label input[type="checkbox"] {

  appearance: none;

  -webkit-appearance: none;

  width: 20px;

  height: 20px;

  min-width: 20px;

  border:
    1.5px solid #cbd5e1;

  border-radius: 6px;

  background-color: #ffffff;

  cursor: pointer;

  position: relative;

  transition:
    background-color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;

}

.cadastro-artista-label input[type="checkbox"]:hover {

  border-color: var(--auth-primary);

}

.cadastro-artista-label input[type="checkbox"]:checked {

  background-color: var(--auth-primary);

  border-color: var(--auth-primary);

}

.cadastro-artista-label input[type="checkbox"]:checked::after {

  content: "";

  position: absolute;

  left: 6px;

  top: 2px;

  width: 5px;

  height: 10px;

  border:
    solid #ffffff;

  border-width:
    0 2px 2px 0;

  transform: rotate(45deg);

}

.cadastro-artista-label input[type="checkbox"]:focus-visible {

  outline: none;

  box-shadow:
    0 0 0 3px
    var(--auth-primary-ring);

}

.cadastro-artista-label span {

  font-size: 14px;

  color: var(--auth-text-soft);

  font-weight: 700;

}

.cadastro-artista-descricao {

  font-size: 12px;

  line-height: 1.45;

  color: var(--auth-subtle);

  padding-left: 30px;

  max-width: 340px;

}


/* ==========================================
TIPO DE ARTISTA
========================================== */

.cadastro-tipo-artista {

  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 6px;

  animation:
    fadeInAuth
    0.25s
    ease-in-out;

}

.cadastro-tipo-artista label {

  font-size: 12px;

  color: var(--auth-text-soft);

  font-weight: 600;

}

.cadastro-tipo-artista select option {

  color: var(--auth-text);

  background-color: #ffffff;

}

.cadastro-tipo-artista small {

  display: block;

  margin-top: 2px;

  color: var(--auth-subtle);

  font-size: 12px;

}


/* ==========================================
TERMOS DE USO
========================================== */

.auth-terms {

  width: 100%;

  text-align: center;

  font-size: 12px;

  line-height: 1.55;

  color: var(--auth-subtle);

}

.auth-terms span {

  color: #475569;

  font-weight: 600;

}


/* ==========================================
REDUÇÃO DE MOVIMENTO
========================================== */

@media (prefers-reduced-motion: reduce) {

  .auth-form-pane,
  .cadastro-tipo-artista,
  .auth-form-message.visible,
  .auth-field-error.visible,
  .input-custom.input-error {

    animation: none;

  }

  .auth-toggle-slider,
  .cadastro-tipo-slider,
  .btn-continuar-proximo,
  .input-custom {

    transition: none;

  }

}

/* MUSICALWORLD — Evita zoom automático ao tocar em campos no celular */

@media screen and (max-width: 768px) {
  input,
  textarea,
  select,
  [contenteditable="true"] {
    font-size: 16px !important;
  }
}