:root{
    /* troque a cor da marca se quiser (#923118 era a sua anterior) */
    --brand: #1f5aa6;
    --ink: #222;
    --muted: #6b7280;
    --line: #e5e7eb;
}

.tab-menu{
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 4px 6px;
    /* border-bottom:1px solid var(--line); */
    overflow-x:auto;
    scroll-snap-type:x mandatory;
}
.tab-menu::-webkit-scrollbar{ display:none; }
.tab-item{
    position:relative;
    list-style:none;
    padding:10px 14px;
    border-radius:10px;
    font-size: 13px;
    color:var(--muted);
    font-weight:600;
    white-space:nowrap;
    cursor:pointer;
    transition:color .2s ease, background-color .2s ease, transform .15s ease;
    scroll-snap-align:start;
    outline: none;
}
.tab-item:hover{ color:var(--brand); background:#f6f8fb; }

/* underline animado */
.tab-item::after{
    content:"";
    position:absolute;
    left:10px; right:10px; bottom:-7px;
    height:3px; border-radius:3px;
    background:var(--brand);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .25s ease;
}

.tab-item.active::after{ transform:scaleX(1); }

/* acessibilidade */
.tab-item:focus-visible{
  box-shadow:0 0 0 3px rgba(31,90,166,.25);
  background:#f6f8fb;
}

/* conteúdo das abas */
.tab-content{ display:none; padding:16px 0; }
.tab-content.active{ display:block; }

/* v4.77.48 — Redesign botões do form de endereço novo.
   Antes: radius oval 20px, margem estranha 44px lateral, padding 8/12.
   Agora: herdam padrão .btn (height var(--touch-target), radius-xl),
   layout profissional e consistente com o resto do app. */
.btn-local,
.btn-address {
    height: var(--touch-target, 44px);
    min-height: var(--touch-target, 44px);
    padding: 0 var(--space-5, 20px);
    border: none;
    border-radius: var(--radius-md, 12px);
    color: #fff;
    font-weight: var(--weight-semibold, 600);
    font-size: var(--font-sm, 13px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    cursor: pointer;
    transition: transform .1s ease, opacity .15s ease;
}
.btn-local {
    width: 100%;
    margin: var(--space-3, 12px) 0;
    background: var(--main-color, #3B82F6);
}
.btn-address {
    flex: 1;
    background: var(--main-color, #3B82F6);
}
.btn-address.btn--secondary,
.btn--secondary.btn-address {
    background: transparent;
    border: 1.5px solid var(--border-default, #e4e4e7);
    color: var(--text-primary, #18181b);
}
.btn-local:active,
.btn-address:active {
    transform: scale(0.98);
    opacity: 0.9;
}

/* Container do form de endereço — v4.77.48 redesenho Apple-ish.
   Antes: H4 solto + #map bruto 200px radius:6px + form em col-12 mb-3
   espaçados sem hierarquia, texto inline small margin-bottom:10px...
   v4.77.54: padding-bottom aumentado pra botões não colarem no
   nav.atalhosApp (57px bottom). */
#new-address {
    padding: var(--space-4, 16px);
    padding-bottom: calc(var(--space-4, 16px) + 80px);
    background: var(--bg-secondary, #fafafa);
    border-radius: var(--radius-md, 12px);
    margin-top: var(--space-3, 12px);
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
}

/* v4.77.54 — Inputs do form de endereço seguem o canônico pharus-field
   (espelha regra em auth.css:1383 mas escopada pro form-entrega). */
#form-entrega .form-control,
#new-address .form-control,
#form-entrega .cep {
    height: var(--touch-target, 48px) !important;
    min-height: var(--touch-target, 48px) !important;
    padding: var(--space-3, 12px) var(--space-4, 16px) !important;
    border: 1px solid var(--border-default, #e4e4e7) !important;
    border-radius: var(--radius-md, 12px) !important;
    background: var(--bg-primary, #fff) !important;
    color: var(--text-primary, #18181b) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    width: 100% !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: border-color 0.15s, background 0.15s;
}
#form-entrega .form-control:focus,
#new-address .form-control:focus {
    border-color: var(--main-color, #3B82F6) !important;
    outline: none !important;
}
#form-entrega .perfil-label,
#new-address .perfil-label {
    display: block;
    font-size: var(--font-sm, 13px);
    font-weight: var(--weight-semibold, 600);
    color: var(--text-primary, #18181b);
    margin-bottom: var(--space-2, 8px);
}
#new-address h4 {
    margin: 0;
    font-size: var(--font-sm, 13px);
    font-weight: var(--weight-semibold, 600);
    color: var(--text-primary, #18181b);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
#new-address #output {
    margin: 0 !important;
    font-size: var(--font-sm, 13px) !important;
    color: var(--text-muted, #71717a) !important;
    font-weight: var(--weight-medium, 500);
}

/* Mapa: radius maior, shadow sutil, sem margin-top negativa */
#map {
    height: 220px;
    width: 100%;
    border-radius: var(--radius-md, 12px);
    margin: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    background: var(--bg-primary, #fff);
}

/* Form #form-entrega: inputs com espaçamento consistente */
#form-entrega {
    margin: 0 !important;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
}
#form-entrega > .col-12,
#form-entrega > .col-9,
#form-entrega > .col-3 {
    margin: 0 !important;
    padding: 0 !important;
}
#form-entrega > .col-9 { flex: 0 0 calc(75% - var(--space-2, 8px)); max-width: calc(75% - var(--space-2, 8px)); }
#form-entrega > .col-3 { flex: 0 0 calc(25% - var(--space-2, 8px)); max-width: calc(25% - var(--space-2, 8px)); }
#form-entrega .perfil-label {
    margin-bottom: var(--space-1, 4px);
}
#form-entrega .d-flex.justify-content-between {
    flex: 1 1 100%;
    margin-top: var(--space-2, 8px);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ════════════════════════════════════════════════════════════
   .opcao-pagamento — estilo iOS/Apple (v4.77.47 redesign)
   Card clicável com radio invisível + check circular animado à
   direita, sombra sutil, transição suave. Usado em:
     - modal-change-password (endereço cadastrado / novo)
     - modal-cart (entrega, retirada, meios de pagamento)
   ════════════════════════════════════════════════════════════ */
.opcao-pagamento{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 22px;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--space-3, 12px);
  row-gap: var(--space-1, 4px);
  padding: var(--space-4, 16px);
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-light, #e4e4e7);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}

.opcao-pagamento:active {
  transform: scale(0.995);
  background-color: var(--bg-secondary, #fafafa);
}

/* Estado selecionado (classe .selected adicionada via JS OU via :has quando radio está checked) */
.opcao-pagamento.selected,
.opcao-pagamento:has(input[type="radio"]:checked) {
  border-color: var(--main-color, #3B82F6);
  background-color: color-mix(in srgb, var(--main-color, #3B82F6) 6%, transparent);
  box-shadow: 0 0 0 1px var(--main-color, #3B82F6), 0 2px 8px rgba(0,0,0,0.04);
}

/* Radio customizado — círculo 22x22 perfeito (antes Bootstrap
   .form-control fazia width:100% e transformava em oval) */
.opcao-pagamento input[type="radio"]{
  grid-column: 2;
  grid-row: 1 / span 2;
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: end;
  align-self: center;
  border: 1.5px solid var(--border-medium, #d4d4d8) !important;
  border-radius: 50% !important;
  background: transparent;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box !important;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
  position: relative;
}

.opcao-pagamento input[type="radio"]:checked {
  border-color: var(--main-color, #3B82F6);
  background: var(--main-color, #3B82F6);
}

.opcao-pagamento input[type="radio"]:checked::after {
  content: "\f00c"; /* fa-check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: #fff;
  font-size: 10px;
  line-height: 1;
}

/* Texto principal (label da opção) */
.opcao-pagamento > span{
  grid-column: 1;
  grid-row: 1;
  font-size: var(--font-md, 15px);
  font-weight: var(--weight-semibold, 600);
  color: var(--text-primary, #18181b);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
}

.opcao-pagamento > span i {
  color: var(--text-muted, #71717a);
  font-size: var(--font-md, 15px);
  width: 20px;
  text-align: center;
}

.opcao-pagamento.selected > span i,
.opcao-pagamento:has(input[type="radio"]:checked) > span i {
  color: var(--main-color, #3B82F6);
}

/* Detalhe secundário (endereço etc.) */
.opcao-pagamento > small{
  grid-column: 1;
  grid-row: 2;
  display: block;
  font-size: var(--font-sm, 13px);
  color: var(--text-muted, #71717a);
  line-height: var(--leading-normal, 1.4);
  font-weight: var(--weight-regular, 400);
}

/* Container — empilhamento consistente */
.lista-pagamentos,
#andress-list .lista-pagamentos {
  display: flex !important;
  flex-direction: column;
  gap: var(--space-2, 8px) !important;
  margin: 0 !important;
  padding: 0;
}

#andress-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-3, 12px);
}