/* =========================================================
   Extranet Gabriela Degan Jewelry
   Tipografia alinhada ao site oficial (tema Shopify Horizon):
   Jost 400 · corpo 0.875rem (14px) · line-height 1.6 · ls normal
   Cores: #000 texto · #A9A9A9 menu inativo · #132439 logo
   ========================================================= */

:root {
    /* Igual ao site oficial (Horizon): Jost em primeiro lugar */
    --fonte: 'Jost', 'Futura', 'Futura PT', 'Century Gothic', 'Segoe UI', Arial, sans-serif;
    --fonte-logo: 'Cormorant Garamond', Garamond, 'Georgia', 'Times New Roman', serif;
    --navy: #132439;
    --cinza-menu: #A9A9A9;
    --erro: #b3261e;
}

* { box-sizing: border-box; }

html { font-size: 100%; }

html, body {
    margin: 0;
    padding: 0;
    background: #fff;
    color: #000;
    font-family: var(--fonte);
    line-height: 1.6;
    letter-spacing: normal;
    font-weight: 400;
}

/* Corpo 0.875rem (14px) como o parágrafo do site oficial */
body { font-size: 0.875rem; }

/* Página ocupa exatamente a altura da janela (sem scroll desnecessário):
   header + conteúdo (flex:1) + rodapé */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: .7; }

/* ---------- Header ---------- */

/* Grid de 3 colunas (1fr | auto | 1fr): o logo fica SEMPRE centralizado,
   independente da largura dos lados. Hambúrguer só aparece no mobile. */
.site-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 28px clamp(16px, 3.34vw, 48px);
}

.hamburger {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: 50px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    /* Desktop: sem hambúrguer e sem ocupar espaço (só no mobile) */
    display: none;
}

.hamburger span {
    display: block;
    width: 50px;
    height: 4px;
    background: #000;
}

.logo { grid-column: 2; grid-row: 1; justify-self: center; line-height: 0; }

.logo:hover { opacity: 1; }

/* Logo oficial (SVG do site principal). +10% sobre os 240px originais = 264px. */
.logo-img {
    width: 264px;
    max-width: 100%;
    height: auto;
    display: block;
}

.header-right {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 22px;
}

.header-icon svg {
    width: 22px;
    height: 22px;
    display: block;
    color: #000;
}

/* Seletor de idioma (globo + código, ex.: PT-BR) */
.seletor-idioma {
    display: flex;
    align-items: center;
    gap: 6px;
}

.seletor-idioma-codigo { font-size: 0.75rem; }

.header-area {
    font-size: 0.875rem;
    line-height: 1.6;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ---------- Estrutura da página ---------- */

.page-shell {
    display: flex;
    flex: 1;
    /* Tudo fluido (sem medidas fixas): as proporções do Figma (canvas 1440 —
       menu 208px em x=36, conteúdo em x=380) são convertidas em vw e escalam
       com a tela, com limites mínimo/máximo para não colapsar nem exagerar. */
    padding: 40px clamp(16px, 3.34vw, 48px) 40px clamp(16px, 2.5vw, 36px);
    gap: clamp(28px, 9.44vw, 136px);
}

.side-menu { width: clamp(150px, 14.45vw, 208px); flex-shrink: 0; }

.menu-nome-cliente {
    margin: 0 0 16px;
    font-size: 0.875rem;
    text-transform: uppercase;
    color: #000;
}

.menu-cliente {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-cliente a {
    display: block;
    font-size: 0.875rem;
    line-height: 1.6;
    padding: 4px 0;
    color: var(--cinza-menu);
    text-transform: uppercase;
}

.menu-cliente a.ativo { color: #000; }

.menu-sair { margin-top: 28px; }

.menu-sair a { font-size: 0.75rem; }

.content { flex: 1; max-width: 1084px; }

/* Páginas sem menu lateral (login, esqueci a senha): conteúdo centralizado */
.page-shell-solo { padding-left: 48px; }
.page-shell-solo .content { margin: 0 auto; }

.saudacao { margin: 0 0 25px; }

.nota-fase {
    margin-top: 50px;
    color: var(--cinza-menu);
    font-size: 0.875rem;
}

.flash { color: #1a7f37; }

/* Nas telas sem menu (login, esqueci a senha) o conteúdo é centrado, então a
   mensagem também precisa ser — nas telas internas ela segue alinhada à esquerda,
   acompanhando os formulários. */
.page-shell-solo .flash {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.erro { color: var(--erro); display: block; font-size: 0.875rem; }

/* O MVC sempre emite o resumo de validação, marcando-o como "valid" (vazio) quando
   não há erro. Ele traz display:none próprio, mas o .erro acima o sobrescrevia — daí
   o marcador de lista solto que aparecia acima do formulário. */
.validation-summary-valid { display: none !important; }

/* Resumo de erros: sem marcador de lista, acompanhando o alinhamento da tela. */
.validation-summary-errors ul { list-style: none; margin: 0; padding: 0; }

/* ---------- Campos e botões (Figma: 372×33, borda 1px preta) ---------- */

.campo {
    display: block;
    width: 100%;
    max-width: 946px;
    height: 33px;
    padding: 2px 10px;
    margin-bottom: 30px;
    background: #fff;
    border: 1px solid #000;
    font-family: var(--fonte);
    font-size: 0.875rem;
    letter-spacing: normal;
    color: #000;
    border-radius: 0;
}

/* Placeholder como dica (cinza), para distinguir campo vazio de campo preenchido */
.campo::placeholder { color: #9a9a9a; text-transform: none; opacity: 1; }

/* Campo bloqueado (antes de "Alterar"): fundo levemente cinza indica que está travado.
   Ao clicar em "Alterar" o readonly é removido e o campo fica branco/editável. */
.campo[readonly] { background: #f5f5f5; cursor: default; }
.campo[readonly]::placeholder { color: #b0b0b0; }

.campo:focus { outline: 2px solid var(--navy); outline-offset: 1px; }

.btn-send,
.btn-acao {
    display: inline-block;
    height: 33px;
    padding: 0 28px;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    font-family: var(--fonte);
    font-size: 0.875rem;
    letter-spacing: normal;
    cursor: pointer;
    border-radius: 0;
}

.btn-acao { text-transform: none; }

.btn-acao[disabled] { opacity: .4; cursor: default; }

.btn-send:hover, .btn-acao:not([disabled]):hover { opacity: .8; }

.acoes { display: flex; gap: 14px; }

/* ---------- Login ---------- */

.login-box {
    max-width: 464px;
    margin: 12vh auto 40px;
    text-align: center;
}

.campo-central { text-align: center; max-width: none; }

.btn-bloco { display: block; width: 100%; margin-top: 12px; }

/* Usado como <a> e como <button> (recuperar senha reenvia o formulário do login),
   por isso o reset de estilo de botão — os dois precisam ficar idênticos. */
.link-discreto {
    display: inline-block;
    margin-top: 28px;
    font-size: 0.875rem;
    color: var(--cinza-menu);
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}

.texto-central { text-align: center; margin-bottom: 30px; }

/* ---------- Dados pessoais ---------- */

.form-dados { max-width: 946px; }

/* Endereço estruturado: campos curtos agrupados em linha */
.form-linha { display: flex; gap: 22px; }

.form-linha .campo { flex: 1; min-width: 0; }

.campo-cep { max-width: 240px; }
.form-linha .campo-numero { flex: 0 0 160px; }
.form-linha .campo-uf { flex: 0 0 100px; text-transform: uppercase; }
.form-linha .campo-pais { flex: 0 0 240px; }

@media (max-width: 760px) {
    .form-linha { flex-direction: column; gap: 0; }
    .form-linha .campo-numero, .form-linha .campo-uf, .form-linha .campo-pais { flex: initial; }
}

/* ---------- Compras ---------- */

/* Foto do produto à esquerda (borda arredondada) + texto à direita, alinhados ao centro */
.compra-bloco {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 0 28px;
}

.compra-foto {
    flex: 0 0 90px;
    width: 90px;
    height: 90px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    background: #f5f5f5;
}

.compra-foto-vazia { display: inline-block; }

.compra-info { flex: 1; min-width: 0; }

.compra-bloco p { margin: 0; }

.compra-titulo {
    display: inline-block;
    margin: 0 0 4px;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: normal;
    text-decoration: underline;
    text-underline-offset: 5px;
}

/* Mensagem quando não há registros (consignados, ordens de serviço, compras) */
.sem-registros {
    margin: 25px 0;
    color: #555;
}

/* ---------- Consignados ---------- */

/* Termo de consignação: bloco centralizado, compacto e responsivo
   (usa toda a largura disponível para ocupar menos linhas) */
.termo-consignacao {
    width: 100%;
    margin: 0 auto 30px;     /* dentro da coluna de conteúdo: o menu não desce */
    font-size: 0.875rem;
    line-height: 1.55;
}

.termo-titulo {
    margin: 0 0 16px;
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.termo-consignacao p { margin: 0 0 10px; }

.termo-lista {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.termo-lista li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 5px;
}

.termo-lista li::before {
    content: "•";
    position: absolute;
    left: 0;
}

/* Variante numerada (1., 2., ...) do termo */
.termo-lista-numerada {
    list-style: decimal;
    margin: 0 0 12px;
    padding-left: 20px;
}

.termo-lista-numerada li {
    position: static;
    padding-left: 0;
    margin-bottom: 5px;
}

.termo-lista-numerada li::before { content: none; }

.termo-subtitulo {
    margin: 14px 0 8px;
    font-size: 0.875rem;
    font-weight: 700;
}

.termo-campo { margin: 0 0 6px; }

.termo-fechamento { margin-top: 24px; }

.termo-nota {
    margin-top: 14px;
    color: #555;
    font-style: italic;
}

@media (max-width: 760px) {
    .termo-consignacao { font-size: 0.8125rem; }
    .termo-titulo { font-size: 0.9375rem; }
}

.consignado-grupo { margin: 0 0 34px; }

.consignado-total { margin: 0 0 14px; }

/* ---------- Aros ---------- */

.aros-lista { margin: 25px 0; }

.aro-item { margin: 0 0 4px; }

/* ---------- Rodapé ---------- */

/* Duas colunas de links centralizadas na página, texto centralizado.
   O copyright ocupa uma linha própria embaixo, alinhado à esquerda. */
.site-footer {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(30px, 6.25vw, 90px);
    padding: 24px clamp(16px, 2.5vw, 36px);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    text-align: center;
}

.footer-links a {
    font-size: 0.875rem;
    line-height: 1.6;
    text-transform: uppercase;
}

/* Discreto, no canto inferior direito, sem empurrar o layout para baixo */
.footer-copyright {
    position: absolute;
    right: 36px;
    bottom: 24px;
    margin: 0;
    font-size: 0.75rem;
    color: #777;
}

/* ---------- Responsivo ---------- */

@media (max-width: 1100px) {
    .site-footer { flex-wrap: wrap; }
}

@media (max-width: 760px) {
    /* Mobile: tudo em UMA linha — hambúrguer (menor) à esquerda, logo centralizado
       e maior, ícones de ação à direita sem quebrar linha. O texto "ÁREA DO SITE"
       é ocultado para sobrar espaço. */
    .site-header { padding: 16px 12px; }
    .hamburger { display: flex; width: 26px; height: 15px; }
    .hamburger span { width: 26px; height: 2.5px; }
    .logo-img { width: min(213px, 46vw); } /* +10% sobre 194 ≈ 213, encolhe em telas muito estreitas */
    .header-right { gap: 10px; flex-wrap: nowrap; }
    .header-area { display: none; } /* remove "ÁREA DO SITE" no mobile */

    .page-shell { flex-direction: column; padding: 30px 20px 60px; gap: 30px; }
    /* Menu do cliente escondido por padrão no mobile; abre ao tocar no hambúrguer */
    .side-menu { width: auto; display: none; }
    .side-menu.aberto { display: block; }
    .site-footer { padding: 30px 20px 50px; gap: 30px; }
    /* No mobile o copyright é ocultado (evita espaçamento extra no rodapé) */
    .footer-copyright { display: none; }
    .login-box { margin: 60px auto 80px; }
}