/* Aviso das entregas nos Açores e na Madeira.
   Informativo e nunca bloqueante: aparece por baixo do distrito quando o local
   de entrega é uma ilha. O elemento é uma região viva (role="status"); o texto
   é escrito por Distritos.atualizarAviso (assets/js/data/distritos.js).

   Vive num ficheiro à parte para não depender de nenhuma página: qualquer
   formulário de entrega pode usá-lo com <div class="ilhas-aviso" role="status"
   aria-live="polite" hidden></div>. */
.ilhas-aviso {
  /* Dentro de uma grelha de formulário ocupa a linha toda. */
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--blue-100, #7a8fd4);
  border-radius: var(--radius-md, 12px);
  background: var(--blue-50, #e8ebf7);
  color: var(--blue-900, #0f1a38);
  font-size: 14px;
  line-height: 1.5;
  /* Texto comprido num ecrã de 390px: parte onde for preciso, sem overflow. */
  overflow-wrap: anywhere;
}

/* O atributo hidden tem de ganhar a qualquer display que uma página ponha. */
.ilhas-aviso[hidden] {
  display: none;
}

/* Sem o texto escrito ainda (instante entre aparecer e ser anunciado) não
   ocupa espaço nenhum. */
.ilhas-aviso:empty {
  padding: 0;
  border-width: 0;
}

@media (max-width: 480px) {
  .ilhas-aviso {
    padding: 10px 12px;
    font-size: 13px;
  }
}