/* ═══════════════════════════════════════════════════════════
   LONTRA BEAUTY — Auth pages (login / cadastro)
   Split layout: formulário + mulher (PC) · só formulário (mobile)
   ═══════════════════════════════════════════════════════════ */

:root{
  --lb-bg:#080509; --lb-bg-2:#0e0a12;
  --lb-card:#151017; --lb-card-2:#1c141f;
  --lb-border:rgba(255,255,255,.09);
  --lb-border-2:rgba(236,30,137,.28);
  --lb-pink:#ec1e79; --lb-pink-2:#ff2d8f; --lb-pink-soft:#ff6bb0;
  --lb-grad:linear-gradient(135deg,#ff2d8f 0%,#d61f6e 100%);
  --lb-muted:#a1a1aa; --lb-muted-2:#71717a;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

body.lb-auth{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--lb-bg);color:#fff;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
body.lb-auth a{text-decoration:none;color:inherit}
body.lb-auth img{max-width:100%;display:block}

.lb-auth-wrap{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}

/* ── Left: formulário ── */
.lb-auth-left{
  display:flex;flex-direction:column;justify-content:center;
  padding:2.5rem clamp(1.5rem,5vw,5rem);position:relative;
}
.lb-auth-card{width:100%;max-width:420px;margin:0 auto}

.lb-auth-logo{display:flex;align-items:center;gap:.65rem;margin-bottom:2rem}
.lb-auth-logo b{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.lb-auth-logo small{display:block;font-size:.64rem;letter-spacing:.32em;color:var(--lb-pink-soft);font-weight:600;margin-top:3px}

/* Loading overlay (bolinha girando) */
.lb-loading{position:fixed;inset:0;background:rgba(8,5,9,.78);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:9999}
.lb-loading.show{display:flex}
.lb-load-spin{width:56px;height:56px;border:4px solid rgba(236,30,137,.22);border-top-color:var(--lb-pink);border-radius:50%;animation:lbspin .7s linear infinite}
@keyframes lbspin{to{transform:rotate(360deg)}}

.lb-auth-title{font-size:1.7rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.35rem}
.lb-auth-sub{color:var(--lb-muted);font-size:.92rem;margin-bottom:1.75rem}

.lb-field{margin-bottom:1rem}
.lb-field label{display:block;font-size:.8rem;font-weight:600;color:#d4d4d8;margin-bottom:.4rem}
.lb-input-wrap{
  display:flex;align-items:center;gap:.6rem;
  background:var(--lb-card);border:1.5px solid var(--lb-border);
  border-radius:12px;padding:.8rem .95rem;transition:.15s;
}
.lb-input-wrap:focus-within{border-color:var(--lb-pink);box-shadow:0 0 0 3px rgba(236,30,137,.12)}
.lb-input-wrap svg{color:var(--lb-muted-2);flex-shrink:0}
.lb-input-wrap input{
  flex:1;background:none;border:none;outline:none;color:#fff;
  font-size:.95rem;font-family:inherit;min-width:0;
}
.lb-input-wrap input::placeholder{color:var(--lb-muted-2)}
.lb-input-wrap button{background:none;border:none;color:var(--lb-muted-2);cursor:pointer;display:flex;padding:0}
.lb-input-wrap select{flex:1;min-width:0;width:100%;background:none;border:none;outline:none;color:#fff;font-size:.95rem;font-family:inherit;text-overflow:ellipsis;-webkit-appearance:none;appearance:none}
.lb-input-wrap select option{background:var(--lb-card);color:#fff}
.lb-select-wrap .lb-select-arrow{color:var(--lb-muted-2);flex-shrink:0;pointer-events:none}

.lb-btn-primary{
  display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;
  background:var(--lb-grad);color:#fff;border:none;cursor:pointer;
  font-weight:700;font-size:.98rem;border-radius:12px;padding:.9rem 1rem;
  box-shadow:0 10px 26px rgba(236,30,137,.4);transition:.2s;margin-top:.4rem;
}
.lb-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(236,30,137,.55)}

.lb-remember{
  display:flex;align-items:center;gap:.55rem;margin:-.3rem 0 1rem;
  font-size:.86rem;color:var(--lb-muted);cursor:pointer;user-select:none;
}
.lb-remember input{width:16px;height:16px;accent-color:var(--lb-pink);cursor:pointer;flex-shrink:0}
.lb-remember span{color:#d4d4d8}

.lb-auth-links{text-align:center;margin-top:1.1rem;font-size:.88rem;color:var(--lb-muted)}
.lb-auth-links a{color:var(--lb-pink-soft);font-weight:600}
.lb-auth-links .row{margin-top:.5rem}

.lb-alert{border-radius:12px;padding:.75rem 1rem;font-size:.88rem;margin-bottom:1.1rem;display:flex;align-items:center;gap:.5rem}
.lb-alert-error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);color:#fca5a5}
.lb-alert-ok{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);color:#6ee7b7}

.lb-auth-foot{margin-top:2rem;display:flex;align-items:center;justify-content:center;gap:1.25rem;font-size:.82rem;color:var(--lb-muted-2)}
.lb-auth-foot a:hover{color:var(--lb-pink-soft)}

/* Tabs (cadastro) */
.lb-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;background:var(--lb-card);border:1px solid var(--lb-border);border-radius:12px;padding:.35rem;margin-bottom:1.5rem}
.lb-tab{min-width:0;display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.75rem .5rem;border-radius:11px;font-size:.82rem;font-weight:700;color:var(--lb-muted);cursor:pointer;border:none;background:rgba(255,255,255,.04);transition:.2s;white-space:nowrap}
.lb-tab span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-tab:hover{background:rgba(255,255,255,.08);}
.lb-tab.active{background:var(--lb-grad);color:#fff;box-shadow:0 8px 22px rgba(236,30,137,.24)}
.lb-tab-icon{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;flex-shrink:0}
.lb-tab-icon svg{width:18px;height:18px;}
.lb-tab-content{display:none}
.lb-tab-content.active{display:block}
.lb-field-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.lb-field-row > .lb-field{min-width:0}
.lb-hint{font-size:.76rem;color:var(--lb-muted-2);margin:.25rem 0 1rem}

@media(max-width:480px){
  .lb-tabs{gap:.4rem;padding:.3rem}
  .lb-tab{font-size:.78rem;padding:.7rem .4rem}
  .lb-tab-icon{width:26px;height:26px}
  .lb-tab-icon svg{width:14px;height:14px}
  .lb-field-row{grid-template-columns:1fr}
}

/* ── Right: mulher + neon ── */
.lb-auth-right{
  position:relative;overflow:hidden;
  background:radial-gradient(circle at 60% 40%,#2a0d1e 0%,#0e0a12 60%);
  display:flex;align-items:center;justify-content:center;
}
.lb-auth-right .ring{
  position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);
  width:min(80%,520px);aspect-ratio:1;border-radius:50%;
  border:3px solid var(--lb-pink);
  box-shadow:0 0 70px rgba(236,30,137,.6),inset 0 0 70px rgba(236,30,137,.2);
}
.lb-auth-right .glow{
  position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);
  width:min(70%,440px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(236,30,137,.4),transparent 65%);filter:blur(35px);
}
.lb-auth-right img{
  position:absolute;top:50%;left:52%;transform:translate(-50%,-50%);z-index:1;
  width:min(80%,520px);aspect-ratio:1;object-fit:cover;object-position:55% top;border-radius:50%;
}
.lb-auth-right .badge-float{
  position:absolute;z-index:2;bottom:8%;left:6%;
  background:rgba(20,10,18,.9);backdrop-filter:blur(10px);
  border:1px solid var(--lb-border-2);border-radius:14px;padding:.85rem 1rem;
  display:flex;align-items:center;gap:.7rem;box-shadow:0 20px 40px rgba(0,0,0,.5);
}
.lb-auth-right .badge-float .ic{width:38px;height:38px;border-radius:10px;background:var(--lb-grad);display:grid;place-items:center;font-size:1.1rem}
.lb-auth-right .badge-float b{font-size:.82rem}
.lb-auth-right .badge-float span{font-size:.72rem;color:var(--lb-muted)}

/* ── Responsive ── */
@media(max-width:860px){
  .lb-auth-wrap{grid-template-columns:1fr}
  .lb-auth-right{display:none}
  .lb-auth-left{min-height:100vh}
}
@media(max-width:480px){
  .lb-field-row{grid-template-columns:1fr}
  .lb-auth-left{padding:2rem 1.25rem}
}

/* Página de cadastro (só register.php): campos com font-size < 16px fazem o
   iOS Safari dar zoom automático na tela inteira ao focar o campo — por isso
   parecia "zoom alto" ao tocar em e-mail/telefone/etc. Forçando 16px evita o
   zoom automático do navegador (sem mudar o visual no desktop). */
.lb-auth-register .lb-input-wrap input,
.lb-auth-register .lb-input-wrap select{font-size:16px}
@media(max-width:480px){
  .lb-auth-register .lb-auth-title{font-size:1.45rem}
  .lb-auth-register .lb-auth-sub{font-size:.86rem;margin-bottom:1.25rem}
  .lb-auth-register .lb-field{margin-bottom:.8rem}
  .lb-auth-register .lb-input-wrap{padding:.65rem .8rem}
  .lb-auth-register .lb-tabs{margin-bottom:1.1rem}
}