/* ------------------------------------------------------------------
   daponto — página do comerciante.
   Espelha o SCREENS.merchant_profile da APP (banner, logo sobreposto,
   linha de estado, informacao, avaliacao), mas SEM as abas: numa
   pagina larga as abas escondiam metade do conteudo, e este e o
   conteudo que se quer indexado.
   ------------------------------------------------------------------ */

/* ==================================================================
   TOPO — banner a largura toda, identidade por baixo.

   🚨 O BANNER MOSTRA-SE INTEIRO, no racio EXACTO em que e carregado, e
   sem nada por cima. Ele nao e cenario: e a entrada visual que o
   comerciante monta. Um corte come o cimo e o rodape, que e onde as
   pessoas poem texto; uma sobreposicao tapa o que ele desenhou. As duas
   coisas estragam o trabalho dele, e nenhuma se justifica.

   Racio FIXO em 1920x640 (3:1) — o porque esta na nota do fim.
   ================================================================== */

.mtop{ padding-block:24px 30px }

/* Banner: 3:1 FIXO (1920x640). Ver a nota no fim do ficheiro. */
.mhero{
    position:relative; aspect-ratio:3/1;
    border-radius:var(--r-media); overflow:hidden; background:var(--soft); box-shadow:var(--sh-1);
}
.mhero img{ width:100%; height:100%; object-fit:cover }


/* Identidade POR BAIXO do banner, nunca por cima. */
.mident{ display:flex; align-items:center; gap:20px; margin-top:24px; flex-wrap:wrap }

/* Logotipo QUADRADO, contain sobre branco, com moldura. */
.mlogo{
    width:96px; height:96px; border-radius:var(--r-lg); flex:0 0 auto;
    background:#fff; border:1px solid var(--line); box-shadow:var(--sh-1);
    display:grid; place-items:center; overflow:hidden;
    font-family:var(--f-head); font-size:30px; color:#fff;
}
.mlogo img{ width:100%; height:100%; object-fit:contain; padding:10px }

.mtitle{ flex:1 1 240px; min-width:0 }
.mtitle h1{ font-size:clamp(26px,3vw,38px) }
.mtitle .slogan{ margin-top:8px; color:var(--muted); font-size:15.5px; font-style:italic }

.mactions{ display:flex; align-items:center; gap:12px; margin-left:auto; flex-wrap:wrap }

/* Estrelas SEMPRE visiveis: as que nao contam ficam em marca d'agua, e
   sem nota fresca ficam TODAS em marca d'agua e sem contagem. Regra da
   APP (2026-07-16), e nao se muda aqui. */
.mstars{ display:flex; align-items:center; gap:7px; font-size:15px; color:var(--ink) }
.mstars .s{ color:var(--star); font-size:14px; letter-spacing:1px }
.mstars .s .off{ color:#DDE5EA }
.mstars .n{ color:var(--muted); font-size:13.5px }

/* O botao de SEGUIR subiu para o site.css: passou a ser usado tambem
   pela pagina dos Favoritos, e uma accao nao muda de cara conforme o
   sitio onde aparece. */

/* ===== Duas colunas ===== */
.mgrid{ display:grid; grid-template-columns:1fr 358px; gap:44px; align-items:start; padding-bottom:76px }

.msec{ padding-bottom:38px }
.msec > h2{ font-size:22px; margin-bottom:18px }
.msec-empty{ padding:44px 0; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:var(--r-card) }

/* ===== Cartao de informacao (coluna direita) ===== */
.icard{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; position:sticky; top:98px }
.isec{ padding:18px 20px; border-bottom:1px solid var(--line) }
.isec:last-child{ border-bottom:0 }
.isec h3{
    font-family:var(--f-head); font-weight:400; font-size:11px; letter-spacing:.12em;
    text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.irow{ display:flex; align-items:flex-start; gap:11px; padding:7px 0; font-size:14px; color:var(--body) }
.irow > i:first-child, .irow > .ico{ width:18px; text-align:center; color:var(--muted); margin-top:3px; flex:0 0 auto }
.irow a{ color:var(--brand-ink) }
.irow strong{ color:var(--ink); font-weight:400; font-family:var(--f-head) }

/* Linha do Spot: o disco daponto, nunca um visto. */
.ispot{ display:flex; align-items:center; gap:11px; font-size:14px; color:var(--brand-ink) }
.ispot svg{ width:22px; height:22px; flex:0 0 auto }

.iabout{ font-size:14.5px; line-height:1.7; color:var(--body) }

.iareas{ display:flex; flex-wrap:wrap; gap:7px }
.iarea{ background:var(--soft); border-radius:var(--r-pill); padding:5px 12px; font-size:13px }
.iarea.main{ background:var(--brand-soft); color:var(--brand-ink) }

/* Horario: escondido atras do relogio, como na APP. Aberto por omissao
   no dia de hoje, que e a unica linha que a pessoa costuma querer. */
.iaddr{ border-bottom:1px solid var(--line); padding:10px 0 }
.iaddr:last-child{ border-bottom:0 }
.oh-btn{ margin-left:auto; color:var(--muted); font-size:12px; padding:2px 4px; flex:0 0 auto }
.oh{ margin:8px 0 2px 29px; font-size:13px; color:var(--muted) }
.oh-row{ display:flex; gap:12px; padding:2px 0 }
.oh-row span:first-child{ width:44px; color:var(--body) }
.oh-row.today span{ color:#1E8E5A }

/* ==================================================================
   OS PONTOS DO CLIENTE NESTA LOJA

   🚨 O QUE ESTAVA AQUI ESTAVA ERRADO, e nao era so feio: era um numero
   sozinho («OS SEUS PONTOS AQUI / 180») numa pagina onde as ofertas se
   pagam com DUAS carteiras diferentes.

     · `camp.type='mch'`  debita `merchant_customer.points` (a carteira
       DESTA loja, que e a que este bloco mostra)
     · `app`, `dp` e `discv` debitam `user.points` (a carteira daponto,
       que vive na pastilha do cabecalho e no perfil)

   Confirmado em `DATA/camps/index.php` (o ramo `$is_mch` do resgate). O
   perfil do comerciante e o unico sitio onde os dois tipos convivem: no
   feed so ha `app` e `discv`. Uma pessoa com 180 aqui e 40 na daponto
   olhava para uma oferta de «60 pontos» e concluia, com toda a razao,
   que a podia levar - e nao podia.

   ⚠️ A CORRECCAO NAO E MOSTRAR AS DUAS CARTEIRAS AQUI (regra do Peter,
   2026-08-30): o saldo daponto e global e ja tem o seu lugar no topo,
   ao pe do botao do utilizador. Repeti-lo dentro de um cartao chamado
   «aqui» era pior do que o problema. Quem desfaz a ambiguidade sao os
   MARCADORES nos cartoes de oferta (ver mais abaixo), que e onde a
   duvida nasce.
   ================================================================== */

.cust{
    position:relative; overflow:hidden;
    border-radius:var(--r-lg); margin-bottom:20px; color:#fff;
    background:linear-gradient(150deg, #16242E, var(--ink));
    box-shadow:var(--sh-2);
}

/* ⚠️ SEM TITULO. Havia um «Os seus pontos nesta loja» por cima de um
   «pontos desta loja» por baixo do numero: a mesma frase duas vezes,
   com o numero entalado no meio. Ficou o rotulo que esta agarrado ao
   valor, que e o que se le sem sair do sitio.

   E ao centro, porque um numero sozinho encostado a esquerda numa
   coluna estreita fica a boiar. Ao centro le-se como um mostrador, que
   e o que ele e. */
.cust-val{ padding:24px 20px 22px; text-align:center }
.cust-val b{
    display:block; font-family:var(--f-head); font-weight:400;
    font-size:44px; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.cust-val small{ display:inline-flex; align-items:center; gap:7px; margin-top:9px; font-size:12.5px; opacity:.72 }
.cust-val small i{ font-size:11px; opacity:.85 }

/* ⚠️ Quem AINDA NAO E CLIENTE nao tem pontos nesta loja - nao tem zero,
   nao tem nada (`m.customer` vem a null). Nesse caso o numero nao e um
   traco nem um zero: some, e o lugar dele passa a ser uma frase que diz
   como e que se comeca. Um zero mentiria (dava a entender que ja e
   cliente e gastou tudo) e um traco nao diz nada a ninguem. */
.cust-hint{
    padding:2px 20px 18px;
    font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.62);
}

/* A tira do fim: um RESUMO, e nao um link (2026-08-30).
   ⚠️ Chegou a ser um link com uma oferta nomeada, e a pergunta que o
   derrubou foi simples: para onde e que ele leva? A pessoa ja esta no
   perfil e as ofertas estao logo ali. Um link que rola a pagina para
   baixo e teatro.

   🚨 E A FRASE TEVE DE SER REESCRITA, porque a primeira versao dizia
   uma coisa FALSA: «as que se pagam com pontos desta loja». **As
   campanhas nao se pagam com pontos.** Os pontos sao o que se da para
   OBTER O VOUCHER; o valor da oferta e pago em dinheiro ao comerciante,
   ao balcao (e a nota que o camp.html ja da: «qualquer valor a pagar e
   pago directamente ao comerciante»).
   A frase passou a falar SO dos pontos, que e o assunto deste cartao:
   «Chegam para 3 ofertas». Diz que o saldo e suficiente, e nao diz nada
   sobre a forma de pagamento, porque nao e disso que sabe. Sem
   denominador de proposito: «3 de 5» obrigava a explicar quais cinco, e
   quem quiser saber quais tem os marcadores nos cartoes. */
.cust-next{
    display:flex; align-items:center; gap:11px;
    padding:13px 20px; font-size:13.5px; line-height:1.4;
    border-top:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.05);
}
.cust-next b{ font-family:var(--f-head); font-weight:400; color:#fff }
.cust-next .ic{ flex:0 0 auto; font-size:15px }
.cust-next.reach{ color:#8FE3B4 }
.cust-next.reach b{ color:#BFF2D6 }

/* Quando ainda nao chega: barra com o alvo NOMEADO. Uma barra sem o nome
   do que esta do outro lado e uma barra a encher-se para nada. */
.cust-next.far{ display:block; color:rgba(255,255,255,.78) }
.cn-bar{ height:6px; border-radius:3px; background:rgba(255,255,255,.16); overflow:hidden; margin-bottom:9px }
.cn-fill{ height:100%; border-radius:3px; background:var(--brand) }

/* Aviso de penalizacao. So aparece quando ha data, e e discreto: e um
   aviso, nao uma ameaca. ⚠️ Precisa de `points_penalty_due_at`, que a
   tabela ja tem e o SELECT do perfil ainda nao devolve. */
.cust-risk{
    display:flex; align-items:center; gap:9px; padding:11px 20px;
    border-top:1px solid rgba(255,255,255,.12);
    font-size:12.5px; color:#F0C877;
}

/* ===== Legenda das duas carteiras =====
   So no perfil do comerciante, que e onde elas convivem. Sem ela, a
   promessa do bloco («ja da para tres») nao se consegue conferir
   olhando para os cartoes, e uma promessa que nao se confere e pior
   do que promessa nenhuma.
   ⚠️ O `.plus.mch` que aqui vivia DESCEU para o site.css a 2026-09-05:
   o cartao passou a ser partilhado (showcase/card.php) e a homepage
   nao carrega esta folha - um cartao `mch` sairia la com o icone azul
   da carteira daponto, ou seja a dizer a carteira errada. */
.legend{ display:flex; gap:16px; flex-wrap:wrap; margin:2px 0 18px; font-size:12.5px; color:var(--muted) }
.legend span{ display:inline-flex; align-items:center; gap:7px }
.legend i{ font-size:11px }
.legend .dp i{ color:var(--brand-ink) }
.legend .mc i{ color:#8FA6B2 }

/* ===== Avaliacao ===== */
.rchart{ border:1px solid var(--line); border-radius:var(--r-card); padding:22px 20px 14px }
.rchart svg{ width:100%; height:150px; display:block; overflow:visible }
.rc-total{ margin-top:12px; font-size:13px; color:var(--muted); text-align:center }

.rx{ margin-top:22px; display:flex; flex-direction:column; gap:13px }
.rx-row{ display:flex; align-items:center; gap:14px; font-size:14px }
.rx-lbl{ width:158px; flex:0 0 auto; color:var(--body) }
.rx-bar{ flex:1; height:8px; border-radius:4px; background:var(--soft); overflow:hidden }
.rx-fill{ height:100%; background:var(--brand); border-radius:4px }
.rx-val{ width:30px; text-align:right; font-family:var(--f-head); color:var(--ink) }

@media (max-width:1100px){
    .mgrid{ grid-template-columns:1fr; gap:34px }
    .icard{ position:static }
}

/* ==================================================================
   ECRA PEQUENO — o banner SANGRA de bordo a bordo, sem cantos.

   O -18px e exactamente o padding lateral que o .wrap tem abaixo dos
   860px. Se um dia esse valor mudar, este tem de mudar com ele: sao o
   mesmo numero e nao duas coincidencias. Foi por isso que ficou ao lado
   da regra do .wrap na cabeca de quem leia — e a unica divida deste
   ficheiro para com o site.css.

   Sem cantos porque, a largura toda, uma rodagem le-se como um recorte
   na imagem e nao como um enquadramento.
   ================================================================== */

@media (max-width:860px){
    .mtop{ padding-top:0 }
    .mhero{ margin-inline:-18px; border-radius:0; box-shadow:none }
    .mlogo{ width:80px; height:80px }

    /* Grelha de duas colunas em vez de flex: o logotipo ocupa a primeira,
       e TANTO o nome COMO a linha de avaliacao ocupam a segunda. Assim a
       avaliacao alinha com o nome sozinha, sem numero magico nenhum —
       se o logotipo mudar de tamanho, o alinhamento acompanha.
       Estava `width:100%` e a linha comecava colada a esquerda, por
       baixo do logotipo, em vez de pertencer ao bloco de identidade. */
    .mident{
        display:grid; grid-template-columns:auto 1fr;
        column-gap:14px; row-gap:14px; align-items:center; margin-top:20px;
    }
    .mlogo   { grid-area:1 / 1 }
    .mtitle  { grid-area:1 / 2 }
    .mactions{ grid-area:2 / 2; margin-left:0; width:auto }
}

@media (max-width:560px){
    .mlogo{ width:68px; height:68px; border-radius:var(--r-card) }

    /* O logotipo e o nome ficam NA MESMA LINHA. Estava `flex:1 1 100%`,
       o que atirava o nome para a linha de baixo e deixava o logotipo
       sozinho e desalinhado com tudo o resto. Um logotipo orfao no
       canto nao se le como identidade, le-se como um icone perdido. */
    .mident{ column-gap:12px }
    .mtitle h1{ font-size:24px }
    .mtitle .slogan{ font-size:14px; margin-top:5px }

    .rx-lbl{ width:112px; font-size:13px }
}

/* ==================================================================
   BANNER — 1920x640 (3:1), FIXO.  Decidido 2026-08-29.

   Percorreu-se o caminho todo (corte a altura fixa -> 16:9 inteiro ->
   altura livre entre limites) e voltou-se ao mais simples: um racio so,
   igual para toda a gente. Fica o registo do porque, que e o que evita
   voltar a andar as voltas.

   ── Porque 3:1 e nao o 16:9 de hoje ───────────────────────────────
   O alvo actual do ImageField e 1920x1080. A largura toda isso da 697px
   de altura num portatil — mais alto do que a area util depois do
   cabecalho, ou seja quem chega ve o banner e mais nada.
   E 16:9 nunca serviu superficie nenhuma: a APP desenha o banner numa
   faixa de 140px a ~390px de largura, que e perto de 2,8:1, e corta o
   16:9 desde sempre. 3:1 fica quase exacto para a APP e da uma faixa de
   entrada com presenca no site:

       1240px -> 397px   ·   860px -> 287px   ·   390px -> 130px

   ── Porque nao altura livre entre limites ─────────────────────────
   Chegou a estar decidido e recuou-se, bem. Um racio fixo poupa tres
   coisas de uma vez:
     · o Office nao precisa de selector de forma nenhum;
     · a validacao do upload volta a ser «bate com o alvo?» em vez de
       «cai dentro da banda?»;
     · e — o mais util — NAO e preciso medir a imagem no servidor. Com
       racio fixo o CSS ja sabe a forma e reserva o espaco sozinho, logo
       a pagina nao salta quando a fotografia carrega. O getimagesize()
       que a versao de altura livre exigia deixa de fazer falta.

   ── O que isto implica fora desta folha ───────────────────────────
   1. ImageField: targetW/targetH do banner passam de 1920x1080 para
      1920x640. O aviso de racio ja existe e passa a comparar com o
      alvo novo — nao ha mecanismo a construir.
   2. APP (decisao do Peter: «a APP tem de se adaptar»): a faixa de
      140px passa a derivar do racio. Com 3:1 e quase o que ja la esta,
      mas mexe no logotipo sobreposto e na linha de estado, logo e
      tarefa propria com o seu bump de version.app.
   3. Banners ja carregados a 16:9 passam a ser cortados no cimo e no
      rodape. E o que a APP ja lhes faz hoje, logo ninguem fica pior do
      que esta — mas vale a pena contar quantos sao e avisa-los.
   ================================================================== */

/* ==================================================================
   FASE A DO SITE (2026-09-03) — duas regras que a maqueta nao tinha
   ================================================================== */

/* 🚨 O horario abre num `<details>` e nao num botao: a pagina do comerciante nao carrega
   JavaScript NENHUM, e o horario tem de abrir na mesma. E o mesmo que a pagina de campanha
   ja faz nas condicoes. A maqueta usa `.oh-btn`, que exigiria um script so para isto. */
.oh-wrap{ margin:6px 0 2px 29px }
.oh-wrap summary{
    cursor:pointer; font-size:13px; color:var(--brand-ink);
    list-style:none; display:inline-flex; align-items:center; gap:7px;
}
.oh-wrap summary::-webkit-details-marker{ display:none }
.oh-wrap .oh{ margin-left:0 }

/* «Como chegar» por baixo de cada morada. Vive fora da linha da morada porque essa ja tem o
   nome e a rua, e um terceiro elemento na mesma linha deixa de caber num telemovel. */
.iaddr-links{ margin:4px 0 0 29px; font-size:13px }
.iaddr-links a{ color:var(--brand-ink); display:inline-flex; align-items:center; gap:7px }