/* ABPVM Viaturas — front-end */
.abpvm-form { max-width: 720px; }
.abpvm-group { border: 1px solid #d8d8d8; border-radius: 6px; padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.abpvm-group legend { font-weight: 700; padding: 0 .5rem; }
.abpvm-field { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1rem; }
.abpvm-field label { font-weight: 600; }
.abpvm-req { color: #b32d2e; }
.abpvm-help { font-size: .875em; color: #555; }
.abpvm-form input[type="text"], .abpvm-form input[type="email"], .abpvm-form input[type="tel"],
.abpvm-form input[type="number"], .abpvm-form select, .abpvm-form textarea {
  width: 100%; padding: .5rem .6rem; border: 1px solid #bbb; border-radius: 4px; font: inherit;
}
.abpvm-btn { background: #3d5233; color: #fff; border: 0; border-radius: 4px; padding: .75rem 1.5rem; font-weight: 700; cursor: pointer; }
.abpvm-btn:hover { background: #2c3b25; }
.abpvm-consent { font-size: .9em; }

/* Honeypot — invisível para humanos, presente para bots */
.abpvm-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; height: 0; overflow: hidden; }

.abpvm-notice { padding: .85rem 1rem; border-radius: 4px; margin: 0 0 1.25rem; }
.abpvm-notice--ok { background: #edf7ed; border-left: 4px solid #3d8b3d; }
.abpvm-notice--erro { background: #fdeceb; border-left: 4px solid #b32d2e; }

.abpvm-preview { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.abpvm-preview figure { margin: 0; width: 96px; }
.abpvm-preview img { width: 96px; height: 96px; object-fit: cover; border-radius: 4px; }
.abpvm-preview figcaption { font-size: .7em; color: #666; word-break: break-all; }

/* Área de viaturas */
.abpvm-viewer { max-width: 900px; }
.abpvm-detalhe { margin-top: 1.5rem; }
.abpvm-detalhe table { width: 100%; border-collapse: collapse; }
.abpvm-detalhe th { text-align: left; width: 34%; padding: .5rem; background: #f4f4f2; border: 1px solid #e2e2e2; }
.abpvm-detalhe td { padding: .5rem; border: 1px solid #e2e2e2; }
.abpvm-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; margin-top: 1rem; }
.abpvm-galeria img { width: 100%; height: auto; border-radius: 4px; display: block; }
.abpvm-carregando { color: #666; font-style: italic; }

/* ============================================================
   Responsividade / mobile (iPhone Safari, Android, WhatsApp in-app)
   ============================================================ */

/* iOS Safari dá zoom automático em campos com fonte < 16px.
   Fixar em 16px no input evita o "pulo" de zoom ao tocar no campo. */
.abpvm-form input[type="text"],
.abpvm-form input[type="email"],
.abpvm-form input[type="tel"],
.abpvm-form input[type="number"],
.abpvm-form select,
.abpvm-form textarea {
  font-size: 16px;
  max-width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;   /* remove estilo nativo iOS que quebra o layout */
  appearance: none;
  border-radius: 4px;
}

/* Botão confortável para o toque (alvo mínimo ~44px do iOS HIG) */
.abpvm-btn {
  min-height: 48px;
  width: 100%;
  font-size: 16px;
}

/* Impede que qualquer conteúdo estoure a largura da tela */
.abpvm-form,
.abpvm-viewer {
  width: 100%;
  box-sizing: border-box;
}
.abpvm-form img,
.abpvm-viewer img,
.abpvm-detalhe img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 600px) {
  .abpvm-group {
    padding: .85rem .9rem;
  }

  /* Tabela de detalhes vira blocos empilhados — não estoura na horizontal */
  .abpvm-detalhe table,
  .abpvm-detalhe tbody,
  .abpvm-detalhe tr,
  .abpvm-detalhe th,
  .abpvm-detalhe td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }
  .abpvm-detalhe th {
    border-bottom: 0;
  }
  .abpvm-detalhe td {
    border-top: 0;
    margin-bottom: .5rem;
  }

  .abpvm-galeria {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  .abpvm-preview figure,
  .abpvm-preview img {
    width: 80px;
  }
  .abpvm-preview img {
    height: 80px;
  }
}