/* ===========================================================================
   BASE — o desenho partilhado das apps que o cliente vê.
   Ilha dos Cosméticos · Sonar (pesquisa) · Maré (brindes)

   ⚠️ ESTE FICHEIRO É COPIADO PARA AS DUAS APPS. Não é um pacote instalado, é
   uma cópia — de propósito, para que cada app continue a poder ir para o ar
   sozinha, sem depender do outro projeto. Se mexeres aqui, copia para as duas:
       mare/publico/base.css
       pesquisa/publico/base.css   (e para assets/ das duas extensões de tema)

   O que está aqui: as cores da casa e as regras de telemóvel que já nos
   custaram bugs em produção. O que NÃO está aqui: o desenho próprio de cada
   app — esse vive em mare.css e sonar.css.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   AS CORES OFICIAIS DA ILHA DOS COSMÉTICOS
   Do manual da marca (Logo Ilha dos Cosméticos 2025.pdf):

     roxo     RGB #9727B3   ·  CMYK #8C3589  (C:56 M:95 Y:0 K:0)
     laranja  RGB #EF892E   ·  CMYK #EA841B  (C:4 M:57 Y:100 K:0)
     letra    Belleza

   ⚠️ USAR SEMPRE AS VERSÕES **RGB**. As CMYK são para impressão — num ecrã
   saem mais baças e não batem certo com o resto do site.
   --------------------------------------------------------------------------- */
:root {
  --ilha-cor: #9727B3;    /* roxo — o principal */
  --ilha-cor2: #EF892E;   /* laranja — o de acompanhamento */

  /* ⚠️ O vermelho da promoção NÃO é cor de marca, e é de propósito: o tema já
     usa vermelho nos selos de desconto e nos preços em saldo, e o cliente já o
     lê como "promoção". Pôr aqui o laranja da marca confundia-se com o resto
     do site e deixava de saltar à vista. */
  --ilha-promo: #d81f26;

  /* Tons neutros — sempre em rgba sobre branco, nunca cinzentos fixos, para
     assentarem em qualquer fundo do tema. */
  --ilha-linha: rgba(0, 0, 0, .1);
  --ilha-linha-forte: rgba(0, 0, 0, .18);
  --ilha-fundo-suave: rgba(0, 0, 0, .05);
  --ilha-texto: #111;
  --ilha-apagado: rgba(0, 0, 0, .55);

  --ilha-raio: 10px;        /* caixas, campos, cartões */
  --ilha-raio-pequeno: 8px; /* painéis pendurados */
  --ilha-raio-pastilha: 999px;

  /* Duas camadas, e nunca mais do que duas: o painel pendurado fica por baixo
     do ecrã inteiro. Valores absurdos de propósito — há temas e apps de
     terceiros a usar z-index altíssimos. */
  --ilha-camada-painel: 2147483000;
  --ilha-camada-ecra: 2147483001;
}

/* ---------------------------------------------------------------------------
   ⚠️⚠️ REGRAS DE TELEMÓVEL — CADA UMA DESTAS É UM BUG JÁ PAGO.
   Não são preferências de estilo. Tirar qualquer uma volta a partir a app no
   telefone, e são falhas que NÃO se veem no computador.
   --------------------------------------------------------------------------- */

/* 1) NUNCA `@media (prefers-color-scheme: dark)`.
      A loja é SEMPRE clara, mas o telefone do cliente pode estar em modo
      escuro — e então o nosso widget fica preto dentro de um site branco. Foi
      o que aconteceu no telefone da mulher do Silva.
      Um widget de loja segue a LOJA, não a preferência do sistema.
      Por isso o fundo e a cor são declarados à mão em todo o lado. */

/* 2) Ecrã inteiro: `100dvh`, nunca `100vh`.
      No telemóvel a barra do browser aparece e desaparece, e o `vh` conta com
      ela sempre escondida. Com `vh`, o fundo do ecrã fica debaixo da barra e o
      cliente NUNCA chega ao último item da lista. */
.ilha-ecra {
  position: fixed;
  inset: 0;
  z-index: var(--ilha-camada-ecra);
  background: #fff;
  color: var(--ilha-texto);
  display: flex;
  flex-direction: column;
  font-size: 15px;
  line-height: 1.4;

  /* 3) NADA PODE PASSAR DAS BORDAS.
        Basta um elemento um pouco mais largo do que o ecrã para o telemóvel
        deixar arrastar a página toda para os lados. Foi o que o Silva viu:
        "saindo de dentro da tela, para um lado e para o outro". */
  overflow: hidden;
  max-width: 100vw;

  height: 100dvh;
}
@supports not (height: 100dvh) {
  .ilha-ecra { height: 100vh; }
}
.ilha-ecra[hidden] { display: none; }

/* 4) ⚠️⚠️ `min-height: 0` NÃO É DECORAÇÃO — sem ele o ecrã FICA PRESO.
      Por omissão um filho de flex tem `min-height: auto`, ou seja "nunca
      encolhas abaixo do teu conteúdo". O contentor cresce até à altura de
      todos os cartões, transborda para fora do ecrã fixo — e como um elemento
      `position: fixed` não rola, fica tudo travado. O conteúdo está lá, por
      baixo, e não há forma de lá chegar.
      O Silva apanhou isto no telefone: "a tela tá presa".

      ⚠️ TEM DE ESTAR EM TODOS OS NÍVEIS entre o ecrã e a zona que rola. */
.ilha-ecra__corpo { display: flex; flex: 1; min-height: 0; }
.ilha-ecra__principal { flex: 1; min-width: 0; min-height: 0; }
.ilha-rola { overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }

/* 5) O topo e o rodapé não encolhem; só o meio é que rola. */
.ilha-ecra__topo, .ilha-ecra__rodape { flex: none; }
.ilha-ecra__topo {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ilha-linha);
}
.ilha-ecra__rodape {
  padding: 12px 18px;
  border-top: 1px solid var(--ilha-linha);
  background: #fff;
  /* ⚠️ O iPhone tem a barra de gestos por baixo. Sem isto, o botão de
     confirmar fica meio tapado e o cliente carrega na barra do sistema. */
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

/* ---------------------------------------------------------------------------
   PEÇAS COMUNS
   --------------------------------------------------------------------------- */

/* ⚠️ 17px nos campos de texto e não 15px: abaixo de 16px o iOS dá zoom sozinho
   quando o cliente toca no campo, e a página fica torta. */
.ilha-campo {
  flex: 1; min-width: 0;
  padding: 12px 16px;
  font-size: 17px;
  border: 2px solid var(--ilha-linha-forte);
  border-radius: var(--ilha-raio);
  background: #fff;
  color: inherit;
}
.ilha-campo:focus { outline: none; border-color: var(--ilha-texto); }

/* Alvos de toque nunca abaixo de 40px. Menos do que isso e falha-se o dedo. */
.ilha-redondo {
  flex: none;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: var(--ilha-fundo-suave);
  font-size: 17px; cursor: pointer; color: inherit;
}
.ilha-redondo:hover { background: rgba(0, 0, 0, .12); }

.ilha-pastilha {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(0, 0, 0, .14);
  border-radius: var(--ilha-raio-pastilha);
  background: #fff; color: inherit; cursor: pointer;
  white-space: nowrap;
  font-size: 14px;
}
.ilha-pastilha:hover { border-color: var(--ilha-cor); }
.ilha-pastilha--activa {
  border-color: var(--ilha-cor);
  background: var(--ilha-cor);
  color: #fff;
}

.ilha-botao {
  display: block; width: 100%;
  padding: 14px 18px;
  border: 0; border-radius: var(--ilha-raio);
  background: var(--ilha-cor); color: #fff;
  font-size: 16px; font-weight: 600; cursor: pointer;
}
.ilha-botao[disabled] { opacity: .45; cursor: default; }

/* Fila horizontal que rola — separadores, escolhas de brinde.
   ⚠️ `flex: none` nos filhos, senão encolhem em vez de rolar. */
.ilha-fila {
  display: flex; gap: 10px;
  padding: 12px 18px;
  overflow-x: auto;
  flex: none;
  scrollbar-width: thin;
}
.ilha-fila:empty { display: none; }

/* Painel pendurado (a caixinha de sugestões do Sonar, o aviso da Maré).
   ⚠️ Tem de ser `fixed` e pendurado no <body> — dentro do formulário do tema
   é cortado por um `overflow: hidden` e ninguém o vê, apesar de estar lá. */
.ilha-painel {
  position: fixed;
  z-index: var(--ilha-camada-painel);
  max-height: 70vh;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: var(--ilha-raio-pequeno);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
  font-size: 14px;
  line-height: 1.4;
}

/* ⚠️ Herdamos a letra do tema (Belleza) de propósito — não declaramos
   font-family. Assim a app nunca destoa se o tema mudar de tipo de letra. */

/* Quem prefere menos movimento, tem menos movimento. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* A idade dos números, quando vêm da cache. Ver `publico/idade.js`. */
.bs-idade {
  margin: 4px 0 10px;
  font-size: 14px;
  color: #8a6d00;
  background: #fff8e1;
  border-left: 3px solid #e0a800;
  padding: 6px 10px;
  border-radius: 6px;
}