/* ===== Base ===== */
:root{
  --brand:#ED6102;
  --ink:#101114;
  --muted:#555;
  --card:#ffffff;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:'Noto Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  color:var(--ink);

  /* Fundo ÚNICO em toda a página */
  background: url("../img/wallpaper.png") center / cover no-repeat fixed;

  /* Centro o cartão e deixo respirar em mobile */
  min-height:100dvh; /* mais fiável que 100vh em mobile */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}

/* ===== Cartão/Container ===== */
.container{
  width:100%;
  max-width: 560px;     /* confortável em desktop/tablet */
  min-height: 520px;    /* altura mínima agradável; cresce se precisar */
  background-color: var(--card);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10), 0 20px 50px rgba(0,0,0,.12);

  /* layout interno */
  display:flex;
  flex-direction:column;
  overflow:hidden; /* cantos arredondados limpos */
  backdrop-filter: saturate(120%) blur(0px); /* opcional */
}

/* Removemos quaisquer decorações/gradientes do container — o fundo passa a ser sempre o do body */
.container::before{ content:none; }

/* ===== Logo ===== */
.icon{
  width: clamp(120px, 40vw, 180px);
  height:auto;
  margin: 20px auto 8px;
  display:block;
}

/* ===== Tabs ===== */
.tab-header{
  display:flex;
  gap:8px;
  width:100%;
  padding: 0 16px;
  margin: 8px 0 6px;
  border-bottom: 1px solid #eee;
}

.tab-link{
  flex:1;
  text-align:center;
  padding:12px 8px;
  font-weight:700;
  color:var(--muted);
  cursor:pointer;
  user-select:none;
  border-bottom: 2px solid transparent;
  border-radius: 10px 10px 0 0;
}
.tab-link.active{
  color:var(--brand);
  border-bottom-color: var(--brand);
  background: #fff7f2;
}

/* ===== Conteúdo (rola dentro do cartão se necessário) ===== */
.tab-content{
  display:none;
  padding: 16px 20px;
  overflow:auto;
  flex:1;
}
.tab-content.active{ display:block; }

/* ===== Campos ===== */
.input-container{ position:relative; margin:18px 0; }

.input-container label{
  position:absolute; left:0; top:0;
  font-size:14px; color:#000; transition:.25s;
  pointer-events:none;
}

.input-container input{
  width:100%;
  border:0; border-bottom:2px solid #ddd;
  background:transparent;
  padding:14px 0 10px 36px;   /* espaço para ícone à esquerda */
  font-size:16px; color:#000;
  outline:0;
}
.input-container input:focus{ border-bottom-color: var(--brand); }
.input-container input:focus ~ label,
.input-container input:not(:placeholder-shown) ~ label{
  top:-12px; font-size:12px; color:var(--brand);
}

/* Ícone dentro do input */
.icon-input{
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  width:20px; height:20px; opacity:.9;
}

/* ===== Botão ===== */
.btn{
  display:block;
  width:100%;
  margin: 16px 0 6px;
  padding:14px 16px;
  border:0; border-radius:10px;
  background:var(--brand); color:#fff;
  font-weight:800; text-transform:uppercase;
  cursor:pointer; outline:0;
  transition: transform .06s ease, filter .18s ease;
}
.btn:hover{ filter:brightness(1.03); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

/* ===== Auxiliares ===== */
.text-center{
  color:#000; text-transform:uppercase; font-size: clamp(18px, 2.4vw, 22px);
  margin:12px 0; text-align:center;
}
b a{ color:var(--brand); text-decoration:none; }
b a:hover{ text-decoration:underline; }

/* ===== Rodapé dentro do cartão ===== */
footer{
  margin-top:auto;
  padding: 10px 0 16px;
  color:#777; font-size:12px;
  border-top:4px solid #f5f5f5;
  text-align:center;
}

/* ===== Responsivo extra pequeno ===== */
@media (max-width: 380px){
  .container{ border-radius:14px; }
  .tab-header{ padding: 0 12px; gap:6px; }
  .tab-link{ padding:10px 6px; font-size:14px; }
  .tab-content{ padding: 14px 16px; }
}