/* Rodapé colado na base da viewport quando o conteúdo não preenche a tela */
html {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  max-width: 100% !important;
}

footer {
  margin-top: auto !important;
  padding: 10px 15px;
  box-sizing: border-box;
  flex-shrink: 0;
  background-color: #0068ff;
  border-top: 1px solid #0068ff;
  width: 100%;
}

/* Páginas em que o <footer> fica dentro de .content (termos, gerente, envio, 14-x, etc.) */
.content:has(footer) {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Página 9: wrapper .container em vez de .content */
.container:has(footer) {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Fallback sem :has (evita falha por compatibilidade e CSS inline concorrente) */
body>.content,
body>.container {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* Expande rodapé para largura total quando está dentro de wrappers com padding:20px.
   Usa calc em vez de 100vw para evitar overflow em iOS Safari.
   margin-top: 40px garante respiro mínimo entre o último elemento e o rodapé. */
.content>footer,
.container>footer,
#shipping-details>footer {
  position: relative;
  left: -20px;
  width: calc(100% + 40px);
  margin-top: 40px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box;
}

/* Páginas 13-x: rodapé dentro de #shipping-details */
#shipping-details {
  flex: 1;
  display: none;
  flex-direction: column;
  min-height: 0;
}

#shipping-details footer {
  margin-top: auto;
}