/* ---------- entrar / criar conta ---------- */
.auth { padding: 40px 0 72px; }
.auth-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 48px; align-items: center; max-width: 1000px; }
.auth-art { position: relative; overflow: hidden; isolation: isolate; background: var(--grad-bordo); color: #FFF4E4; border-radius: 32px; padding: 44px 38px; box-shadow: var(--shadow); }
.auth-art::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('/images/patterns/hero-pattern.svg') repeat center / 96px; opacity: .05; }
.auth-art img { width: 120px; height: 120px; border-radius: 50%; margin-bottom: 18px; box-shadow: 0 0 0 6px rgba(247, 162, 27, .25); }
.auth-art h2 { color: #FFF8EE; font-size: 1.9rem; margin: 0 0 18px; }
.auth-art ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.auth-art li { display: flex; align-items: center; gap: 12px; font-weight: 600; color: rgba(255, 238, 215, .9); }
.auth-art li svg { flex-shrink: 0; width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: rgba(247, 162, 27, .18); color: var(--laranja); }

.auth-card { background: #fff; border-radius: 28px; padding: 30px; box-shadow: var(--shadow); border: 1px solid var(--linha); }
.auth-card h1 { font-size: 1.7rem; color: var(--bordo); margin: 22px 0 4px; }
.auth-sub { color: var(--texto-suave); margin: 0 0 22px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: var(--fundo); border: 1px solid var(--linha); }
.auth-tabs a { text-align: center; padding: 10px 8px; border-radius: 999px; font-weight: 800; font-size: .92rem; color: var(--texto-suave); text-decoration: none; transition: background .2s, color .2s; }
.auth-tabs a.is-active { background: #fff; color: var(--bordo); box-shadow: var(--shadow-xs); }
.auth-form { display: grid; gap: 16px; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--texto-suave); font-size: .82rem; font-weight: 600; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--linha-forte); }
.auth-error { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; background: #FBEAE7; color: var(--vermelho); font-weight: 700; font-size: .9rem; }
.auth-error svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.auth-foot { margin: 18px 0 0; text-align: center; font-size: .86rem; color: var(--texto-suave); }
.auth-foot a { color: var(--bordo); font-weight: 700; }
.field.has-error input { border-color: var(--vermelho); }
.field-err { color: var(--vermelho) !important; font-weight: 700 !important; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 48px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: none; color: var(--texto-suave); border-radius: 10px; display: grid; place-items: center; }
.pw-toggle svg { width: 18px; height: 18px; }

/* Botão do Google: padrão oficial (tema claro) */
.gsi-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; padding: 0 12px; background: #fff; border: 1px solid #747775; border-radius: 999px; color: #1F1F1F; font-family: 'Roboto', Arial, sans-serif; font-weight: 500; font-size: 14px; line-height: 20px; letter-spacing: .25px; text-decoration: none; transition: background .2s, box-shadow .2s; }
.gsi-btn:hover { background: #F8F9FA; box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); }
.gsi-btn:focus-visible { outline: 2px solid #0B57D0; outline-offset: 2px; }
.gsi-icon { display: grid; place-items: center; width: 20px; height: 20px; }

/* ---------- minha conta ---------- */
.acc-band { position: relative; overflow: hidden; isolation: isolate; background: var(--grad-bordo); color: #FFF4E4; padding: 32px 0 0; border-radius: 0 0 32px 32px; }
.acc-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('/images/patterns/hero-pattern.svg') repeat center / 96px; opacity: .045; }
.acc-hello { display: flex; align-items: center; gap: 16px; }
.acc-hello h1 { color: #FFF8EE; font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 2px 0; }
.acc-hello p { margin: 0; color: rgba(255, 238, 215, .75); font-size: .9rem; word-break: break-all; }
.acc-hello > div { flex: 1; min-width: 0; }
.acc-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--laranja); }
.acc-avatar { flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--grad-sol); color: var(--bordo-noite); font-weight: 800; font-size: 1.4rem; box-shadow: 0 0 0 4px rgba(255, 255, 255, .15); }
.btn-ghost-light { background: rgba(255, 255, 255, .1); color: #FFF4E4; border: 1px solid rgba(255, 238, 215, .25); }
.btn-ghost-light:hover { background: rgba(255, 255, 255, .18); }
.acc-tabs { display: flex; gap: 6px; margin-top: 26px; overflow-x: auto; scrollbar-width: none; padding-bottom: 0; }
.acc-tabs::-webkit-scrollbar { display: none; }
.acc-tabs a { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px 14px; border-radius: 16px 16px 0 0; color: rgba(255, 238, 215, .8); font-weight: 700; font-size: .92rem; text-decoration: none; transition: background .2s, color .2s; }
.acc-tabs a svg { width: 18px; height: 18px; }
.acc-tabs a b { font-size: .72rem; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--laranja); color: var(--bordo-noite); display: inline-grid; place-items: center; }
.acc-tabs a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.acc-tabs a.is-active { background: var(--fundo); color: var(--bordo); }

.acc-body { padding-top: 28px; padding-bottom: 72px; display: grid; gap: 22px; }
.acc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.acc-stat { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: #fff; border-radius: 20px; box-shadow: var(--shadow-xs); border: 1px solid var(--linha); text-decoration: none; color: var(--texto); transition: transform .25s var(--ease), box-shadow .25s; }
.acc-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.acc-stat svg { width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: var(--laranja-suave); color: var(--bordo); margin-bottom: 6px; }
.acc-stat span { font-size: .8rem; color: var(--texto-suave); font-weight: 600; }
.acc-stat strong { font-size: 1rem; }

.acc-panel { background: #fff; border-radius: 24px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--linha); min-width: 0; }
.acc-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.acc-panel-head h2 { margin: 0; font-size: 1.35rem; color: var(--bordo); }
.acc-panel-head a { font-weight: 700; font-size: .88rem; color: var(--bordo); }
.acc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.acc-orders { display: grid; gap: 10px; }
.acc-order { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 18px; background: var(--fundo); text-decoration: none; color: var(--texto); border: 1px solid transparent; transition: border-color .2s, background .2s; }
.acc-order:hover { border-color: var(--linha-forte); background: #fff; }
.acc-order-thumbs { display: flex; flex-shrink: 0; }
.acc-order-thumbs img, .acc-order-thumbs .acc-noimg, .acc-more { width: 46px; height: 58px; border-radius: 10px; object-fit: cover; border: 2px solid #fff; margin-left: -14px; background: #EFE5D6; }
.acc-order-thumbs > :first-child { margin-left: 0; }
.acc-more { display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: var(--bordo); }
.acc-noimg { display: grid; place-items: center; color: var(--texto-suave); }
.acc-order-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.acc-order-info > span { font-size: .82rem; color: var(--texto-suave); }
.acc-order-total { display: flex; align-items: center; gap: 4px; font-size: .96rem; }
.acc-order-total svg { width: 18px; height: 18px; color: var(--texto-suave); }
.acc-status { align-self: flex-start; font-size: .74rem !important; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.acc-ok { background: #EFF5E8; color: #3D5F22 !important; }
.acc-info { background: #E8F0FB; color: #1E4F8A !important; }
.acc-warn { background: #FBF3E2; color: #8A5A0F !important; }
.acc-muted { background: #F1ECE6; color: var(--texto-suave) !important; }

.acc-empty { text-align: center; padding: 26px 10px 10px; color: var(--texto-suave); }
.acc-empty > svg { width: 42px; height: 42px; color: var(--laranja); margin: 0 auto 6px; }

.acc-cart { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.acc-cart li { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 16px; background: var(--fundo); }
.acc-cart img, .acc-cart .acc-noimg { width: 56px; height: 70px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: #EFE5D6; }
.acc-cart li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .86rem; color: var(--texto-suave); }
.acc-cart li > div a { color: var(--texto); text-decoration: none; }
.acc-cart-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--linha-forte); }
.acc-cart-foot strong { font-size: 1.2rem; color: var(--bordo); margin-left: 6px; }

.acc-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.acc-form { display: grid; gap: 14px; }
.acc-form .btn { justify-self: start; }
.acc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acc-row-city { grid-template-columns: 1fr 90px; }
.acc-row-cep { grid-template-columns: minmax(0, 200px); }
.field input:disabled { background: var(--fundo); color: var(--texto-suave); }
.acc-hint { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: .84rem; color: var(--texto-suave); }
.acc-hint svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; color: var(--verde); }
.acc-since { text-align: center; color: var(--texto-suave); font-size: .84rem; margin: 0; }

@media (max-width: 960px) {
  .acc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acc-two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .auth { padding: 20px 0 56px; }
  .auth-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .auth-art { display: none; }
  .auth-card { padding: 22px 18px; border-radius: 24px; }
  .acc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .acc-band { padding-top: 22px; border-radius: 0 0 24px 24px; }
  .acc-hello { flex-wrap: wrap; }
  .acc-avatar { width: 52px; height: 52px; font-size: 1.15rem; }
  .acc-logout { position: absolute; top: 18px; right: var(--gutter); }
  .acc-logout .btn { padding: .5em .9em; }
  .acc-tabs { margin: 18px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); }
  .acc-tabs a { padding: 10px 13px 12px; font-size: .86rem; }
  .acc-panel { padding: 18px 14px; border-radius: 20px; }
  .acc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .acc-order { gap: 10px; padding: 10px; }
  .acc-order-thumbs img, .acc-order-thumbs .acc-noimg, .acc-more { width: 40px; height: 50px; }
  .acc-cart-foot .btn { width: 100%; }
}
@media (max-width: 420px) {
  .acc-row { grid-template-columns: minmax(0, 1fr); }
  .acc-row-city { grid-template-columns: minmax(0, 1fr) 80px; }
  .acc-order-thumbs > :nth-child(n + 2) { display: none; }
}
.auth-admin-note { display: flex; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #E8F0FB; color: #1E4F8A; font-size: .8rem; font-weight: 600; }
.auth-admin-note svg { flex-shrink: 0; width: 16px; height: 16px; }
@media (max-width: 860px) { .wa-float { display: none; } }

.auth-guest { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; padding: 14px 16px; border-radius: 16px; background: var(--grad-sol); color: var(--bordo-noite); text-decoration: none; box-shadow: 0 10px 24px -10px rgba(247, 162, 27, .8); }
.auth-guest > svg { flex-shrink: 0; width: 22px; height: 22px; }
.auth-guest span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.auth-guest strong { font-size: 1rem; }
.auth-guest small { font-size: .8rem; opacity: .85; font-weight: 600; }