/* ============================================================
   UAI. — Área do Cliente (Meus Pedidos / Meus Orçamentos / Meus
   Dados) e Detalhe do Pedido. Mesmo sistema visual da landing:
   preto fosco, branco-papel, tipografia mono para labels, display
   italic para títulos.
   ============================================================ */

.pedidos-shell{
  min-height:100vh;
  padding:clamp(100px,14vw,140px) var(--edge) 80px;
}

/* ---------- Nav simplificada (logado) ---------- */
.nav-simple .nav-cta{ gap:18px; }
.nav-simple .nav-greeting{ margin-right:4px; }

/* ---------- Cabeçalho ---------- */
.pedidos-header{ max-width:var(--container); margin:0 auto 40px; }
.pedidos-header h1{ font-size:clamp(36px,6vw,56px); margin-top:8px; }
.pedidos-sub{ color:var(--grey-on-black); margin-top:10px; font-size:15px; }

/* ---------- Estados (loading / vazio / erro) ---------- */
.pedidos-state{
  max-width:var(--container); margin:0 auto;
  padding:32px; text-align:center;
  border:1px solid var(--line-on-black); border-radius:8px;
  color:var(--grey-on-black); font-size:14px;
}

/* ---------- Grid de cards ---------- */
.pedidos-grid{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
  gap:20px;
}

.pedido-card{
  display:flex; flex-direction:column; gap:16px;
  background:var(--black-2);
  border:1px solid var(--line-on-black-strong);
  border-radius:10px;
  padding:24px;
  transition:transform .2s ease, border-color .2s ease;
}
.pedido-card:hover{ transform:translateY(-3px); border-color:var(--line-on-black-strong); }

.pedido-card-top{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.pedido-numero{
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em;
  color:var(--grey-on-black);
}

.status-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em;
  text-transform:uppercase;
  padding:6px 12px; border-radius:999px;
  border:1px solid var(--line-on-black-strong);
  color:var(--on-black);
  white-space:nowrap;
}
.status-badge.is-current{
  background:var(--on-black); color:var(--black); border-color:var(--on-black);
  font-weight:600;
}

.tags-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }

.pedido-produto{
  font-family:var(--font-body); font-style:normal; text-transform:none;
  font-weight:600; font-size:17px; line-height:1.35; margin:0;
  letter-spacing:0;
}

.pedido-meta{
  display:flex; gap:24px; margin:0; flex-wrap:wrap;
}
.pedido-meta > div{ display:flex; flex-direction:column; gap:4px; }
.pedido-meta dt{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--grey-on-black);
}
.pedido-meta dd{ margin:0; font-size:14px; color:var(--on-black); }

.pedido-card .btn{ align-self:flex-start; margin-top:auto; padding:12px 22px; font-size:12px; }

/* ---------- Página de detalhe ---------- */
.pedido-detalhe{ max-width:820px; margin:0 auto; }

.back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.08em;
  text-transform:uppercase; text-decoration:none; color:var(--grey-on-black);
  margin-bottom:28px; transition:color .18s ease;
}
.back-link:hover{ color:var(--on-black); }

.pedido-detalhe-header h1{
  font-size:clamp(30px,5vw,46px); margin-top:8px;
}

.pedido-detalhe-meta{
  display:flex; gap:32px; flex-wrap:wrap; margin-top:20px;
  padding-top:20px; border-top:1px solid var(--line-on-black);
}
.pedido-detalhe-meta .label{
  display:block; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--grey-on-black);
  margin-bottom:4px;
}
.pedido-detalhe-meta .value{ font-size:15px; color:var(--on-black); }

/* ---------- Card de status atual ---------- */
.status-atual-card{
  margin-top:36px;
  background:var(--black-2);
  border:1px solid var(--line-on-black-strong);
  border-radius:10px;
  padding:28px;
}
.status-atual-top{ display:flex; align-items:center; gap:16px; }
.status-atual-emoji{ font-size:36px; line-height:1; flex:none; }
.status-atual-top h2{
  font-size:clamp(22px,4vw,30px); margin-top:2px;
}
.status-descricao{
  margin:18px 0 0; color:var(--grey-on-black); font-size:15px; line-height:1.6;
}
.status-atual-footer{
  display:flex; gap:32px; flex-wrap:wrap;
  margin-top:20px; padding-top:20px; border-top:1px solid var(--line-on-black);
}
.status-atual-footer .label{
  display:block; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--grey-on-black);
  margin-bottom:4px;
}
.status-atual-footer .value{ font-size:15px; color:var(--on-black); }

.rastreio-box{
  display:flex; gap:32px; flex-wrap:wrap;
  margin-top:20px; padding:18px 20px;
  background:rgba(244,242,236,0.05);
  border:1px solid var(--line-on-black-strong);
  border-radius:8px;
}
.rastreio-box .label{
  display:block; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--grey-on-black);
  margin-bottom:4px;
}
.rastreio-box .value{ font-size:15px; color:var(--on-black); font-weight:600; }

/* ---------- Timeline ---------- */
.timeline-section{ margin-top:48px; }

.pedido-specs-section{ margin-top:40px; }
.timeline-section > .eyebrow{ color:var(--grey-on-black); }

.timeline{
  list-style:none; margin:24px 0 0; padding:0;
  position:relative;
}
.timeline-step{
  position:relative;
  display:flex; align-items:flex-start; gap:16px;
  padding-bottom:28px;
  padding-left:2px;
}
.timeline-step:last-child{ padding-bottom:0; }

.timeline-step::before{
  content:"";
  position:absolute; left:15px; top:32px; bottom:0;
  width:1px; background:var(--line-on-black-strong);
}
.timeline-step:last-child::before{ display:none; }

.timeline-marker{
  flex:none; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; z-index:1;
  border:1px solid var(--line-on-black-strong);
  background:var(--black);
  color:var(--grey-on-black);
}
.timeline-step.is-concluido .timeline-marker{
  background:var(--on-black); border-color:var(--on-black); color:var(--black);
  font-weight:700;
}
.timeline-step.is-concluido::before{ background:var(--on-black); opacity:.5; }
.timeline-step.is-atual .timeline-marker{
  background:transparent; border-color:var(--on-black); color:var(--on-black);
  box-shadow:0 0 0 3px rgba(244,242,236,0.12);
}

.timeline-nome{
  font-family:var(--font-mono); font-size:13.5px; letter-spacing:0.04em;
  color:var(--grey-on-black); padding-top:6px;
}
.timeline-step.is-concluido .timeline-nome{ color:var(--on-black); }
.timeline-step.is-atual .timeline-nome{ color:var(--on-black); font-weight:600; }

@media (max-width:640px){
  .pedidos-grid{ grid-template-columns:1fr; }
  .pedido-meta, .pedido-detalhe-meta, .status-atual-footer, .rastreio-box{ gap:18px; }
}

/* ---------- Área do Cliente: layout com menu lateral ---------- */
.area-cliente-layout{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:220px 1fr; gap:48px; align-items:start;
}

.area-sidebar{ position:sticky; top:110px; }
.area-sidebar-header{ margin-bottom:24px; }
.area-sidebar-header .eyebrow{ color:var(--grey-on-black); }
.area-sidebar-header p{ margin-top:6px; font-size:14px; color:var(--on-black); font-weight:600; }

.area-menu{ display:flex; flex-direction:column; gap:4px; list-style:none; margin:0; padding:0; }
.area-menu-item{
  display:block; width:100%; text-align:left;
  background:transparent; border:none; border-left:2px solid transparent;
  padding:12px 16px; border-radius:4px;
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.04em;
  color:var(--grey-on-black); cursor:pointer;
  transition:color .18s ease, background .18s ease, border-color .18s ease;
}
.area-menu-item:hover{ color:var(--on-black); background:rgba(244,242,236,0.04); }
.area-menu-item.active{
  color:var(--on-black); border-left-color:var(--on-black);
  background:rgba(244,242,236,0.06); font-weight:600;
}

.area-content{ min-width:0; }
.area-section-title{ margin-bottom:28px; }
.area-section-title h1{ font-size:clamp(30px,5vw,46px); margin-top:8px; }
.area-section-title p{ color:var(--grey-on-black); margin-top:10px; font-size:15px; }

.dados-card{
  display:flex; flex-direction:column; gap:20px;
  max-width:480px; background:var(--black-2);
  border:1px solid var(--line-on-black-strong); border-radius:10px; padding:28px;
}
.dados-field{ display:flex; flex-direction:column; gap:4px; }
.dados-field .label{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--grey-on-black);
}
.dados-field .value{ font-size:16px; color:var(--on-black); }

.orcamentos-cta{ margin-top:20px; }

/* ---------- Meus Endereços ---------- */
.enderecos-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
  gap:20px; margin-bottom:24px;
}
.endereco-card{
  display:flex; flex-direction:column; gap:12px;
  background:var(--black-2); border:1px solid var(--line-on-black-strong);
  border-radius:10px; padding:22px;
}
.endereco-card-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.endereco-apelido{ font-size:16px; font-weight:600; color:var(--on-black); }
.endereco-linhas{ font-size:14px; color:var(--grey-on-black); line-height:1.6; }
.endereco-remover{
  background:none; border:none; padding:0; align-self:flex-start;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--grey-on-black); text-decoration:underline; cursor:pointer;
}
.endereco-remover:hover{ color:#FF4336; }

#novoEnderecoBtn{ margin-bottom:24px; }

.endereco-form{
  display:flex; flex-direction:column; gap:20px;
  max-width:480px; background:var(--black-2);
  border:1px solid var(--line-on-black-strong); border-radius:10px; padding:28px;
}
.endereco-form .form-group{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.endereco-form label{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--grey-on-black); font-weight:500;
}
.endereco-form input[type="text"]{
  padding:12px 16px; background:var(--black); border:1px solid var(--line-on-black-strong);
  border-radius:4px; color:var(--on-black); font-family:var(--font-body); font-size:16px; outline:none;
}
.endereco-form input[type="text"]:focus{
  border-color:var(--on-black); box-shadow:0 0 0 3px rgba(244,242,236,0.1);
}
.endereco-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.endereco-form-uf input{ text-transform:uppercase; }
.endereco-form-checkbox{
  display:flex; align-items:center; gap:10px;
  font-size:14px; color:var(--grey-on-black); cursor:pointer;
}
.endereco-form-actions{ display:flex; gap:12px; }
.endereco-form-actions .btn{ flex:1; justify-content:center; padding:12px 20px; font-size:12px; }

@media (max-width:860px){
  .area-cliente-layout{ grid-template-columns:1fr; gap:28px; }
  .area-sidebar, .area-content{ min-width:0; }
  .area-sidebar{ position:static; }
  .area-menu{ flex-direction:row; overflow-x:auto; gap:8px; padding-bottom:4px; }
  .area-menu-item{ border-left:none; border-bottom:2px solid transparent; white-space:nowrap; }
  .area-menu-item.active{ border-left-color:transparent; border-bottom-color:var(--on-black); }
}