/* =====================================================================
   Hortifruti Mercato — telas do cliente fora da vitrine
   (index.php/login, finalizar.php, pedidos.php, detalhes_pedido.php,
   status.php, meus_dados.php).

   Carregado DEPOIS do <style> de cada tela e do theme.css + loja.css, via
   _topo_cliente.php. As telas continuam com o HTML e o JS delas; aqui só
   se troca a "roupa" pra ficar igual à vitrine (cardápio da Juliana em verde):
   topo branco com logo, cartões brancos arredondados, filete verde nos
   títulos, botões em gradiente e o fundo de rabiscos de hortifruti.
   ===================================================================== */

/* As telas usam estas variáveis nas cores delas: apontá-las pra paleta nova
   já recolore quase tudo (seleção de opção, preços, status, bordas). */
:root{
  --primary-color:#17703A;
  --primary-dark:#145A32;
  --primary-light:#1F8A4C;
  --green:#17703A;
  --green-dark:#145A32;
}

body.page-interna{
  background:var(--cream) !important;
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif !important;
  padding-bottom:0 !important;
  min-height:100vh;
}

/* Topo antigo (barra verde / "Voltar") e barra de navegação de baixo saem:
   o topo novo tem voltar, Pedidos e o menu. */
.page-interna > .header,
.page-interna .bottom-nav{display:none !important}
/* Carrinho em janela nas telas de conta: sem a barra de baixo ninguém abre, e em
   meus_dados.php ele aparecia solto no rodapé ("Carrinho ×"). */
.page-interna #cart-modal{display:none !important}

/* Seta de voltar à esquerda da logo. */
.topo-voltar{
  width:36px;height:36px;flex:0 0 36px;border-radius:10px;display:grid;place-items:center;
  color:var(--ink);text-decoration:none;font-size:20px;
}
.topo-voltar:hover{background:var(--cream-2);color:var(--vinho)}
.page-interna .app-header .logo{border-radius:50%;background:#fff}
@media(max-width:899px){
  .page-interna .app-header .bar{gap:8px}
  .page-interna .topo-titulo{flex:1}
}

/* Miolo com a mesma largura das telas internas da Juliana. */
.page-interna > .container,
.page-interna .container{
  max-width:760px !important;margin:0 auto !important;padding:18px 14px 24px !important;
  background:transparent !important;
}
.page-interna .app-footer{max-width:760px;margin:8px auto 24px}
@media(max-width:560px){.page-interna .app-footer{margin:8px 14px 24px}}

/* ---------- cartões ---------- */
.page-interna .card{
  background:#fff !important;border:1px solid #e5e7eb !important;border-radius:16px !important;
  box-shadow:0 1px 3px rgba(16,24,40,.08) !important;overflow:hidden;margin-bottom:16px !important;
}
.page-interna .card-header{
  background:#fff !important;color:var(--ink) !important;
  border-bottom:1px solid #f2f4f7 !important;padding:14px 16px !important;
  display:flex;align-items:center;gap:12px;
}
.page-interna .card-header-icon{
  width:38px !important;height:38px !important;flex:0 0 38px;border-radius:50% !important;
  background:var(--cream-2) !important;color:var(--vinho) !important;
  display:grid !important;place-items:center;font-size:16px !important;box-shadow:none !important;
}
.page-interna .card-header-icon i{color:var(--vinho) !important}
.page-interna .card-title{
  margin:0 !important;font-size:17px !important;font-weight:700 !important;color:var(--ink) !important;
  padding-left:10px;border-left:4px solid var(--laranja);line-height:1.25;
}
.page-interna .card-body{padding:16px !important;background:#fff !important}

/* Blocos de informação (status, data, pagamento, entrega...). */
.page-interna .info-item,
.page-interna .detail-item{
  background:#F9FAFB !important;border:1px solid #f2f4f7 !important;border-radius:12px !important;
  box-shadow:none !important;
}
.page-interna .info-label,
.page-interna .detail-label{color:var(--ink-2) !important;font-size:11.5px !important;letter-spacing:.4px}
.page-interna .info-value,
.page-interna .detail-value{color:var(--ink) !important;font-weight:700 !important}

/* ---------- botões ---------- */
.page-interna .btn-primary,
.page-interna .btn-submit,
.page-interna .btn-checkout,
.page-interna .btn-new-order,
.page-interna .btnPrimary{
  background:var(--btn-grad) !important;color:#fff !important;border:0 !important;
  border-radius:14px !important;font-weight:800 !important;
  box-shadow:0 6px 16px rgba(23,112,58,.22) !important;
}
.page-interna .btn-secondary,
.page-interna .btn-cancel,
.page-interna .btnGhost{
  background:#fff !important;color:var(--ink) !important;border:1px solid #e5e7eb !important;
  border-radius:14px !important;font-weight:700 !important;box-shadow:none !important;
}
.page-interna .btn-secondary:hover,
.page-interna .btn-cancel:hover,
.page-interna .btnGhost:hover{background:var(--cream-2) !important;color:var(--vinho) !important}

/* Selo de status do pedido. */
.page-interna .status-badge{border-radius:999px !important;font-weight:700 !important}

/* ---------- finalizar.php ---------- */
.page-interna .order-item,
.page-interna .address-option,
.page-interna .payment-option,
.page-interna .delivery-option{border-radius:12px !important}
.page-interna .order-total{border-radius:12px !important;border-color:var(--laranja) !important}
.page-interna .order-total-value{color:var(--vinho) !important}
/* A barra de ações fixa embaixo fica branca como a do pedido na vitrine. */
.page-interna .btn-submit{min-height:50px}

/* ---------- pedidos.php ---------- */
.page-interna .order-card{
  background:#fff !important;border:1px solid #e5e7eb !important;border-radius:16px !important;
  box-shadow:0 1px 3px rgba(16,24,40,.08) !important;position:relative;overflow:hidden;
}
.page-interna .order-card:before{
  content:'';position:absolute;left:5px;top:14px;bottom:14px;width:5px;border-radius:999px;background:var(--laranja);
}
.page-interna .order-id{color:var(--ink) !important;font-weight:800 !important}
.page-interna .user-info{display:none !important} /* "Olá, Fulano" já está no menu */
.page-interna h1{font-size:22px !important;font-weight:800 !important;color:var(--ink) !important}

/* ---------- index.php (entrar) ---------- */
/* Mesmo cartão da tela "Entrar com o celular" da Juliana. */
.page-interna.page-login .wrap{min-height:0 !important;padding:18px 14px 0 !important;display:block !important}
.page-interna.page-login .card{
  max-width:460px !important;min-height:0 !important;margin:0 auto !important;
  border-radius:20px !important;box-shadow:0 8px 24px rgba(24,32,27,.10) !important;
}
.page-interna.page-login .top{border-bottom:0 !important;padding:26px 20px 4px !important}
.page-interna.page-login .auth-ic{margin:0 auto 14px}
.page-interna.page-login .pageTitle{font-size:22px !important;font-weight:800 !important;color:var(--ink)}
.page-interna.page-login .subtitle{font-size:15px !important;color:var(--ink-2) !important}
.page-interna.page-login .content{padding:18px 22px 24px !important}
.page-interna.page-login .field label{font-weight:700;font-size:13px;color:var(--ink-2)}
.page-interna.page-login .field input,
.page-interna.page-login .field select,
.page-interna.page-login .field textarea{
  border:1.5px solid #BFE3CB !important;border-radius:12px !important;min-height:50px;font-size:16px !important;
}
.page-interna.page-login .field input:focus,
.page-interna.page-login .field select:focus{border-color:var(--laranja) !important;box-shadow:var(--foco) !important;outline:none}
.page-interna.page-login .btn{border-radius:999px !important;min-height:52px;font-size:16px !important}

/* Títulos como na Juliana: sem CAIXA ALTA (algumas telas forçavam uppercase). */
.page-interna .card-title,
.page-interna .order-id{text-transform:none !important;letter-spacing:0 !important}

/* ---------- escala mais compacta (18/09) ----------
   As telas antigas medem quase tudo em rem, com base de 16px: títulos de 19px,
   valores de 17,6px, botões de 52px — no celular parecia "com zoom". Com base
   14px tudo encolhe por igual e fica perto da vitrine. (O topo e o menu vêm do
   loja.css em px e não mudam.) */
html:has(body.page-interna){font-size:14px}
.page-interna .card-title{font-size:15.5px !important}
.page-interna .card-header-icon{width:34px !important;height:34px !important;flex-basis:34px;font-size:14px !important}
.page-interna.page-login .pageTitle{font-size:20px !important}

/* Nada pode passar da largura da tela: no iPhone um elemento largo demais faz o
   Safari encolher/ampliar a página inteira. */
body.page-interna{overflow-x:hidden}
.page-interna .delivery-content,
.page-interna .delivery-option > div{min-width:0}
/* Campo de data do iOS ignora width:100% com a aparência nativa. */
.page-interna input[type="date"]{
  -webkit-appearance:none;appearance:none;display:block;
  width:100% !important;max-width:100%;min-width:0;min-height:46px;box-sizing:border-box;
  background:#fff;text-align:left;
}
.page-interna input[type="date"]::-webkit-date-and-time-value{text-align:left}

/* ---------- finalizar.php: barra fixa de ações ----------
   Cancelar e Confirmar lado a lado (antes empilhados, a barra ocupava ~1/4 da
   tela), e o fim da página reserva o espaço dela pra observação não ficar
   escondida atrás dos botões. */
.page-finalizar .footer-fixed{padding:10px 14px calc(10px + env(safe-area-inset-bottom)) !important;border-top:1px solid #e5e7eb !important}
.page-finalizar .footer-content{flex-direction:row !important;gap:10px !important;align-items:stretch}
.page-finalizar .footer-content .btn-cancel{flex:0 0 auto !important;width:auto !important;padding:0 18px !important;min-height:50px}
.page-finalizar .footer-content .btn-submit{flex:1 1 auto !important;width:auto !important}
body.page-interna.page-finalizar{padding-bottom:96px !important}