/* ============================================================
   Conta do cliente — herda o tema da loja (css/style.css).
   ============================================================ */

.pagina-conta { min-height: 100vh; display: flex; flex-direction: column; }
.conta-main {
  position: relative; z-index: 1; flex: 1;
  max-width: 900px; width: 100%; margin: 0 auto;
  padding: calc(var(--header-h) + 48px) 24px 90px;
}

.btn-sm-topo { padding: 10px 20px; font-size: .9rem; }

/* ─────────────── ACESSO ─────────────── */

.acesso:not([hidden]) { display: grid; }
.acesso { place-items: center; min-height: 60vh; }

.acesso-box {
  width: 100%; max-width: 420px;
  background: var(--card); border: 1px solid var(--card-bdr);
  border-radius: var(--r-xl); padding: 38px 32px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.acesso-titulo {
  font-family: var(--display); font-weight: 600; font-size: 1.9rem;
  text-align: center; margin-bottom: 8px;
}
.acesso-sub { text-align: center; color: var(--texto-dim); font-size: .95rem; margin-bottom: 26px; }

.abas-acesso {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px;
  background: rgba(255,255,255,.05); border-radius: 100px; margin-bottom: 24px;
}
.aba-acesso {
  padding: 10px; border-radius: 100px; font-size: .92rem; font-weight: 600;
  color: var(--texto-dim); transition: all .22s;
}
.aba-acesso.is-active {
  background: linear-gradient(135deg, var(--laranja), var(--ouro));
  color: #2b1400; box-shadow: 0 4px 14px var(--glow);
}

.form-acesso { display: grid; gap: 16px; }
.form-acesso .campo:not([hidden]) { display: block; }
.campo > span {
  display: block; font-size: .78rem; font-weight: 700; color: var(--texto-mute);
  margin-bottom: 7px; text-transform: uppercase; letter-spacing: .05em;
}
.campo input, .campo textarea {
  width: 100%; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r); padding: 13px 16px; color: var(--texto); outline: none;
  font-family: inherit; transition: border-color .2s;
}
.campo input:focus, .campo textarea:focus { border-color: var(--laranja); }
.campo input::placeholder { color: var(--texto-mute); }

.erro-msg {
  background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.32);
  color: #fca5a5; padding: 11px 15px; border-radius: var(--r-sm); font-size: .88rem;
}

.acesso-rodape { text-align: center; color: var(--texto-mute); font-size: .9rem; margin-top: 20px; }
.link { color: var(--laranja-lt); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { color: var(--ouro-lt); }

/* ─────────────── PAINEL DO CLIENTE ─────────────── */

.conta-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 34px;
}
.conta-nome { font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.15; }
.conta-cel { color: var(--texto-dim); font-size: .95rem; }
.conta-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.conta-acoes .btn { padding: 10px 20px; font-size: .9rem; }

.conta-kpis {
  display: grid; gap: 14px; margin-bottom: 44px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.conta-kpi {
  background: var(--card); border: 1px solid var(--card-bdr);
  border-radius: var(--r-lg); padding: 20px 22px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.conta-kpi .rot {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--texto-mute); font-weight: 700; margin-bottom: 6px;
}
.conta-kpi .val { font-family: var(--display); font-weight: 700; font-size: 1.7rem; color: var(--ouro-lt); line-height: 1.1; }

.conta-secao {
  font-family: var(--display); font-weight: 600; font-size: 1.3rem; margin-bottom: 18px;
}

.lista-pedidos { display: grid; gap: 14px; }

.ped {
  background: var(--card); border: 1px solid var(--card-bdr);
  border-radius: var(--r-lg); padding: 22px 24px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .25s;
}
.ped:hover { border-color: var(--card-bdr-hi); }

.ped-topo { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 4px; }
.ped-cod { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.ped-quando { font-size: .84rem; color: var(--texto-mute); margin-left: auto; }

.estado {
  display: inline-block; padding: 4px 12px; border-radius: 100px;
  font-size: .74rem; font-weight: 800; letter-spacing: .02em;
}
.estado.recebido   { background: rgba(255,185,15,.16); color: var(--ouro-lt); }
.estado.preparando { background: rgba(96,165,250,.16); color: #93c5fd; }
.estado.pronto     { background: rgba(74,222,128,.16); color: #6ee7a0; }
.estado.entregue   { background: rgba(255,255,255,.08); color: var(--texto-mute); }
.estado.cancelado  { background: rgba(248,113,113,.16); color: #fca5a5; }
.estado.tipo       { background: rgba(255,255,255,.06); color: var(--texto-dim); font-weight: 600; }

.ped-itens { list-style: none; display: grid; gap: 4px; margin: 14px 0; }
.ped-itens li { display: flex; gap: 10px; font-size: .93rem; color: var(--texto-dim); }
.ped-itens b { color: var(--texto); min-width: 26px; }
.ped-itens .val { margin-left: auto; color: var(--texto-mute); }

.ped-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07); flex-wrap: wrap;
}
.ped-total { font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--ouro-lt); }
.ped-total small { display: block; font-family: var(--texto-ff); font-size: .74rem; font-weight: 500; color: var(--texto-mute); }
.ped-obs { font-size: .86rem; color: var(--ouro-lt); margin-top: 8px; }
.ped-agenda {
  font-size: .9rem; margin-top: 10px; padding: 9px 13px; border-radius: var(--r-sm);
  background: rgba(255,185,15,.09); border: 1px solid rgba(255,185,15,.24);
  color: var(--ouro-lt);
}
.ped-agenda strong { color: var(--ouro); }
.ped-end { font-size: .86rem; color: var(--texto-mute); margin-top: 4px; }

.btn-repetir { padding: 10px 20px; font-size: .89rem; }

/* ─────────────── MODAL ─────────────── */

.modal-conta:not([hidden]) { display: grid; }
.modal-conta { position: fixed; inset: 0; z-index: 200; place-items: center; padding: 24px; }
.modal-conta .modal-fundo { position: absolute; inset: 0; background: rgba(4,2,3,.74); backdrop-filter: blur(4px); }
.modal-conta .modal-caixa {
  position: relative; width: 100%; max-width: 460px;
  background: var(--card-solid); border: 1px solid var(--card-bdr); border-radius: 22px;
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
}
.modal-conta .modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.modal-conta .modal-head h2 { font-family: var(--display); font-size: 1.2rem; font-weight: 600; }
.modal-conta .modal-x {
  width: 34px; height: 34px; border-radius: 50%; font-size: 1.5rem; line-height: 1;
  display: grid; place-items: center; color: var(--texto-dim);
}
.modal-conta .modal-x:hover { background: rgba(255,255,255,.08); color: var(--texto); }
.modal-conta .modal-corpo { padding: 22px; display: grid; gap: 14px; }
.modal-conta .modal-rodape {
  padding: 16px 22px; border-top: 1px solid rgba(255,255,255,.07);
  display: flex; gap: 10px; justify-content: flex-end;
}

/* ─────────────── RESPONSIVO ─────────────── */

@media (max-width: 640px) {
  .conta-main { padding: calc(var(--header-h) + 30px) 18px 70px; }
  .acesso-box { padding: 30px 22px; }
  .conta-head { flex-direction: column; align-items: flex-start; }
  .ped-quando { margin-left: 0; width: 100%; }
  .ped-rodape { flex-direction: column; align-items: stretch; }
  .btn-repetir { width: 100%; }
}