/* ─────────────────────────────────────────────────────────────────
   Viver Em Pemba — correcções de alinhamento
   Criado 2026-08-07.

   O problema: os cartões de listagem crescem com o conteúdo. Um título
   de duas linhas ao lado de um de uma linha desalinha o preço, a
   avaliação e o rodapé de todos os cartões da fila.

   A solução tem duas metades e ambas são precisas:
     1. Este ficheiro — trava a altura do que já está publicado
     2. Limites de caracteres na validação — impede conteúdo novo
        fora do orçamento (ver Regras de Conteúdo, no vault)

   Só CSS. Não altera markup nem lógica; sobrevive a actualizações
   do sistema de origem.
   ───────────────────────────────────────────────────────────────── */

/* ── 1. Cartões de listagem com altura igual ───────────────────── */

.item-loop,
.item-loop-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Como a coluna passa a ser flex (ver abaixo), o cartão torna-se um
       flex item — e por omissão encolhe para a largura do conteúdo.
       Sem isto, cartões da mesma fila ficam com larguras diferentes. */
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
}

/* a imagem nunca encolhe */
.item-loop .thumb-image,
.item-loop-wrap .thumb-image {
    flex-shrink: 0;
}

/* o bloco de preço encosta sempre ao fundo, alinhado entre cartões */
.item-loop .g-price,
.item-loop .text-price,
.item-loop-wrap .g-price,
.item-loop-wrap .text-price {
    margin-top: auto;
}

/* A coluna estica para o cartão poder ter height:100%.
   O espaçamento entre filas passa a viver AQUI, não no cartão:
   com height:100% a margem do cartão cai fora da coluna e as filas
   ficam coladas (medido: 30px na horizontal, 0 na vertical).

   ⚠️ Dois contentores, não um. As páginas de pesquisa usam
   .bc-list-item; a HOME usa .list-item dentro de .bc-list-<modulo>.
   A primeira versão desta correcção só cobria o primeiro, e no home
   os cartões continuavam colados — visível nos carros, o único bloco
   com duas filas. Os dois têm de andar sempre juntos: se um dia se
   acrescentar outro contentor, acrescenta-se aqui E na regra do
   height:100% acima, senão volta a acontecer o mesmo. */
.bc-list-item .col-lg-3,
.bc-list-item .col-lg-4,
.bc-list-item .col-md-6,
.bc-list-item .col-sm-6,
.bc-list-item .col-12,
.list-item > .row > [class*="col-"] {
    display: flex;
    margin-bottom: 30px;
}

/* ⚠️ Tornar a coluna flex faz o cartão lá dentro passar a flex item, e um
   flex item sem largura definida encolhe ate ao conteudo. A regra de
   largura acima so cobre .item-loop; os cartoes de LOCALIZACAO chamam-se
   .destination-item e ficaram com largura ZERO — o bloco "Bairros e
   destinos" do home aparecia so com o titulo e um vazio por baixo.

   Em vez de enumerar nomes de classe um a um, garante-se que o filho
   directo da coluna preenche sempre a coluna. Vale para localizacoes,
   noticias e qualquer bloco que venha a usar esta grelha. */
.list-item > .row > [class*="col-"] > * {
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
}

/* o cartão deixa de trazer a sua própria margem — senão soma-se à
   da coluna e o espaçamento fica a dobrar */
.bc-list-item .item-loop,
.bc-list-item .item-loop-wrap,
.list-item .item-loop,
.list-item .item-loop-wrap {
    margin-bottom: 0;
}

/* ── 1b. Imagens dos cartões com altura constante ───────────────── */

/* O tema já cria uma caixa de proporção fixa em cada tipo de cartão:
   .item-car e .item-boat usam padding-bottom:55%, .item-event 80%,
   .item-hotel e .item-space height:185px.

   Mas a imagem fica em fluxo normal com max-width:100% — se a altura
   natural for diferente da caixa, o cartão cresce ou encolhe e a fila
   deixa de alinhar. Em produção não se nota porque as fotografias são
   carregadas com dimensões parecidas; basta uma diferente para partir
   o alinhamento.

   Fazer a imagem preencher a caixa resolve, seja qual for o original. */

.item-loop .thumb-image,
.item-loop-wrap .thumb-image {
    position: relative;
}

.item-loop .thumb-image > a,
.item-loop-wrap .thumb-image > a {
    display: block;
    position: absolute;
    inset: 0;
}

.item-loop .thumb-image img,
.item-loop-wrap .thumb-image img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;      /* preenche sem distorcer; corta o excesso */
    object-position: center;
}

/* Nos cartões com caixa de proporção (car, boat, event) o padding-bottom
   define a altura. Nos de altura fixa (hotel, space) é o height:185px.
   Ambos funcionam com a imagem absoluta acima. */

/* ── 2. Títulos com número de linhas fixo ──────────────────────── */

/* Duas linhas. Acima disso corta com reticências — o cartão mantém
   a altura seja qual for o comprimento do título. */
.item-loop .item-title,
.item-loop .item-title a,
.item-loop-wrap .item-title,
.item-loop-wrap .item-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* reserva a altura das duas linhas mesmo quando o título só tem uma,
   para que a linha de baixo alinhe em todos os cartões */
.item-loop .item-title,
.item-loop-wrap .item-title {
    min-height: 2.8em;
    line-height: 1.4;
}

/* localização e avaliação: uma linha, sempre */
.item-loop .location,
.item-loop .service-review,
.item-loop-wrap .location,
.item-loop-wrap .service-review {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── 3. Bloco de destaques da página inicial ───────────────────── */

/* O desenho original tem altura fixa (370px), título com margin-top de
   60px e o botão em fluxo normal com animação de hover. NÃO mexer no
   display nem na altura — uma tentativa anterior com flex partiu o
   bloco e escondeu os títulos.

   O primeiro cartão ocupa 6 colunas, os outros dois só 3. Um título
   longo no cartão estreito partia em três linhas e empurrava o botão
   para cima do texto. Travar o título em duas linhas resolve. */

.bc-offer .item .item-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 40px;          /* era 60px — devolve espaço ao texto */
}

.bc-offer .item .item-sub-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── 4. Menu — o português é mais longo do que o inglês ────────── */

/* Com 8 itens o menu cabe numa linha. Se um dia forem 9 ou 10,
   isto aperta o espaçamento antes de partir para duas linhas. */
@media (min-width: 992px) and (max-width: 1400px) {
    .bc_header .bc-menu > ul > li > a {
        padding-left: 12px;
        padding-right: 12px;
        white-space: nowrap;
    }
}

/* ── 5. Títulos de secção ──────────────────────────────────────── */

/* Impede que uma descrição longa empurre a grelha para baixo de forma
   diferente entre secções. */
.bc-list-item .list-item-header .sub-title,
.bc-list-item .title-wrapper .sub-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ── 6. Rodape: icones das redes sociais ───────────────────────────── */

/* O tema desenha-os a 14px, pequenos demais para se acertar num
   telemovel — a area minima de toque recomendada e 44px. */

.bc_footer .socials,
footer .socials {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 10px;
}

.bc_footer .socials a,
footer .socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .25);
    transition: all .25s ease;
}

.bc_footer .socials a i,
footer .socials a i {
    font-size: 20px;      /* era 14px */
    line-height: 1;
}

/* laranja da marca no hover — #ff9202, do logotipo oficial */
.bc_footer .socials a:hover,
footer .socials a:hover {
    background: #ff9202;
    border-color: #ff9202;
    transform: translateY(-2px);
}

.bc_footer .socials a:hover i,
footer .socials a:hover i {
    color: #fff;
}

/* ── 7. Pagina de politicas ─────────────────────────────────────────── */

.politica-privacidade {
    max-width: 820px;
    line-height: 1.7;
}

.politica-privacidade h3 {
    font-size: 17px;
    letter-spacing: .04em;
    margin: 2.2rem 0 .8rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid #ff9202;
    display: inline-block;
}

.politica-privacidade ul {
    padding-left: 1.3rem;
    margin-bottom: 1rem;
}

.politica-privacidade li {
    margin-bottom: .35rem;
    list-style: disc;
}

.politica-privacidade a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* O aviso de propriedade abre a pagina — enquadra tudo o resto */
.politica-privacidade .aviso-propriedade {
    background: #f5f7fa;
    border-left: 4px solid #002f6d;
    padding: 1.3rem 1.5rem;
    margin-bottom: 2rem;
    border-radius: 0 4px 4px 0;
}

.politica-privacidade .aviso-propriedade p:last-child {
    margin-bottom: 0;
}

.politica-privacidade .actualizacao {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e6e9ee;
    color: #6b7280;
    font-size: 14px;
}


/* ── 8. Logotipo no cabecalho ──────────────────────────────────────── */

/* O SVG oficial e quadrado (1500x1500) com o desenho so na faixa
   central. Foi recortado com um viewBox apertado, mas continua a
   precisar de altura definida — um SVG sem width/height ocupa o
   espaco todo que o contentor lhe der. */

.bc-logo img,
.bc_header .bc-logo img,
footer .bc-logo img {
    height: 52px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
}

@media (max-width: 991px) {
    .bc-logo img,
    .bc_header .bc-logo img {
        height: 42px;
        max-width: 190px;
    }
}


/* ── 9. Resumo de pagamento do checkout ──────────────────────────────
   O cliente paga online so a taxa de reserva; o valor do servico e
   liquidado ao fornecedor. E a parte do site com maior potencial de
   mal-entendido, por isso a linha "a pagar agora" destaca-se das
   outras e a nota explicativa fica sempre visivel, nao num tooltip. */

.resumo-pagamento .linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #ececec;
}

.resumo-pagamento .linha .rotulo {
    color: #5e6d77;
    font-size: 15px;
}

.resumo-pagamento .linha .valor {
    font-weight: 600;
    white-space: nowrap;
    color: #002f6d;
}

.resumo-pagamento .linha.total {
    border-bottom: none;
    border-top: 2px solid #002f6d;
    margin-top: 4px;
    padding-top: 14px;
}

.resumo-pagamento .linha.total .rotulo {
    color: #002f6d;
    font-weight: 600;
    font-size: 16px;
}

.resumo-pagamento .linha.total .valor {
    color: #ff9202;
    font-size: 20px;
    font-weight: 700;
}

.resumo-pagamento .nota-pagamento {
    margin: 14px 0 0;
    padding: 12px 14px;
    background: #fff6e8;
    border-left: 3px solid #ff9202;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    color: #5e6d77;
}

/* Aviso de nao-reembolso. Deliberadamente mais sobrio que a nota laranja
   acima: informa sem alarmar, mas nao pode passar despercebido — e a
   condicao que o cliente aceita ao pagar. */

.resumo-pagamento .nota-nao-reembolsavel {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7580;
}

.resumo-pagamento .nota-nao-reembolsavel i {
    color: #ff9202;
    margin-right: 4px;
}


/* ── 10. Formularios do painel do fornecedor ─────────────────────────
   Asterisco de campo obrigatorio, icone de ajuda e orientacao de
   imagem. A marca de obrigatorio nunca vai sozinha na cor: leva
   sempre texto para leitores de ecra (.visually-hidden no rotulo). */

/* Sem `flex-wrap`: um rotulo longo quebra dentro do proprio <label> e a
   bolinha de ajuda fica ao lado dele. Com `wrap`, a bolinha caia sozinha
   para a linha de baixo — em cima do campo. */
.rotulo-campo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.marca-obrigatorio {
    color: #d32f2f;
    font-weight: 700;
    line-height: 1;
}

/* O nome em portugues e o que as vistas do projecto usam — dez ficheiros
   escrevem `visualmente-oculto` e so tres o definiam localmente. Sem regra,
   um rotulo destinado ao leitor de ecra aparecia no ecra: na barra de filtros
   do historico do evento os quatro rotulos empurravam o ultimo campo para uma
   segunda linha, separado do proprio rotulo. As duas escritas valem, para nao
   partir o que ja usa a inglesa. */
.visually-hidden,
.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.icone-ajuda {
    background: none;
    border: 0;
    padding: 0;
    line-height: 1;
    color: #98a2ac;
    cursor: help;
    font-size: 15px;
    transition: color .15s;
}

.icone-ajuda:hover,
.icone-ajuda:focus {
    color: #ff9202;
    outline: none;
}

.icone-ajuda:focus-visible {
    outline: 2px solid #ff9202;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Orientacao de imagem: fica ao lado do campo, antes do upload, que e
   quando ainda ha uma decisao a tomar. */

.ajuda-imagem {
    background: #f7f9fb;
    border-left: 3px solid #cfd8e0;
    border-radius: 0 3px 3px 0;
    padding: 10px 14px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #5e6d77;
}

.ajuda-imagem .onde {
    margin: 0 0 6px;
}

.ajuda-imagem ul {
    margin: 0;
    padding-left: 16px;
}

.ajuda-imagem li {
    margin: 2px 0;
}

.ajuda-imagem strong {
    color: #002f6d;
    white-space: nowrap;
}

/* Campo em falta depois de tentar guardar. O contorno nao chega — a cor
   sozinha exclui quem nao a distingue —, por isso ha tambem a mensagem
   por baixo e o foco salta para o primeiro campo em falta. */

.form-control.campo-em-falta,
.campo-em-falta .form-control {
    border-color: #d32f2f;
    background: #fffafa;
}

.form-control.campo-em-falta:focus {
    box-shadow: 0 0 0 3px #d32f2f26;
}

/* So a borda. A caixa da unidade ("MT", "noites") acompanha a do campo,
   para o par se ler como um controlo so, tambem em falta. */
.campo-com-unidade .campo-em-falta + .unidade,
.campo-par .campo-em-falta + .form-control {
    border-color: #d32f2f;
}

/* Um grupo cujo campo nao se ve — a imagem, o editor de texto, a pesquisa
   de locais — leva a borda no que se ve dentro dele. Ver marcarGrupo() em
   formularios-fornecedor.js. */
.grupo-em-falta .dungdt-upload-box,
.grupo-em-falta .tox-tinymce {
    outline: 2px solid #d32f2f;
    outline-offset: 2px;
    border-radius: 6px;
}

.grupo-em-falta .smart-search-location,
.grupo-em-falta select.form-control {
    border-color: #d32f2f;
    background: #fffafa;
}

.erro-campo {
    display: block;
    color: #d32f2f;
    font-size: 13px;
    margin-top: 4px;
}

/* O separador com campos por preencher fica assinalado, senao o erro
   pode estar num separador fechado e o fornecedor nao o encontra. */

.nav-tabs a.tem-erro {
    color: #d32f2f !important;
    font-weight: 600;
}

.nav-tabs a.tem-erro:after {
    content: "!";
    display: inline-block;
    margin-left: 6px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 11px;
    border-radius: 50%;
    background: #d32f2f;
    color: #fff;
}

/* Em que estado esta cada etapa.

   Era um numero — quantos campos obrigatorios faltavam — e, ao lado de
   titulos que ja comecam por numero, lia-se "1. Hotel 3", "2. Local 2": uma
   sopa de numeros, so nalgumas etapas e sem legenda. Passou a ser um sinal
   (contarSeparadores, formularios-fornecedor.js): um ponto ambar enquanto
   falta alguma coisa, um visto verde quando a etapa esta completa, e nada
   numa etapa sem obrigatorios. Quantos faltam diz-se no title e no
   aria-label. */

.nav-tabs a .falta-conta {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 7px;
    border-radius: 50%;
    background: #ffb020;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.nav-tabs a .falta-conta.feito {
    width: 16px;
    height: 16px;
    background: #2e9d5b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: none;
}

.nav-tabs a .falta-conta.feito::before {
    content: "\2713";
}

/* Um separador com erro ja assinalado manda no aspecto: o erro e mais
   urgente do que o que falta preencher. */
.nav-tabs a.tem-erro .falta-conta {
    background: #d32f2f;
}

/* A barra de gravar, sempre ao alcance.

   O botao vivia no fim de um formulario de seis separadores, alguns
   deles com mais de um ecra de altura. Quem acabava de preencher o
   separador 2 tinha de percorrer o resto da pagina para o encontrar.
   `sticky` e nao `fixed`: acompanha a pagina sem tapar o fim do
   conteudo nem sair do fluxo. */

.barra-gravar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 14px 16px;
    border: 1px solid #e3e7eb;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 -4px 16px -8px rgba(16, 32, 48, .25);
}

.barra-gravar .nota {
    color: #5e6d77;
    font-size: 13px;
    line-height: 1.45;
    max-width: 40ch;
}

.barra-gravar .btn {
    margin-left: auto;
    min-height: 44px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 10px;
}

/* Dois botoes — "Gravar rascunho" e "Gravar e publicar" — encostados a
   direita como o botao unico estava. Cada .btn tem margin-left:auto; dentro
   do grupo isso separava-os, por isso anula-se ali. */
.barra-gravar .accoes {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.barra-gravar .accoes .btn {
    margin-left: 0;
}

@media (max-width: 575.98px) {
    .barra-gravar .btn {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .barra-gravar .accoes {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .barra-gravar { transition: none; }
}

/* Os separadores do formulario passaram de "4. Attributes" a
   "4. Caracteristicas" — 18 caracteres em vez de 13. Com .nav-fill os
   quatro dividem a largura por igual, e em telemovel o texto transbordava
   a caixa. Aqui deixam de ser nav-fill em ecra estreito e passam a
   deslizar na horizontal, que e o comportamento previsivel. */

@media (max-width: 767px) {
    .form-add-service .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .form-add-service .nav-tabs a {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 13px;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* a orientacao de imagem ocupa muito espaco no telemovel;
       fica mais compacta sem perder nenhuma informacao */
    .ajuda-imagem {
        font-size: 12px;
        padding: 8px 10px;
    }
}

/* O rotulo com asterisco e icone nao pode empurrar o campo para baixo
   quando o texto e longo: quebra dentro do proprio rotulo. */
.rotulo-campo {
    max-width: 100%;
    margin-bottom: .5rem;
}

/* O `.rotulo-campo` passou de <label> a caixa que junta o <label> e a
   bolinha de ajuda. A margem que o Bootstrap da ao label vai para a caixa,
   senao o label empurrava a bolinha para cima. */
.rotulo-campo > label {
    margin-bottom: 0;
    min-width: 0;
}

.rotulo-campo > .ajuda {
    flex: none;
}


/* ── 10c. Ajuda que se abre com um toque ─────────────────────────────
   Ver resources/views/components/ajuda.blade.php. Fechada, e uma bolinha
   com "?"; aberta, uma bolha escura por baixo, com seta para a bolinha.
   Escura para se separar do formulario sem competir com ele: e por cima
   dos campos, e nao ao lado. */

.ajuda {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.ajuda-botao {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e3e7eb;
    color: #5e6d77;
    font: 700 12px/1 Poppins, system-ui, sans-serif;
    cursor: pointer;
    transition: background-color .15s ease-out, color .15s ease-out;
}

/* 18px vistos, 44px de alvo: o dedo nao acerta numa bolinha de 18. */
.ajuda-botao::after {
    content: '';
    position: absolute;
    inset: -13px;
}

.ajuda-botao:hover {
    background: #cfd8e0;
    color: #002f6d;
}

/* Aberta: laranja com tinta escura — nunca branco sobre laranja (2,2:1). */
.ajuda-botao[aria-expanded="true"] {
    background: #ff9202;
    color: #2b3138;
}

.ajuda-botao:focus {
    outline: none;
}

.ajuda-botao:focus-visible {
    outline: 3px solid #ff9202;
    outline-offset: 2px;
}

.ajuda-bolha {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 25; /* acima da barra de gravar (20) */
    width: max-content;
    max-width: min(320px, calc(100vw - 24px));
    padding: 10px 12px;
    border-radius: 8px;
    background: #2b3138;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    /* Ao lado de um titulo de painel ou de um <h4>, a bolha herdava as
       maiusculas, o negrito e o espacamento do titulo. */
    text-transform: none;
    letter-spacing: normal;
    box-shadow: 0 8px 24px -8px rgba(16, 32, 48, .45);
    animation: ajuda-entrar .18s cubic-bezier(.16, 1, .3, 1);
}

.ajuda-bolha[hidden] {
    display: none;
}

.ajuda-bolha::before {
    content: '';
    position: absolute;
    top: -6px;
    left: calc(var(--seta, 9px) - 6px);
    border: 6px solid transparent;
    border-top: 0;
    border-bottom-color: #2b3138;
}

.ajuda-bolha p {
    margin: 0 0 6px;
}

.ajuda-bolha p:last-child {
    margin-bottom: 0;
}

/* A orientacao das imagens, quando vive dentro da bolha, perde a caixa
   propria: seria um cartao dentro de um cartao. */
.ajuda-bolha .ajuda-imagem {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font-size: inherit;
}

.ajuda-bolha .ajuda-imagem strong {
    color: #fff;
}

@keyframes ajuda-entrar {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ajuda-bolha { animation: none; }
    .ajuda-botao { transition: none; }
}


/* ── 10b. Ajuda e contador de caracteres ─────────────────────────────

   A biografia do perfil pedia HTML: para ter dois paragrafos era
   preciso escrever `<p>` a mao, e quem nao sabia via o texto todo
   colado numa linha. Passou a ser texto simples, com limites
   anunciados antes de submeter em vez de recusados depois.

   Duas linhas por baixo do campo, e cada uma diz uma coisa
   diferente: a ajuda diz COMO se escreve e nao muda; o contador diz
   QUANTO falta e muda a cada tecla. Trocar as duas de sitio, ou
   junta-las, faz com que a instrucao desapareca no ruido do numero. */

.ajuda-campo {
    display: block;
    margin-top: 6px;
    color: #5e6d77;
    font-size: 13px;
    line-height: 1.45;
}

.conta-caracteres {
    margin: 4px 0 0;
    color: #5e6d77;
    font-size: 12px;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

/* A caminho do minimo. Ambar escuro sobre branco: 4,9:1 — o ambar do
   Bootstrap dava 1,9:1 e nao se lia. */
.conta-caracteres.e-curto {
    color: #8a5200;
    font-weight: 600;
}

/* Perto do fim, e no fim. O aviso so aparece nos ultimos 40
   caracteres: permanente, deixava de ser aviso. */
.conta-caracteres.e-perto {
    color: #8a5200;
}

.conta-caracteres.e-cheio {
    color: #b42318;
    font-weight: 600;
}

/* O campo cresce com o texto ate um limite, em vez de obrigar a
   escrever dentro de uma janela de tres linhas com barra propria. */
textarea.form-control[data-conta] {
    min-height: 8.5rem;
    line-height: 1.55;
    resize: vertical;
}


/* ── 11. Painel do plano do fornecedor ───────────────────────────────
   Tres numeros que o fornecedor consulta com frequencia: anuncios
   usados, destaques usados e quanto falta para expirar. Ficam em
   cartoes largos e legiveis, antes do historico de assinaturas. */

.resumo-plano {
    margin-bottom: 28px;
}

.resumo-plano .cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.resumo-plano .cartao {
    background: #f7f9fb;
    border: 1px solid #e3e7eb;
    border-radius: 6px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.resumo-plano .rotulo {
    font-size: 13px;
    color: #6b7580;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.resumo-plano .valor {
    font-size: 26px;
    font-weight: 700;
    color: #002f6d;
    line-height: 1.15;
}

.resumo-plano .nota {
    font-size: 13px;
    color: #6b7580;
}

.resumo-plano .aviso-limite {
    margin: 16px 0 0;
    padding: 14px 16px;
    background: #fff4f4;
    border: 1px solid #f5c6c6;
    border-radius: 6px;
    font-size: 14px;
    color: #a52020;
}

.resumo-plano .aviso-limite a {
    color: #a52020;
    font-weight: 600;
    text-decoration: underline;
}

.resumo-plano .nota-destaques {
    margin: 14px 0 0;
    font-size: 13px;
    color: #6b7580;
}

/* ── 11b. O cartao de identidade do plano ────────────────────────────
   A pagina chamava-se "Plano actual" e nao dizia qual era: o nome so
   aparecia enterrado numa coluna do historico. Este cartao poe o nome
   como titulo, o preco e o periodo por baixo, e a contagem para o fim
   ao lado, com a accao que ela pede.

   A forma e a do cartao da Carteira, que e a pagina vizinha e responde
   a mesma familia de perguntas. Nao se reutilizam as classes `cart-`:
   sao de la, vivem sob `.cart-painel`, e copia-las era ligar duas
   paginas por um seletor em vez de por uma decisao. */

.plano-cartao {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px 32px;
    margin-bottom: 16px;
    padding: 20px 24px;
    background: #eaf1fb;
    border: 1px solid #c3d8f5;
    border-radius: 10px;
}

.plano-cartao-identidade { min-width: 0; }

.plano-cartao-rotulo {
    display: block;
    color: #5e6d77;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.plano-cartao-nome {
    margin: 4px 0 0;
    color: #002f6d;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
}

.plano-cartao-detalhe {
    margin: 4px 0 0;
    color: #5e6d77;
    font-size: 14px;
    line-height: 1.5;
}

/* O prazo encosta a direita em ecra largo — e o lado da accao — e cai
   para baixo do nome quando a fila deixa de caber. */
.plano-cartao-prazo {
    flex: 0 0 auto;
    text-align: right;
}

.plano-cartao-data {
    margin: 4px 0 0;
    color: #002f6d;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

/* A cor acompanha a palavra e nunca a substitui: o numero de dias esta
   sempre escrito, e um fornecedor que nao distinga o ambar do cinzento
   le a mesma informacao. */
.plano-cartao-dias {
    margin: 2px 0 0;
    color: #5e6d77;
    font-size: 13px;
    font-weight: 600;
}
.plano-cartao-prazo.e-aviso .plano-cartao-dias { color: #8a5200; }
.plano-cartao-prazo.e-mau .plano-cartao-dias { color: #b42318; }

.plano-cartao-prazo .plano-bt-principal { margin-top: 12px; }
.plano-bt--fino { padding: 8px 16px; font-size: 14px; }

@media (max-width: 640px) {
    .plano-cartao { padding: 16px 18px; }
    .plano-cartao-nome { font-size: 24px; }
    /* Alinhado a esquerda com o resto: a direita so faz sentido quando ha
       uma coluna a direita. */
    .plano-cartao-prazo { text-align: left; flex: 1 0 100%; }
}

/* ── 11c. A barra de consumo ─────────────────────────────────────────
   "21 / 25" obriga a fazer a conta; a barra mostra-a feita. E o
   principio do PRODUCT.md — a decisao tem de caber num golpe de vista.

   `aria-hidden` no elemento: o texto por cima ja diz o mesmo, e a um
   leitor de ecra a barra seria a frase repetida. */

.plano-barra {
    display: block;
    height: 6px;
    margin: 8px 0 2px;
    background: #dde4ec;
    border-radius: 999px;
    overflow: hidden;
}
.plano-barra > span {
    display: block;
    height: 100%;
    background: #002f6d;
    border-radius: 999px;
}
.plano-barra.e-aviso > span { background: #ff9202; }
.plano-barra.e-mau > span { background: #b42318; }

/* O contador que nao conta nada — um plano sem destaques — nao imprime
   "0 / 0". Um traco diz a ausencia sem a fingir de numero. */
.resumo-plano .valor.e-nenhum { color: #97a2ad; }
.resumo-plano .cartao .nota + .nota { margin-top: 4px; }

/* ── 11d. O historico das assinaturas ────────────────────────────────
   Era uma tabela de administracao com colunas que mentiam: um "Plan ID"
   igual em todas as linhas, um "Total" contado ao vivo numa linha de ha
   um mes, e uma "Validade" sem principio. Passa a ter a forma das
   tabelas da Carteira, que sao as vizinhas. */

.plano-seccao-titulo {
    margin: 32px 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: #2b3138;
}

.plano-caixa {
    background: #fff;
    border: 1px solid #e3e7eb;
    border-radius: 10px;
    overflow: hidden;
}
.plano-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.plano-tabela { margin: 0; width: 100%; }
.plano-tabela > thead > tr > th {
    padding: 12px 20px;
    background: #f7f9fb;
    border-bottom: 1px solid #e3e7eb;
    color: #5e6d77;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.plano-tabela > tbody > tr > td {
    padding: 14px 20px;
    border-top: 1px solid #eef1f4;
    vertical-align: top;
    font-size: 14px;
}
.plano-tabela > tbody > tr:first-child > td { border-top: 0; }
.plano-tabela .text-right { text-align: right; }

.plano-linha-titulo { display: block; font-weight: 600; color: #2b3138; }
.plano-linha-nota {
    display: block;
    margin-top: 2px;
    color: #5e6d77;
    font-size: 13px;
    line-height: 1.45;
}
.plano-linha-accao { margin-top: 8px; }

.plano-valor {
    font-weight: 700;
    white-space: nowrap;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* Uma assinatura cancelada nao se leu como uma que se pagou. O risco e a
   marca: a cor sozinha nao sobrevive a impressao a preto e branco. */
.plano-valor.e-anulado { color: #97a2ad; text-decoration: line-through; }

.plano-selo {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.plano-selo.e-bom { background: #e6f3ec; color: #157347; }
.plano-selo.e-aviso { background: #fff4e5; color: #8a5200; }
.plano-selo.e-encerrado { background: #eef1f4; color: #5e6d77; }

.plano-bt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #e3e7eb;
    border-radius: 8px;
    background: #fff;
    color: #2b3138;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.plano-bt:hover { background: #f7f9fb; }
.plano-bt:focus-visible { outline: 3px solid #002f6d; outline-offset: 2px; }
.plano-bt--perigo { color: #b42318; border-color: #f3c2c2; }
.plano-bt--perigo:hover { background: #fdecea; }

/* Num ecra estreito a tabela e uma pilha de fichas, com o rotulo de cada
   celula a esquerda — o mesmo tratamento das tabelas da Carteira. */
@media (max-width: 640px) {
    .plano-tabela > thead { position: absolute; width: 1px; height: 1px;
        clip-path: inset(50%); overflow: hidden; }
    .plano-tabela > tbody { display: block; }
    .plano-tabela > tbody > tr { display: block; padding: 12px 16px; }
    .plano-tabela > tbody > tr + tr { border-top: 1px solid #e3e7eb; }
    .plano-tabela > tbody > tr > td { display: block; padding: 4px 0; border: 0; }
    .plano-tabela > tbody > tr > td::before {
        content: attr(data-rotulo);
        display: block;
        color: #5e6d77;
        font-size: 12px;
        font-weight: 600;
    }
    .plano-tabela > tbody > tr > td:first-child::before { display: none; }
    .plano-tabela .plano-valor { text-align: left; }
}

/* Etiqueta de destaque no cartao publico. O tema ja tem .featured na
   listagem do fornecedor; aqui garante-se que tambem se ve nas
   pesquisas, que e onde ela tem valor comercial. */

.item-loop .featured,
.item-loop-wrap .featured {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: #ff9202;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 3px;
    line-height: 1.4;
}


/* ── 11b. Cabecalho e estado vazio do plano ──────────────────────────

   O botao de ver os planos so aparecia quando alguma coisa corria mal:
   dentro do aviso de limite, dentro do aviso de expiracao, ou na linha
   de um plano expirado. Quem tinha o plano em ordem — que e quem pode
   subir de plano — nao tinha caminho nenhum para os comparar.

   E sem plano nenhum a pagina era uma tabela vazia a dizer "No Items". */

.plano-topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.plano-topo h2 {
    margin: 0;
}

.plano-topo .plano-bt-principal {
    margin-left: auto;
}

.plano-bt-principal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid #002f6d;
    border-radius: 10px;
    background: #002f6d;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.plano-bt-principal:hover,
.plano-bt-principal:focus {
    background: #00224f;
    border-color: #00224f;
    color: #fff;
    text-decoration: none;
}

.plano-bt-principal:focus-visible {
    outline: 3px solid #002f6d;
    outline-offset: 2px;
}

.plano-vazio {
    margin-bottom: 28px;
    padding: 40px 20px;
    border: 1px solid #e3e7eb;
    border-radius: 10px;
    background: #fff;
    text-align: center;
    color: #5e6d77;
}

.plano-vazio i {
    display: block;
    margin-bottom: 10px;
    font-size: 32px;
    opacity: .45;
}

.plano-vazio strong {
    display: block;
    margin-bottom: 6px;
    color: #2b3138;
    font-size: 16px;
}

.plano-vazio p {
    max-width: 46ch;
    margin: 0 auto 18px;
    line-height: 1.55;
}

@media (max-width: 575.98px) {
    .plano-topo .plano-bt-principal {
        margin-left: 0;
        width: 100%;
    }
}

/* ── 12. Comparacao de planos ────────────────────────────────────────
   A pagina vendia e estava desenhada como um painel: tres caixas iguais,
   o plano recomendado marcado por uma moldura mas nao favorecido, e o
   preco — o numero que devia carregar a pagina — com o peso de uma
   estatistica. Nada dizia por onde comecar a olhar.

   O que se amplifica e o que a pagina **ja tinha**: o laranja como marca
   do recomendado, e o marinho da marca. Nenhuma cor nova, nenhum tipo de
   letra novo, nenhum efeito emprestado. O recomendado passa a marinho
   cheio e tudo o resto cala-se a volta dele — se todos gritassem, a
   pagina ficava mais plana do que estava.

   As alturas continuam iguais e as linhas continuam a alinhar: o autor
   original tinha razao nisso, e o foco ganha-se pela superficie e nao
   pelo tamanho. As duas coisas nao estavam em conflito; so nunca tinham
   sido tentadas ao mesmo tempo. */

/* ── o separador mensal / anual ──────────────────────────────────────
   Duas ligacoes verdadeiras dentro de uma pista, e nao um interruptor:
   cada ciclo tem endereco proprio e funciona sem JavaScript. A pista e a
   mesma forma que as abas da Carteira usam — o sistema ja a tinha. */

.ciclo-planos {
    display: inline-flex;
    gap: 4px;
    margin: 28px auto 0;
    padding: 4px;
    background: #eef2f7;
    border-radius: 999px;
}
/* Centrada sem `text-align` no pai: o pai e a coluna toda da pagina. */
.pricing-section .sec-title + .ciclo-planos,
.pricing-section .ciclo-planos { display: flex; width: fit-content; }

.ciclo-opcao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 20px;
    border-radius: 999px;
    color: #5e6d77;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.ciclo-opcao:hover { color: #002f6d; text-decoration: none; }
.ciclo-opcao.e-activa {
    background: #fff;
    color: #002f6d;
    box-shadow: 0 1px 3px rgba(0, 47, 109, .14);
}
.ciclo-opcao:focus-visible { outline: 3px solid #002f6d; outline-offset: 2px; }

/* A poupanca e calculada da diferenca real entre doze meses e o preco
   anual — nunca uma promessa escrita a mao. Carvao sobre laranja: branco
   sobre laranja da 2,24:1 e o DESIGN.md proibe-o pelo nome. */
.ciclo-poupanca {
    padding: 2px 8px;
    border-radius: 999px;
    background: #ff9202;
    color: #2b3138;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.comparacao-planos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
    gap: 20px;
    margin: 32px 0 8px;
    align-items: stretch;
}

.comparacao-planos .plano {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e3e7eb;
    border-radius: 14px;
    padding: 30px 26px 26px;
    /* Alinhado a esquerda, e nao meio centrado meio nao.
       Titulo, preco e numeros estavam centrados e os topicos a esquerda:
       era esse desencontro que fazia o cartao parecer indeciso entre um
       cartaz e uma lista. A comparacao le-se a descer tres colunas, e
       para isso as tres precisam da mesma margem de partida. */
    text-align: left;
    transition: transform .2s cubic-bezier(.16, 1, .3, 1),
                box-shadow .2s cubic-bezier(.16, 1, .3, 1);
}

/* Uma proposta em que se pode carregar levanta-se ao passar por cima. O
   plano em vigor nao: nao ha nada para decidir nele. Sombra com desvio e
   desfoque — um halo sem desvio e decoracao, nao profundidade. */
.comparacao-planos .plano:not(.actual):hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 47, 109, .12);
}

/* ── o recomendado: marinho cheio, e o unico assim ─────────────────── */
.comparacao-planos .plano.recomendado {
    background: #002f6d;
    border-color: #002f6d;
}
.comparacao-planos .plano.recomendado .nome,
.comparacao-planos .plano.recomendado .preco,
.comparacao-planos .plano.recomendado .quanto { color: #fff; }
/* Sobre uma superficie de cor, o texto secundario tinge-se **da mesma
   cor** e nunca de cinzento: um cinzento por cima de marinho le-se como
   sujidade. */
.comparacao-planos .plano.recomendado .unidade,
.comparacao-planos .plano.recomendado .oque,
.comparacao-planos .plano.recomendado .detalhes { color: #b9cbe6; }
.comparacao-planos .plano.recomendado .detalhes strong { color: #fff; }
.comparacao-planos .plano.recomendado .numeros {
    border-color: rgba(255, 255, 255, .16);
}
/* O botao inverte-se para nao desaparecer dentro do cartao. */
.comparacao-planos .plano.recomendado .plano-accao-bt {
    background: #fff;
    border-color: #fff;
    color: #002f6d;
}
.comparacao-planos .plano.recomendado .plano-accao-bt:hover,
.comparacao-planos .plano.recomendado .plano-accao-bt:focus {
    background: #eaf1fb;
    border-color: #eaf1fb;
    color: #002f6d;
}
.comparacao-planos .plano.recomendado .plano-accao-bt:focus-visible {
    outline-color: #fff;
}

/* O plano em vigor e um **estado**, e nao uma oferta: moldura da marca,
   fundo branco, e o botao calado. Deixa de competir com o recomendado. */
.comparacao-planos .plano.actual {
    border-color: #002f6d;
    box-shadow: inset 0 0 0 1px #002f6d;
}

/* ── a etiqueta ────────────────────────────────────────────────────── */
.comparacao-planos .etiqueta {
    position: absolute;
    top: -13px;
    left: 26px;
    background: #ff9202;
    /* Carvao sobre laranja, e nao branco.
       Estava branco: 2,24:1, abaixo de qualquer limiar. O DESIGN.md
       proibe-o pelo nome — "Nunca branco sobre laranja" — e manda o
       estado de atencao inverter a tinta. Assim sao 5,86:1. */
    color: #2b3138;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 5px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

.comparacao-planos .nome {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5e6d77;
    margin: 0 0 10px;
}

/* ── o preco, ao peso que lhe pertence ─────────────────────────────── */
.comparacao-planos .preco-linha {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.comparacao-planos .preco {
    font-size: 44px;
    font-weight: 700;
    color: #002f6d;
    line-height: 1;
    letter-spacing: -.02em;
    /* Numeros de largura fixa: tres precos em tres colunas tem de alinhar
       algarismo com algarismo para se compararem. */
    font-variant-numeric: tabular-nums;
}

/* A validade era uma linha cinzenta por baixo do preco, a ocupar o lugar
   de uma frase. E uma unidade — vive na mesma linha, como "por mes". */
.comparacao-planos .unidade {
    font-size: 14px;
    font-weight: 500;
    color: #5e6d77;
}

/* ── os numeros, a espinha do cartao ───────────────────────────────── */
.comparacao-planos .numeros {
    list-style: none;
    margin: 0 0 20px;
    padding: 18px 0;
    border-top: 1px solid #e3e7eb;
    border-bottom: 1px solid #e3e7eb;
}

.comparacao-planos .numeros li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
}

/* O icone do que se conta. Desenhado, com a mesma espessura do visto dos
   topicos: uma familia so, e nao dependente da folha de icones do tema
   ter chegado. */
.comparacao-planos .icone {
    flex: 0 0 auto;
    display: inline-flex;
    color: #9fb3cc;
}
.comparacao-planos .icone svg { width: 18px; height: 18px; display: block; }
.comparacao-planos .plano.recomendado .icone { color: #7d9dc7; }
/* Zero destaques: o icone apaga-se com o numero, para a linha inteira
   dizer a mesma coisa. */
.comparacao-planos .numeros li.e-nenhum .icone { color: #d3dae2; }
.comparacao-planos .numeros li.e-nenhum .quanto { color: #97a2ad; }
.comparacao-planos .plano.recomendado .numeros li.e-nenhum .icone,
.comparacao-planos .plano.recomendado .numeros li.e-nenhum .quanto { color: #5b7ba6; }

.comparacao-planos .quanto {
    font-size: 26px;
    font-weight: 700;
    color: #002f6d;
    line-height: 1.1;
    /* Largura fixa para os tres cartoes alinharem os algarismos entre si:
       e a leitura que a pagina existe para permitir. */
    min-width: 1.9em;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.comparacao-planos .oque {
    font-size: 14px;
    color: #5e6d77;
    line-height: 1.35;
}

.comparacao-planos .detalhes {
    font-size: 14px;
    color: #5e6d77;
    line-height: 1.55;
    margin-bottom: 22px;
}

/* A escada: o que este plano herda do anterior.

   Dito uma vez, em cabecalho, para o que e novo poder aparecer por
   extenso por baixo sem a mesma frase escrita tres vezes. */
.comparacao-planos .herda {
    margin: 0 0 12px;
    color: #5e6d77;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}
.comparacao-planos .plano.recomendado .herda { color: #b9cbe6; }

/* Os topicos deixam de ser bolinhas e passam a vistos.

   O HTML vem do administrador — nao ha onde enfiar um `<i>` — por isso o
   icone e uma mascara SVG no `::before`: desenhada, com a mesma espessura
   do traco dos contadores, e a herdar a cor da linha. Um glifo Unicode
   (✓) seria um caracter a fazer de icone, e le-se diferente em cada
   sistema. */
.comparacao-planos .detalhes ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.comparacao-planos .detalhes li {
    position: relative;
    margin: 8px 0;
    padding-left: 26px;
}

.comparacao-planos .detalhes li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .34em;
    width: 15px;
    height: 15px;
    background: currentColor;
    opacity: .75;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5 11-11'/%3E%3C/svg%3E") center / contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5 11-11'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* O plano que so se vende ao mes, quando se esta a ver os anuais.
   Imprimir "0 MT" seria oferece-lo de graca; esconder o cartao seria
   tira-lo da comparacao. Diz-se, e fica. */
.comparacao-planos .so-mensal {
    margin: -14px 0 20px;
    color: #8a5200;
    font-size: 13px;
    font-weight: 600;
}
.comparacao-planos .plano.recomendado .so-mensal { color: #ffc27a; }

/* o botao encosta ao fundo para ficar alinhado entre cartoes */
.comparacao-planos .accao { margin-top: auto; }

/* ── 12b. O botao de cada cartao ─────────────────────────────────────
   Os tres saiam azul-ceu: eram `.btn-primary`, a cor que o Bootstrap do
   tema traz, no meio de uma pagina onde tudo o resto e marinho. O
   DESIGN.md reserva o marinho as accoes primarias e o laranja aos
   acentos; aquele azul nao e de lado nenhum.

   O cartao do plano em vigor leva a variante calada: nao vende nada, so
   leva a quem gere o que ja se tem. */

.plano-accao-bt {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 13px 18px;
    border: 1px solid #002f6d;
    border-radius: 10px;
    background: #002f6d;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.plano-accao-bt:hover,
.plano-accao-bt:focus {
    background: #00224f;
    border-color: #00224f;
    color: #fff;
    text-decoration: none;
}
.plano-accao-bt:focus-visible { outline: 3px solid #002f6d; outline-offset: 2px; }

.plano-accao-bt--quieto {
    background: #fff;
    color: #002f6d;
}
.plano-accao-bt--quieto:hover,
.plano-accao-bt--quieto:focus {
    background: #eaf1fb;
    border-color: #002f6d;
    color: #002f6d;
}

/* Ate quando vale o plano em vigor. Quem chega aqui pelo "Renovar ou
   mudar de plano" da Carteira traz essa pergunta na cabeca. */
.comparacao-planos .ate-quando {
    margin: 0 0 10px;
    color: #5e6d77;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* ── 12e. Assinar sem sair da pagina ─────────────────────────────────
   O formulario e o mesmo que a pagina inteira desenha; muda o sitio onde
   aparece. O resumo a cabeca existe porque um modal que abre num "escolha
   o meio de pagamento" nao diz de que nem por quanto. */

.plano-modal .modal-body { padding: 20px 24px 24px; }
/* O titulo da seccao de pagamento vem do tema dimensionado para uma pagina
   inteira. Dentro do modal ficava maior do que o titulo do proprio modal —
   uma sub-seccao a pesar mais do que a coisa em que esta. */
.plano-modal .form-section-title {
    margin: 0 0 10px;
    color: #5e6d77;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.plano-modal .modal-body[aria-busy="true"] { min-height: 140px; }

.assinar-resumo {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e3e7eb;
}
.assinar-plano { font-size: 15px; font-weight: 700; color: #002f6d; }
.assinar-preco {
    font-size: 22px;
    font-weight: 700;
    color: #2b3138;
    font-variant-numeric: tabular-nums;
}
.assinar-preco .unidade { font-size: 13px; font-weight: 500; color: #5e6d77; }

/* A caixa dos termos e uma fila que se carrega, como as do modal das contas
   de recebimento: uma linha de texto com um quadradinho a frente le-se como
   texto e nao como um controlo. */
.assinar-termos {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0 0;
    padding: 12px 14px;
    border: 1px solid #e3e7eb;
    border-radius: 9px;
    background: #f7f9fb;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    cursor: pointer;
}
.assinar-termos:hover { border-color: #c3d8f5; background: #fff; }
.assinar-termos:has(input:checked) { border-color: #9dbdea; background: #fff; }
.assinar-termos:focus-within { outline: 3px solid #002f6d; outline-offset: 2px; }
.assinar-termos input { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin: 2px 0 0; }
.assinar-termos a { color: #002f6d; font-weight: 600; text-decoration: underline; }

/* O bloco dos meios de pagamento vem do modulo de reservas e traz a sua
   propria folha — bem desenhada, com marcas de radio, alvos de 56px e o
   logotipo travado em altura. O que faltava nao era estilo: era a folha
   chegar. Ia por `@push('css')`, que so o `@stack` do layout esvazia, e o
   fragmento do modal nao tem layout nenhum. Passou a `@once` na propria
   partial. Aqui nao se repete nada do que ela ja faz. */

/* O campo do numero, centrado.

   Dentro do modal a fila do meio de pagamento e estreita, e o campo
   encostado a esquerda com o resto centrado lia-se como se tivesse ficado
   para tras. Centrado, a linha inteira — rotulo, campo e a frase que o
   explica — le-se como um bloco. `!important` nao: e mais especifico do
   que a regra da partial, que e `.mpesa-campo input`. */
.plano-modal .mpesa-campo { text-align: center; }
.plano-modal .mpesa-campo label { display: block; }
.plano-modal .mpesa-campo input {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    letter-spacing: .08em;
}
.plano-modal .mpesa-campo small { max-width: 32ch; margin-left: auto; margin-right: auto; }



/* ═══════════════════════════════════════════════════════════════════
   Notificacoes — a lista e o menu da campainha
   ═══════════════════════════════════════════════════════════════════

   ⚠️ **Nao havia uma linha de CSS para o estado por ler.** A marcacao ja
   punha `.active` no que ainda nao foi lido — as duas vistas fazem-no —
   e nenhuma folha lhe dava forma: 11 por ler no meio de 28, todas
   exactamente iguais. A campainha dizia "5" e a lista nao mostrava
   quais.

   A diferenca nao e so cor (DESIGN.md): a por ler tem fundo branco
   contra o cinzento das outras, um ponto azul antes do texto e o titulo
   mais escuro. Quem nao distingue a cor ve o ponto e o peso.
   ═══════════════════════════════════════════════════════════════════ */

#bc_notify li.notification,
.dropdown-list-items li.notification {
    position: relative;
    background: #f7f9fb;
    border-bottom: 1px solid #e9edf1;
}
#bc_notify li.notification:last-child,
.dropdown-list-items li.notification:last-child { border-bottom: 0; }

/* Lida: recolhe. Continua a ler-se, mas nao pede nada. */
#bc_notify li.notification a,
.dropdown-list-items li.notification a { color: #55636d; font-weight: 500; }

/* Por ler: sai do fundo e ganha o ponto. */
#bc_notify li.notification.active,
.dropdown-list-items li.notification.active { background: #fff; }

#bc_notify li.notification.active a,
.dropdown-list-items li.notification.active a { color: #002f6d; font-weight: 700; }

#bc_notify li.notification.active::before,
.dropdown-list-items li.notification.active::before {
    content: '';
    position: absolute; left: .5rem; top: 1.35rem;
    width: .4375rem; height: .4375rem;
    border-radius: 50%; background: #2e7de0;
}

/* O cabecalho do menu da campainha.

   O titulo e a accao viviam colados: o `float` do tema punha-os na mesma
   linha sem nada entre eles, e "Notificacoes (5)Marcar todas como lidas"
   lia-se como uma frase so. Duas pontas de uma barra, com ar no meio. */
.dropdown-notifications .dropdown-toolbar {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; padding: .75rem 1rem;
    border-bottom: 1px solid #e9edf1;
}
.dropdown-notifications .dropdown-toolbar-title {
    order: 0; margin: 0; font-size: .9375rem; font-weight: 700; color: #002f6d;
}
.dropdown-notifications .dropdown-toolbar-actions { order: 1; float: none; }
.dropdown-notifications .dropdown-toolbar-actions a {
    font-size: .8125rem; font-weight: 600; color: #2e7de0; white-space: nowrap;
}

/* O carimbo do tempo e contexto, e nao a mensagem. */
#bc_notify .notification-meta .timestamp,
.dropdown-list-items .notification-meta .timestamp {
    color: #7a8792; font-size: .78125rem;
}

/* O filtro escolhido, na coluna da esquerda. Estava a cinzento como os
   outros dois: nada dizia em que lista se esta. */
#bc_notify .col-3 li.notification.active {
    background: #e8f0fb;
    box-shadow: inset 3px 0 0 #002f6d;
}
#bc_notify .col-3 li.notification.active::before { display: none; }

/* A aceitacao dos termos, dita onde se decide — e nao numa caixa a mais
   entre a decisao e o pagamento. */
.assinar-termos-nota {
    margin: 10px 0 0;
    color: #5e6d77;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}
.assinar-termos-nota a { color: #002f6d; font-weight: 600; text-decoration: underline; }

/* ── A espera, depois de confirmar ───────────────────────────────────
   O intervalo entre confirmar e o navegador sair desta pagina. Num
   M-Pesa e longo de proposito: o pedido fica aberto enquanto o cliente
   confirma com o PIN. Um ecra parado durante esse tempo le-se como
   avaria — e quem o le assim carrega outra vez. */

.assinar.esta-a-processar .pagamento,
.assinar.esta-a-processar .assinar-termos-nota {
    opacity: .5;
    pointer-events: none;
}

.assinar .plano-accao-bt.a-esperar {
    background: #00224f;
    border-color: #00224f;
    cursor: progress;
}

.assinar-espera {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 16px;
    border: 1px solid #c3d8f5;
    border-radius: 10px;
    background: #eaf1fb;
}
.assinar-espera[hidden] { display: none; }
.assinar-espera p { margin: 0; font-size: 13px; line-height: 1.5; color: #5e6d77; }
.assinar-espera strong { display: block; color: #002f6d; font-size: 14px; }

/* O sinal e a unica coisa a mover-se. Um anel a girar, desenhado com
   `border` — sem imagem a carregar num momento em que a rede ja esta
   ocupada com o pagamento. */
.assinar-sinal {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: 2.5px solid #c3d8f5;
    border-top-color: #002f6d;
    border-radius: 50%;
    animation: assinar-girar 800ms linear infinite;
}
@keyframes assinar-girar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    /* Parado, o anel deixa de girar e fica a marca: a informacao mantem-se,
       o que se perde e o embelezamento. */
    .assinar-sinal { animation: none; border-top-color: #002f6d; }
}

.assinar-recaptcha { margin-top: 16px; }
.assinar .plano-accao-bt { margin-top: 18px; }

/* A rede de Pemba falha a meio. O erro nao deita fora o caminho: a saida e a
   ligacao normal, que recarrega a pagina e funciona sempre. */
.assinar-erro { padding: 24px 4px; text-align: center; }
.assinar-erro p { margin: 0 auto 16px; max-width: 34ch; color: #5e6d77; line-height: 1.55; }
.assinar-erro .plano-accao-bt { display: inline-block; width: auto; padding: 11px 22px; }

/* ── 12c. Sem planos para este papel ─────────────────────────────────
   Era um titulo por cima de uma grelha vazia: nada dizia se estava
   avariada, se ainda nao havia planos, nem a quem perguntar — e e a
   pagina para onde a Carteira e o painel mandam quem quer publicar. */

.planos-vazio {
    max-width: 520px;
    margin: 32px auto 0;
    padding: 40px 24px;
    background: #f7f9fb;
    border: 1px solid #e3e7eb;
    border-radius: 14px;
    text-align: center;
    color: #5e6d77;
}
.planos-vazio i { display: block; font-size: 32px; margin-bottom: 12px; opacity: .45; }
.planos-vazio strong { display: block; margin-bottom: 6px; font-size: 16px; color: #2b3138; }
.planos-vazio p { margin: 0 auto 20px; max-width: 44ch; line-height: 1.55; }
.planos-vazio .plano-accao-bt { display: inline-block; width: auto; padding: 12px 24px; }

/* As verdades comuns a todos os planos, num sitio so. Estavam repetidas
   palavra por palavra em dois cartoes, e uma delas ja estava aqui. */
.notas-planos {
    margin: 30px auto 0;
    max-width: 620px;
    text-align: center;
}
.notas-planos p {
    margin: 0 0 6px;
    color: #6b7580;
    font-size: 14px;
    line-height: 1.55;
}
.notas-planos p:last-child { margin-bottom: 0; }

.nota-destaques-planos {
    text-align: center;
    font-size: 14px;
    color: #6b7580;
    margin: 28px auto 0;
    max-width: 640px;
}

/* ── 12d. As superficies que o navegador desenha ─────────────────────
   Seleccao, cursor e anel de foco vem com cores que nao sao de sistema
   nenhum. Sao o sinal mais barato de que a pagina foi construida e nao
   montada, e o que mais se salta. */

.pricing-section ::selection { background: #ff9202; color: #2b3138; }
.pricing-section { caret-color: #002f6d; }

@media (prefers-reduced-motion: reduce) {
    .comparacao-planos .plano,
    .plano-accao-bt { transition: none; }
    .comparacao-planos .plano:not(.actual):hover { transform: none; }
}

@media (max-width: 600px) {
    .comparacao-planos { gap: 28px; margin-top: 34px; }
    .comparacao-planos .preco { font-size: 38px; }
}

/* Aviso de plano prestes a expirar, no painel. Laranja e nao vermelho:
   nao e um erro nem uma falha do fornecedor — e um prazo a aproximar-se,
   com solucao a um clique. Vermelho seria alarme desproporcionado. */

.resumo-plano .aviso-expiracao {
    margin: 16px 0 0;
    padding: 14px 16px;
    background: #fff6e8;
    border: 1px solid #ffd9a0;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.6;
    color: #8a5200;
}

.resumo-plano .aviso-expiracao strong {
    color: #7a4200;
}

.resumo-plano .aviso-expiracao a {
    color: #7a4200;
    font-weight: 600;
    text-decoration: underline;
    white-space: nowrap;
}

/* Grupos da pagina de verificacao. Separa o que e obrigatorio para
   qualquer fornecedor do que so se aplica a empresas — sem isso, quem
   trabalha em nome individual nao percebia porque lhe pediam alvara. */

.grupo-verificacao {
    margin: 26px 0 2px;
    font-size: 17px;
    font-weight: 700;
    color: #002f6d;
}

.grupo-verificacao:first-of-type {
    margin-top: 6px;
}

.grupo-nota {
    margin: 0 0 18px;
    font-size: 14px;
    color: #6b7580;
}

/* A faixa do topo sem fotografia de capa.

   O botao do video deixou de depender do `banner_image_id` — os dois campos
   sao independentes no painel. Sem capa nao ha heroi a desenhar: fica so a
   fila do botao, encostada ao conteudo, sem os 90px de altura nem o fundo
   escuro que so fazem sentido por cima de uma imagem. */
.bc_banner.sem-capa {
    background: none;
    padding: 14px 0 0;
    min-height: 0;
}

.bc_banner.sem-capa .btn-transparent {
    border-color: #d8dee4;
    color: #2b3138;
}

.bc_banner.sem-capa .btn-transparent svg g { fill: #2b3138; }

/* ── 13. Desbloqueio de contacto do proprietario (imoveis) ───────────
   O bloco vive na coluna lateral da ficha, que tem 207px uteis. Tudo
   aqui esta dimensionado para essa largura: texto curto, um botao de
   uma linha, e o preco e o "uma vez" na mesma linha. A primeira versao
   foi escrita para coluna larga e o botao ocupava quatro linhas. */

.contacto-proprietario {
    border: 1px solid #e3e7eb;
    border-radius: 8px;
    padding: 18px 18px 16px;
    /* O bloco do proprietario (.owner-info) por cima nao traz margem
       inferior: sem esta margem de topo, os dois ficavam colados. */
    margin: 20px 0;
    background: #fff;
}

.contacto-proprietario.aberto {
    border-color: #b5dcbd;
    background: #f7fbf8;
}

.contacto-proprietario h4 {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    color: #002f6d;
}

.contacto-proprietario .oque-recebe {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.45;
    color: #5e6d77;
}

/* Preco e periodicidade lado a lado: em duas linhas, o "uma vez"
   parecia um segundo valor. */
/* O preco, com nome por cima.

   Era so o valor e o "uma vez" na mesma linha. Numa pagina onde ha renda,
   caucao e meses adiantados, um numero sem etiqueta e o primeiro a ser
   confundido com outro: agora diz-se do que e, e so depois quanto. */
.contacto-proprietario .preco-desbloqueio {
    display: block;
    padding: 12px 0;
    border-top: 1px solid #e3e7eb;
    border-bottom: 1px solid #e3e7eb;
    margin-bottom: 14px;
}

.contacto-proprietario .rot-taxa {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a949d;
}

/* Valor e periodicidade lado a lado: em duas linhas, o "pagamento unico"
   parecia um segundo valor. O «?» encosta a direita — e sozinho, sem o
   `wrap` a puxa-lo para baixo do valor quando a coluna aperta. */
.contacto-proprietario .linha-taxa {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

/* O que quebra e o texto, e nao a linha: com `wrap` no pai, o «?» caia
   sozinho para baixo do valor assim que "pagamento unico" enchia a fila. */
.contacto-proprietario .texto-taxa {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.contacto-proprietario .linha-taxa .ajuda {
    flex: 0 0 auto;
    margin-left: auto;
}

/* O «?» alinha com a linha do texto e nao com a base dela: numa linha onde o
   vizinho tem 24px, `baseline` empurrava-o para o fundo. */
.contacto-proprietario .aviso-directo .ajuda {
    vertical-align: middle;
    margin-left: 4px;
}

.contacto-proprietario .valor {
    font-size: 24px;
    font-weight: 700;
    color: #002f6d;
    white-space: nowrap;
}

.contacto-proprietario .uma-vez {
    font-size: 13px;
    color: #6b7580;
    white-space: nowrap;
}

.contacto-proprietario .botao-desbloquear {
    width: 100%;
    /* Marinho, como o "Reservar agora" dos outros serviços (28-09-2026): era
       branco sobre laranja, 2,24:1, que o DESIGN.md proíbe pelo nome. */
    background: #002f6d;
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 13px 12px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
}

.contacto-proprietario .botao-desbloquear:hover {
    background: #00224f;
}

/* O botao a trabalhar. Entre carregar e a pagina mudar ha um pedido ao
   servidor; um botao que nao muda convida a segundo clique, e um segundo
   clique e uma segunda marcacao. */
.contacto-proprietario .botao-desbloquear:disabled,
.contacto-proprietario .botao-desbloquear.a-trabalhar {
    background: #5a6f8f;
    cursor: not-allowed;
}
.contacto-proprietario .botao-desbloquear:disabled:hover,
.contacto-proprietario .botao-desbloquear.a-trabalhar:hover { background: #5a6f8f; }

/* Alvo de toque e foco visivel: e o botao que move dinheiro. */
.contacto-proprietario .botao-desbloquear { min-height: 48px; }
.contacto-proprietario .botao-desbloquear:focus-visible {
    outline: 3px solid #002f6d;
    outline-offset: 2px;
}

/* A data por extenso, debaixo do campo. Confirma o que o campo mostra em
   numeros — e diz o dia da semana, que e o que decide se a pessoa pode ir. */
.contacto-proprietario .data-por-extenso {
    margin: 5px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #002f6d;
    line-height: 1.35;
}

/* E o aviso, quando o dia escolhido e um em que ninguem abre a porta. */
.contacto-proprietario .dia-fechado {
    margin: 6px 0 0;
    padding: 8px 10px;
    border-radius: 6px;
    background: #fdf1ef;
    border: 1px solid #f1c4bf;
    font-size: 13px;
    line-height: 1.45;
    color: #b42318;
}

/* Rotulo em cima, valor em baixo: em 207px, duas colunas espremiam o
   numero de telefone e o e-mail ate quebrarem a meio. */
.contacto-proprietario .dados {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}

.contacto-proprietario .dados td {
    display: block;
    padding: 0;
    border: 0;
}

.contacto-proprietario .dados tr {
    display: block;
    padding: 9px 0;
    border-bottom: 1px solid #e3e7eb;
}

.contacto-proprietario .dados tr:last-child {
    border-bottom: none;
}

.contacto-proprietario .dados .rot {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a949d;
    margin-bottom: 1px;
}

.contacto-proprietario .dados .val {
    font-size: 15px;
    font-weight: 600;
    color: #2b3138;
    word-break: break-word;
}

.contacto-proprietario .dados .val a {
    color: #002f6d;
}

.contacto-proprietario .botao-zap {
    display: block;
    text-align: center;
    background: #25d366;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.contacto-proprietario .nota-aberto {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #1e6b2a;
}

/* O aviso de que a renda nao passa pela plataforma fica sempre visivel,
   antes e depois do pagamento. E a expectativa que, se falhar, gera a
   reclamacao mais cara. */
/* O aviso de que a renda nao passa pela plataforma fica sempre visivel,
   antes e depois do pagamento — e a expectativa que, se falhar, gera a
   reclamacao mais cara. Passou de duas frases inteiras a duas palavras mais
   o «?»: quatro linhas de cinzento debaixo do botao nao se leem, e empurram
   o botao para cima do dobro da pagina. */
.contacto-proprietario .aviso-directo {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #8a949d;
}

/* Campos da marcacao de visita: dia e hora, dentro do mesmo bloco
   estreito. Rotulo pequeno em cima do campo, como na tabela de
   contactos — em 207px, rotulo ao lado nao cabe. */

.contacto-proprietario .rot-campo {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a949d;
    margin: 10px 0 3px;
}

.contacto-proprietario .campo-visita {
    width: 100%;
    border: 1px solid #d8dee4;
    border-radius: 5px;
    padding: 9px 10px;
    font-size: 15px;
    color: #2b3138;
    background: #fff;
}

.contacto-proprietario .campo-visita:focus {
    outline: none;
    border-color: #ff9202;
    box-shadow: 0 0 0 3px #ff920226;
}

/* Os dias em que ha visitas, com um sinal a dizer "aberto".

   Era uma linha de texto cinzento entre dois campos e o preco — lia-se como
   letra pequena legal e nao como o que e: a resposta a "posso ir quando?". O
   ponto verde e o mesmo sinal do estado disponivel usado no resto do painel. */
.contacto-proprietario .dias-de-visita {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 10px 0 14px;
    font-size: 13px;
    line-height: 1.45;
    color: #46525c;
}

.contacto-proprietario .sinal-aberto {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2e7d32;
    transform: translateY(-1px);
}

/* Alvo de toque nos campos: 44px e o minimo do PRODUCT.md, e estes sao
   escolhidos com o polegar num telemovel barato. */
.contacto-proprietario .campo-visita {
    min-height: 44px;
}

/* O estado ja marcado: o visto antes do titulo, para quem volta a esta
   pagina semanas depois saber num relance que ja tratou disto. */
.contacto-proprietario .titulo-marcada {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.contacto-proprietario .titulo-marcada .visto {
    flex: 0 0 auto;
    color: #1e6b2a;
    font-size: 15px;
    line-height: 1;
}

.contacto-proprietario .contacto-disponivel {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.45;
    color: #1e6b2a;
}

/* A data marcada, em destaque no estado ja marcado. */
.contacto-proprietario .data-visita {
    margin: 0 0 14px;
    font-size: 22px;
    font-weight: 700;
    color: #002f6d;
    line-height: 1.2;
}

.contacto-proprietario .data-visita span {
    font-size: 15px;
    font-weight: 600;
    color: #5e6d77;
    margin-left: 4px;
}

.contacto-proprietario .botao-comprovativo {
    display: block;
    text-align: center;
    background: #002f6d;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    padding: 12px;
    border-radius: 6px;
}

/* ─────────────────────────────────────────────────────────────────
   O preco, na coluna da direita.

   Sem caixa: encosta ao bloco de marcacao logo abaixo, de que e o
   cabecalho de facto. Uma segunda caixa por cima da primeira dava
   duas molduras coladas a dizer a mesma coisa.
   ───────────────────────────────────────────────────────────────── */
.preco-imovel {
    margin: 20px 0 -6px;
    padding: 0 2px;
}

.preco-imovel .rotulo {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a949d;
    margin-bottom: 2px;
}

.preco-imovel .valor {
    font-size: 26px;
    font-weight: 700;
    color: #002f6d;
    line-height: 1.15;
}

.preco-imovel .periodo {
    font-size: 14px;
    color: #6b7580;
}

/* Num condominio o "ate 52 000 MT" vai para a linha de baixo: ao
   lado, em 207px, partia o numero ao meio. */
.preco-imovel .ate {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #5e6d77;
    margin-top: 1px;
}

/* ─────────────────────────────────────────────────────────────────
   Condicoes do proprietario, na coluna principal, com as comodidades.
   Segue o espacamento dos blocos .g-attributes ao lado dos quais
   aparece, para nao se ler como uma seccao de outro sitio.
   ───────────────────────────────────────────────────────────────── */
.g-condicoes {
    margin-bottom: 30px;
}

.g-condicoes h4 {
    margin: 22px 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a949d;
    font-weight: 600;
}

/* Tres factos curtos lado a lado. Em coluna, cada um ocupava uma
   linha inteira para dizer "2 meses". */
.g-condicoes .lista-condicoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 40px;
}

.g-condicoes .lista-condicoes .item {
    min-width: 120px;
}

.g-condicoes .lista-condicoes .rot {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a949d;
    margin-bottom: 1px;
}

.g-condicoes .lista-condicoes .val {
    font-size: 17px;
    font-weight: 700;
    color: #002f6d;
}

/* As unidades em duas colunas: o nome nao precisa de destaque, o
   preco sim — a comparacao entre linhas e o que interessa. */
.g-condicoes .unidades {
    width: 100%;
    max-width: 420px;
    border-collapse: collapse;
}

.g-condicoes .unidades tr {
    border-bottom: 1px solid #eef1f4;
}

.g-condicoes .unidades tr:last-child {
    border-bottom: none;
}

.g-condicoes .unidades td {
    padding: 9px 0;
    vertical-align: baseline;
    font-size: 15px;
}

.g-condicoes .unidades .nome {
    color: #2b3138;
}

.g-condicoes .unidades .preco {
    text-align: right;
    font-weight: 700;
    color: #002f6d;
    white-space: nowrap;
}

.g-condicoes .unidades .por-mes {
    font-weight: 400;
    font-size: 12px;
    color: #8a949d;
}

.g-condicoes .unidades .sem-preco {
    font-weight: 400;
    font-size: 14px;
    color: #8a949d;
}

.g-condicoes .texto-condicoes {
    margin: 16px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: #5e6d77;
}

.g-condicoes .aviso-directo {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #8a949d;
}

/* O preco da unidade escolhida, no cartao do contacto. Segunda linha
   para nao empurrar o nome da unidade e parti-lo ao meio. */
.contacto-proprietario .preco-unidade {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #5e6d77;
}

/* Volta ao anuncio. Discreto de proposito: quem esta na confirmacao ja
   tem o contacto acima, e esta ligacao serve para quem quer rever as
   fotografias ou guardar a pagina. */
.contacto-proprietario .botao-anuncio {
    display: block;
    text-align: center;
    border: 1px solid #002f6d;
    color: #002f6d;
    background: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    padding: 11px 12px;
    border-radius: 6px;
    margin-top: 12px;
}

.contacto-proprietario .botao-anuncio:hover {
    background: #002f6d;
    color: #fff;
}

/* Na pagina de confirmacao o bloco esta numa coluna larga, nao na barra
   lateral de 207px. Sem limite de largura, o nome do proprietario ficava
   sozinho a atravessar meio ecra. */
.booking-success-detail .contacto-proprietario {
    max-width: 480px;
    margin: 0 0 24px;
}

/* ==========================================================================
   Resumo da reserva de evento
   ==========================================================================

   O tema estiliza esta lista com `.price { float: right }`. Funcionava com as
   duas linhas curtas que aqui estavam — "Total" e "Pagar agora" — porque o
   rotulo deixava espaco a direita para o valor flutuar.

   O resumo do modelo Viver Em Pemba tem cinco linhas e rotulos compridos:
   "Paga directamente ao fornecedor" ocupa a largura toda da barra lateral, o
   valor deixa de ter para onde ir, e cai para a linha de baixo colado ao
   rotulo — "Total do fornecedor1 000 MT".

   Flex resolve-o de vez: o rotulo encolhe e parte-se em duas linhas se for
   preciso, e o valor fica sempre encostado a direita, na mesma linha. */

.bc_wrap .bc_detail_event .bc_single_book .resumo-reserva li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

/* Anula o float do tema: com flex ele so atrapalha. */
.bc_wrap .bc_detail_event .bc_single_book .resumo-reserva li .price {
    float: none;
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: 600;
}

.bc_wrap .bc_detail_event .bc_single_book .resumo-reserva li label {
    flex: 1 1 auto;
    line-height: 1.35;
}

/* "Paga agora" e o unico numero que sai da carteira do cliente hoje. Fica
   separado das linhas informativas por um traco, e a negrito. */
.bc_wrap .bc_detail_event .bc_single_book .resumo-reserva li.destaque {
    border-top: 1px solid #d7dce3;
    margin-top: 6px;
    padding-top: 10px;
}

.bc_wrap .bc_detail_event .bc_single_book .resumo-reserva li.destaque label,
.bc_wrap .bc_detail_event .bc_single_book .resumo-reserva li.destaque .price {
    font-weight: 700;
    color: #002f6d;
}

/* O que e do fornecedor nao e cobrado aqui: fica em tom mais leve, para nao
   competir com o valor que o cliente paga agora. */
.bc_wrap .bc_detail_event .bc_single_book .resumo-reserva li.ao-fornecedor label,
.bc_wrap .bc_detail_event .bc_single_book .resumo-reserva li.ao-fornecedor .price,
.bc_wrap .bc_detail_event .bc_single_book .resumo-reserva li.condicao-mesa label,
.bc_wrap .bc_detail_event .bc_single_book .resumo-reserva li.condicao-mesa .price {
    color: #5e6d77;
    font-weight: 500;
}

/* O consumo minimo nao e devido a plataforma nem ao fornecedor por esta
   reserva: e uma promessa de gasto no local. Em italico para se ler como
   condicao e nao como conta. */
.bc_wrap .bc_detail_event .bc_single_book .resumo-reserva li.condicao-mesa {
    font-style: italic;
    font-size: 13px;
}

/* ==========================================================================
   A marca de aviso
   ==========================================================================

   Substitui as frases que aqui estavam. A barra lateral e estreita e nao
   aguenta explicacoes: "Paga directamente ao fornecedor" ocupava tres linhas
   para dizer o que este simbolo diz com um toque.

   Vai onde o cliente pode ler mal — dinheiro que nao e cobrado aqui — e nao em
   todo o lado, senao deixa de se notar. */

.bc_wrap .bc_detail_event .bc_single_book .marca-aviso {
    color: #b06a00;
    cursor: help;
    white-space: nowrap;
}

/* 14px, como o (i) da taxa de reserva logo acima. Os dois fazem a mesma
   promessa — "ha mais para saber, toca aqui" — e dois tamanhos diferentes
   para a mesma promessa leem-se como duas coisas diferentes. */
.bc_wrap .bc_detail_event .bc_single_book .marca-aviso i {
    font-size: 14px;
    vertical-align: -1px;
}

/* Nas condicoes o simbolo abre a linha, e nao segue o texto. */
.bc_wrap .bc_detail_event .bc_single_book .condicoes-fornecedor .condicao > .marca-aviso {
    margin-right: 4px;
}

/* Area de toque no telemovel: um icone de 14px e alvo a menos para um dedo. */
@media (max-width: 991px) {
    .bc_wrap .bc_detail_event .bc_single_book .marca-aviso {
        padding: 4px;
        margin: -4px;
    }
}

/* ==========================================================================
   Condicoes do fornecedor, por baixo do resumo
   ========================================================================== */

.bc_wrap .bc_detail_event .bc_single_book .condicoes-fornecedor {
    padding: 0 20px 15px;
    font-size: 13px;
    line-height: 1.45;
    color: #5e6d77;
}

.bc_wrap .bc_detail_event .bc_single_book .condicoes-fornecedor .condicao {
    margin: 0 0 6px;
}

.bc_wrap .bc_detail_event .bc_single_book .condicoes-fornecedor .condicao strong {
    color: #2b3138;
}

/* A caixa de aceitacao e um consentimento, nao uma nota de rodape: separa-se
   do que esta acima e ganha area de toque para o telemovel. */
.bc_wrap .bc_detail_event .bc_single_book .aceitar-condicoes {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid #e3e7eb;
    font-weight: 500;
    color: #2b3138;
    cursor: pointer;
}

.bc_wrap .bc_detail_event .bc_single_book .aceitar-condicoes input {
    flex: 0 0 auto;
    margin-top: 3px;
}

/* ==========================================================================
   Datas marcadas, quando sao poucas
   ========================================================================== */

.bc_wrap .bc_detail_event .bc_single_book .datas-marcadas label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
}

/* Nao seleccionado: caixa clara com contorno. O `:not(.btn-success)` nao e
   preciosismo — sem ele o fundo branco tapava tambem o botao seleccionado, que
   herda do Bootstrap o texto branco, e a data escolhida ficava a ler-se branco
   sobre branco: um botao vazio no meio dos outros. */
.bc_wrap .bc_detail_event .bc_single_book .datas-marcadas .btn:not(.btn-success) {
    border: 1px solid #d7dce3;
    background: #fff;
    color: #2b3138;
}

.bc_wrap .bc_detail_event .bc_single_book .datas-marcadas .btn:not(.btn-success):hover {
    border-color: #002f6d;
}

/* Seleccionado: o mesmo verde dos horarios, logo acima no formulario. Duas
   cores diferentes para dizer "escolhido" no mesmo ecra so obrigariam o
   cliente a aprender duas vezes a mesma coisa. */
.bc_wrap .bc_detail_event .bc_single_book .datas-marcadas .btn.btn-success {
    color: #fff;
    font-weight: 600;
}

/* ── 13. O perfil em tres etapas ─────────────────────────────────────
   A pagina era um muro: dezoito campos de uma vez, em duas colunas, com
   um botao la no fundo. Reparte-se pelas tres perguntas que faz — quem
   e, onde esta, como recebe — e responde-se a uma de cada vez.

   Continua a ser um formulario so, com uma gravacao so: as etapas sao
   uma maneira de o ler, e nao tres transaccoes. */

.passos-barra {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 24px;
    padding: 6px;
    background: #f2f5f8;
    border-radius: 14px;
}

.passo-bt {
    flex: 1 1 12rem;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    color: #5e6d77;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.passo-bt:hover { background: rgba(255,255,255,.7); color: #002f6d; }
.passo-bt:focus-visible { outline: 3px solid #002f6d; outline-offset: 2px; }

/* A aberta distingue-se por superficie, contorno **e** tinta — nunca so
   por cor. */
.passo-bt.e-activo {
    background: #fff;
    border-color: #c3d8f5;
    color: #002f6d;
    box-shadow: 0 1px 3px rgba(0, 47, 109, .10);
}

/* O numero conta porque a sequencia e a informacao: quem e, onde esta,
   como recebe, por essa ordem. */
.passo-num {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #dde4ec;
    color: #5e6d77;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.passo-bt.e-activo .passo-num { background: #002f6d; color: #fff; }

.passo-texto { min-width: 0; }
.passo-titulo { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; }
.passo-nota { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; opacity: .85; }

.passo-painel[hidden] { display: none; }
.passo-explica { max-width: 60ch; margin: -4px 0 18px; color: #5e6d77; font-size: 14px; line-height: 1.6; }

/* O icone do campo estava preso ao fundo do .form-group -- `bottom: 2px` --
   e nao ao campo. Bastava um texto de ajuda por baixo do input para o icone
   descer com ele e ficar a boiar por fora da caixa. A caixa propria devolve-lhe
   a referencia certa: o fundo dela e o fundo do campo. */
.campo-com-icone { position: relative; }

/* Os blocos de recebimento: cada banco e um bloco proprio, com uma linha em
   cima a separa-lo do anterior. Quatro campos por conta seguidos dos quatro da
   seguinte, sem nada pelo meio, era um formulario onde se perdia a conta de
   qual conta se estava a preencher. */
.bloco-banco {
    margin-top: 8px;
    padding-top: 18px;
    border-top: 1px solid #eceff3;
}
.bloco-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 14px;
}
.bloco-titulo {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #2b3138;
}
.bloco-nota {
    margin-left: 8px;
    color: #5e6d77;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
/* Fechado, o bloco e so o convite a abri-lo. */
.bloco-banco[data-fechado] .bloco-campos { display: none; }
.bloco-banco:not([data-fechado]) .bloco-abrir { display: none; }
.bloco-abrir {
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid #e3e7eb;
    border-radius: 9px;
    background: #fff;
    color: #002f6d;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.bloco-abrir:hover { background: #f7f9fb; border-color: #002f6d; }

/* A resposta de uma gravacao que nao recarrega a pagina. Fica encostada ao
   topo do formulario, onde estava a mensagem verde do recarregamento. */
.perfil-aviso {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}
.perfil-aviso.e-bom { background: #eaf7ef; border: 1px solid #bfe3cd; color: #1c5c36; }
.perfil-aviso.e-mau { background: #fdeceb; border: 1px solid #f2c2be; color: #8f2c23; }

/* Uma recusa da administracao nao e uma legenda: prende a conta ate se mudar
   o nome, e tem de se ver como um bloqueio e nao como uma nota de rodape. */
.aviso-recusa {
    margin: 8px 0 0;
    padding: 10px 14px;
    border-radius: 9px;
    background: #fdeceb;
    border: 1px solid #f2c2be;
    color: #8f2c23;
    font-size: 13px;
    line-height: 1.5;
}
.aviso-nome-utilizador {
    display: block;
    margin-top: 6px;
    color: #5e6d77;
    font-size: 12.5px;
    line-height: 1.5;
}

/* O erro vive por baixo do campo a que pertence. Uma lista em cima obrigava a
   procurar qual dos dezoito era. */
.erro-campo {
    display: block;
    margin-top: 6px;
    color: #8f2c23;
    font-size: 13px;
    line-height: 1.45;
}
.form-control[aria-invalid="true"] { border-color: #d9534f; }

/* Enquanto se espera, o botao diz que esta a trabalhar -- e nao aceita um
   segundo clique. */
.passo-bt-principal[aria-busy="true"] {
    opacity: .75;
    cursor: progress;
}
.passo-accoes button[disabled] { cursor: not-allowed; }

/* A etapa que abre entra: um deslize curto de baixo para cima, para se ver
   que o conteudo mudou sem a pagina ter ido a lado nenhum. */
@keyframes passo-entra {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
.passo-painel:not([hidden]) { animation: passo-entra .22s ease-out both; }
@media (prefers-reduced-motion: reduce) {
    .passo-painel:not([hidden]) { animation: none; }
}

/* Os grupos dentro de uma etapa: o nome, o contacto, a apresentacao.
   Sao a resposta a pergunta que dezoito campos em fila nao respondiam --
   porque e que o telefone esta ao lado do email. Um filete de 1px e uma
   maiuscula pequena chegam: e uma legenda, nao um titulo. */
.grupo-titulo {
    margin: 28px 0 14px;
    padding-top: 18px;
    border-top: 1px solid #eceff3;
    color: #5e6d77;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
/* O primeiro vem logo a seguir ao titulo da etapa: mais uma linha ali era
   duas divisorias coladas. */
.form-title + .grupo-titulo {
    margin-top: 4px;
    padding-top: 0;
    border-top: 0;
}

/* Duas colunas dentro da etapa: um painel a toda a largura com os campos
   em fila unica dava uma coluna estreita e meia pagina vazia. */
@media (min-width: 768px) {
    .perfil-grelha {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 28px;
        align-items: start;
    }
    .perfil-grelha > .form-title,
    .perfil-grelha > .passo-explica,
    .perfil-grelha > .grupo-titulo,
    .perfil-grelha > .passo-accoes,
    .perfil-grelha > .row { grid-column: 1 / -1; }
    /* O retrato e a biografia atravessam as duas colunas: sao os campos que
       se olham em vez de se preencherem, e uma caixa de texto de seis linhas
       em meia coluna e um sitio mau para escrever. */
    .perfil-grelha > .campo-largo { grid-column: 1 / -1; }
}

.passo-accoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e9edf1;
}

.passo-bt-principal, .passo-bt-calmo, .passo-voltar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.passo-bt-principal { border: 1px solid #002f6d; background: #002f6d; color: #fff; }
.passo-bt-principal:hover { background: #00224f; border-color: #00224f; color: #fff; }
.passo-bt-calmo { border: 1px solid #e3e7eb; background: #fff; color: #2b3138; }
.passo-bt-calmo:hover { background: #f7f9fb; border-color: #5e6d77; }
/* Voltar e navegacao dentro do que ja se viu, e nao uma decisao: nao leva
   moldura nenhuma. */
.passo-voltar { margin-left: auto; padding: 0 8px; border: 0; background: none; color: #5e6d77; }
.passo-voltar:hover { color: #002f6d; }
.passo-bt-principal:focus-visible,
.passo-bt-calmo:focus-visible,
.passo-voltar:focus-visible { outline: 3px solid #002f6d; outline-offset: 2px; }

@media (max-width: 600px) {
    .passos-barra { gap: 4px; padding: 4px; }
    .passo-bt { flex: 1 1 100%; min-height: 52px; }
    .passo-nota { display: none; }
    .passo-accoes > * { flex: 1 1 100%; }
    .passo-voltar { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .passo-bt { transition: none; }
}

/* ── O aviso da carteira, na etapa dos recebimentos ─────────────────────
   
   A carteira e o perfil guardam o mesmo número com propósitos opostos — a
   carteira é para onde a plataforma envia os levantamentos, o perfil é por
   onde o cliente paga —, e divergiam sem ninguém dar por isso. O aviso mostra
   os dois lado a lado e oferece o gesto de os igualar; não iguala nada
   sozinho, porque publicar num comprovativo um número dado para transferências
   é decisão de quem o deu. */
.perfil-aviso-carteira {
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid #f0d9a8;
    border-radius: 10px;
    background: #fdf6e7;
    color: #5f4300;
    font-size: 14px;
    line-height: 1.55;
}
.perfil-aviso-carteira p { margin: 0 0 8px; }
.perfil-aviso-carteira ul { margin: 0; padding: 0; list-style: none; }
.perfil-aviso-carteira li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 5px 0;
}
.perfil-aviso-carteira li + li { border-top: 1px solid rgba(95, 67, 0, .12); }
/* O nome do meio de pagamento à cabeça: numa lista de dois ou três, é por ele
   que se procura a linha que interessa. */
.perfil-aviso-rotulo { min-width: 5rem; font-weight: 700; }
.perfil-aviso-bt {
    margin-left: auto;
    padding: 5px 12px;
    border: 1px solid #e0c187;
    border-radius: 999px;
    background: #fff;
    color: #5f4300;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.perfil-aviso-bt:hover { background: #f8ecd4; }
.perfil-aviso-bt[disabled] { opacity: .55; cursor: default; }
.perfil-aviso-carteira small { display: block; margin-top: 8px; opacity: .8; }

@media (max-width: 575.98px) {
    /* No telemóvel o botão passa a linha inteira: encostado à direita de um
       texto que já quebrou, ficava um alvo de 90px no canto. */
    .perfil-aviso-bt { margin-left: 0; width: 100%; min-height: 44px; }
}

/* ── O ponto de encontro no cabeçalho do anúncio ────────────────────────
   
   Vive ao lado da morada e não pode ler-se como ela: a morada diz onde fica o
   serviço, isto diz onde a pessoa tem de aparecer. Um tom mais escuro e o
   nome do sítio em negrito — é o que se procura ao chegar. */
.g-header .ponto-encontro {
    color: #2b3138;
}
.g-header .ponto-encontro small {
    display: inline-block;
    margin-top: 2px;
    color: #5e6d77;
    font-size: 13px;
    line-height: 1.5;
}

/* ── "O que trazer", no anúncio ─────────────────────────────────────────
   
   Uma lista curta que se lê antes de sair de casa: marcadores, e não um
   parágrafo corrido onde o chapéu se perde entre a toalha e o documento. */
.lista-trazer {
    margin: 0;
    padding-left: 1.2rem;
}
.lista-trazer li {
    margin-bottom: 4px;
    list-style: disc;
}

/* ── Os requisitos de embarque, no formulário ───────────────────────────
   
   Cinco etiquetas curtas: em grelha de três colunas ficavam espalhadas com
   buracos entre elas. Em linha, com quebra, ocupam o que precisam e leem-se
   de relance — que é o que uma lista de marcar tem de permitir. */
.lista-requisitos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}
.lista-requisitos label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 400;
    white-space: nowrap;
}

/* ── Campos curtos, para respostas curtas ───────────────────────────────

   Um preço, um número de portas, uma duração: respostas de dois ou três
   caracteres em caixas com a largura do ecrã. O `form-control` do tema ocupa
   sempre 100% da coluna, e numa coluna larga isso dá um campo de vinte
   centímetros para escrever "4".

   O problema não é estético. Um campo diz, pela largura, quanto se espera que
   lá caiba — uma caixa enorme para o preço faz hesitar sobre se é ali que se
   escreve a moeda, o intervalo, a explicação. Um campo do tamanho da resposta
   não deixa margem para essa dúvida.

   `campo-curto` para números e preços; `campo-medio` para o que ainda é uma
   escolha mas tem palavras dentro. Em ecrã pequeno voltam a ocupar a largura
   toda: aí não sobra espaço para desperdiçar. */
.campo-curto,
.campo-medio {
    max-width: 100%;
}

@media (min-width: 768px) {
    .campo-curto { max-width: 10rem; }
    .campo-medio { max-width: 20rem; }
}

/* Dois campos que andam juntos — valor e unidade, "30" e "Dias". */
.campo-par {
    display: flex;
    gap: .5rem;
    align-items: center;
}
.campo-par .campo-curto { flex: 0 0 7rem; }
.campo-par select { max-width: 11rem; }

/* ── A fila dos preços, alinhada ────────────────────────────────────────

   Quatro campos lado a lado — preço/dia, promocional, semana, mês — com
   rótulos de comprimentos diferentes: "Preço por dia" cabe numa linha,
   "Tarifa semanal (7 dias)" parte em duas. Sem isto, os campos ficam a alturas
   diferentes e a fila lê-se aos degraus.

   Reservar duas linhas ao rótulo e duas à ajuda faz os quatro assentarem na
   mesma linha, custe o que custar ao texto. */
.grelha-precos .form-group {
    display: flex;
    flex-direction: column;
}
.grelha-precos .control-label {
    display: block;
    min-height: 2.7em;
    margin-bottom: .3rem;
    line-height: 1.35;
}
.grelha-precos .control-label input[type="checkbox"] {
    margin-right: .35rem;
}
.grelha-precos small {
    display: block;
    margin-top: .35rem;
    min-height: 2.4em;
    line-height: 1.2;
}

/* Em ecrã estreito as colunas empilham e não há fila para alinhar. */
@media (max-width: 767px) {
    .grelha-precos .control-label,
    .grelha-precos small {
        min-height: 0;
    }
}

/* As duas linhas reservadas passam do <label> para a caixa do rotulo.
   Com o <label> alto e a caixa a centrar, a bolinha de ajuda descia para o
   meio das duas linhas e deixava de estar ao lado do texto. Encostada ao
   topo, fica ao lado da primeira linha, seja o rotulo de uma ou de duas. */
.grelha-precos .rotulo-campo {
    display: flex;
    align-items: flex-start;
    min-height: 2.7em;
    margin-bottom: .3rem;
}

.grelha-precos .rotulo-campo > .control-label {
    min-height: 0;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .grelha-precos .rotulo-campo {
        min-height: 0;
    }
}

/* ── O bloco do ponto de levantamento ───────────────────────────────────

   Um menu com novecentos píxeis para escolher "Aeroporto de Pemba", e uma
   caixa da largura do ecrã para escrever "portão azul à direita". A mesma
   caixa gigante que se corrigiu nos preços, noutro sítio.

   O textarea das indicações privadas fica largo de propósito: ali escreve-se
   um parágrafo, e é a única coisa nesta secção que precisa de espaço. */
.bloco-ponto .form-control:not(textarea) {
    max-width: 34rem;
}

/* ── Campos com unidade, e pares valor+unidade ──────────────────────────

   Uma caixa de número não diz em que unidade está. "Caução: [20000]" pode ser
   meticais, dólares ou dias; "Idade mínima: [21]" só se percebe pelo rótulo, e
   o rótulo está acima e lê-se antes. A unidade ao lado da caixa responde no
   sítio onde a dúvida nasce.

   `campo-com-unidade` é um número com um sufixo fixo (MT, anos, km).
   `campo-par` é um número com um menu de unidade (3 [Dias ▼]) — os dois
   encostados, para se lerem como um controlo só e não como dois campos. */
.campo-com-unidade,
.campo-par {
    display: flex;
    align-items: stretch;
    max-width: 100%;
}

.campo-com-unidade .form-control,
.campo-par .form-control:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    position: relative;
    z-index: 1;
}
.campo-par .form-control:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1px;
}

/* O sufixo: mesma altura, mesma borda, fundo apagado — é etiqueta, não campo. */
.campo-com-unidade .unidade {
    display: inline-flex;
    align-items: center;
    padding: 0 .7rem;
    border: 1px solid #dfe3e8;
    border-left: 0;
    border-radius: 0 4px 4px 0;
    background: #f6f7f9;
    color: #6b7280;
    font-size: .875rem;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .campo-com-unidade { max-width: 10rem; }
    .campo-par         { max-width: 17rem; }

    .campo-com-unidade .form-control { max-width: none; }
    .campo-par .form-control:first-child { flex: 0 0 6.5rem; max-width: 6.5rem; }
    .campo-par .form-control:last-child  { flex: 1 1 auto;   max-width: none; }

    .campo-largo { max-width: 34rem; }
}

/* ── A grelha dos campos curtos ─────────────────────────────────────────

   Uma fila de números curtos — duração, antecedência, pessoas; preço e
   promocional — em colunas iguais, e cada caixa com a largura da coluna.

   Estavam em colunas de meia página com as caixas encolhidas a um canto,
   cada uma com a sua largura (97, 107, 117, 160, 320 px na mesma etapa), e o
   exemplo cortado a meio: "Preço do p". Uma caixa do tamanho da resposta é a
   regra de .campo-curto; aqui a resposta é curta e as colunas também, e o que
   alinha a fila é serem todas iguais.

   As caixas encostam ao fundo da coluna: um rótulo que quebre em duas linhas
   ("Antecedência mínima…") empurra o seu para cima e deixa a caixa na linha
   das outras, sem reservar altura vazia por baixo dos rótulos curtos. */
.grelha-campos .campo-com-unidade,
.grelha-campos .campo-par,
.grelha-campos .campo-curto,
.grelha-campos .campo-medio {
    width: 100%;
    max-width: none;
}

.grelha-campos .campo-com-unidade .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

/* Um menu no lugar da unidade (a duração do evento: horas ou minutos). Encosta
   à caixa como a etiqueta "MT", e fica com a largura do que diz. */
.campo-com-unidade select.form-control {
    flex: 0 0 auto;
    width: auto;
    max-width: 8rem;
    border-left: 0;
    border-radius: 0 4px 4px 0;
}

.grelha-campos > [class*="col-"] > .form-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: calc(100% - 1rem);
}

/* ── O "desde" do hotel ─────────────────────────────────────────────────
   Um valor calculado, e não um campo: lê-se como um número, sem caixa à
   volta, para não convidar a escrever por cima. Muda-se nos quartos. */
.preco-desde {
    margin: .25rem 0 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: #002f6d;
    font-variant-numeric: tabular-nums;
}

.preco-desde span {
    font-size: .875rem;
    font-weight: 400;
    color: #5e6d77;
}

.preco-desde.vazio {
    font-size: .9375rem;
    font-weight: 400;
    color: #5e6d77;
}

/* ── Estado vazio que ensina ─────────────────────────────────────────────
   Uma lista sem nada diz o que falta e dá o botão para o fazer — e não
   "Sem quartos". Ver DESIGN.md: estados vazios que ensinam. */
.estado-vazio {
    max-width: 36rem;
    margin: 1.5rem 0;
    padding: 1.5rem;
    border: 1px dashed #cfd8e0;
    border-radius: 10px;
    background: #f7f9fb;
}

.estado-vazio h3 {
    margin: 0 0 .5rem;
    font-size: 1.125rem;
    color: #002f6d;
}

.estado-vazio p {
    margin: 0 0 1rem;
    color: #5e6d77;
    line-height: 1.5;
}

/* ── A etapa das Condições ──────────────────────────────────────────────

   Seis grupos de perguntas num painel. Sem uma linha entre eles, o olho não
   sabe onde acaba um assunto e começa o outro — e a etapa lê-se como uma
   lista de vinte campos em vez de seis perguntas. */
.bloco-condicoes .panel-body-title {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eceff2;
    font-size: 1rem;
    font-weight: 600;
}
.bloco-condicoes .panel-body-title:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Uma linha de ajuda por campo, sempre no mesmo sítio e com o mesmo peso. */
.bloco-condicoes .form-group > small,
.bloco-ponto .form-group > small {
    display: block;
    margin-top: .35rem;
    color: #6b7280;
    line-height: 1.35;
}

/* ── 14. Os icones da ficha do carro ─────────────────────────────────
   ⚠️ Lugares, caixa e portas pediam-se no painel e so apareciam na
   grelha de resultados (`Car/search/loop-grid`). Quem lia "5 lugares ·
   Automatica · 4 portas" no cartao, clicava, e nao encontrava nenhum
   deles na ficha — a mesma falha do "N.o de pessoas" nos imoveis.

   A fila em si nao precisou de CSS: o `car.css` do tema ja traz
   `.g-car-feature` inteiro, com as bordas, o espacamento e a tipografia,
   igual ao `.g-space-feature` do imovel. Estava escrito e nao havia
   marcacao nenhuma a usa-lo.

   O que falta e so o icone. O do tema e de fonte (`font-size: 45px`), e
   os tres icones do carro sao SVG — no `app.css` presos a
   `.item-loop.item-car .amenities`, que e a grelha e nao a ficha. Sao os
   mesmos ficheiros, para as duas superficies dizerem a mesma coisa da
   mesma maneira.

   A especificidade acompanha a do tema (`.bc_wrap .bc_detail_car
   .bc_content`), senao o `margin-right: 20px` dele ganhava a metade
   destas regras e o resto nao. */

.bc_wrap .bc_detail_car .bc_content .g-car-feature .item .icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    margin-right: 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    /* Os SVG sao cinzentos-escuros de origem; o `opacity` acerta-os ao
       peso do texto sem ter de os reescrever. */
    opacity: .85;
}

.bc_wrap .bc_detail_car .bc_content .g-car-feature .item .icon.icon-passenger {
    background-image: url("/themes/bc/module/car/images/passenger.svg");
}
.bc_wrap .bc_detail_car .bc_content .g-car-feature .item .icon.icon-gear {
    background-image: url("/themes/bc/module/car/images/gear.svg");
}
.bc_wrap .bc_detail_car .bc_content .g-car-feature .item .icon.icon-door {
    background-image: url("/themes/bc/module/car/images/door.svg");
}

/* No telemovel os tres cabem a dois por fila; o icone encolhe com eles. */
@media (max-width: 767px) {
    .bc_wrap .bc_detail_car .bc_content .g-car-feature .item .icon {
        width: 28px;
        height: 28px;
        margin-right: 12px;
    }
}

/* ------------------------------------------------------------------------
   "Quanto pagar e onde" — o resumo do pagamento directo ao fornecedor, no
   checkout do carro, do imovel, do passeio e da embarcacao.

   Vivia em <style> dentro das parciais (Booking::como-pagar-e-onde e o
   detalhe da reserva da embarcacao). O checkout e uma aplicacao Vue, e o
   Vue 2 deita fora qualquer <style> do modelo com "Error compiling
   template": o resumo ficava sem estilo e a consola com um erro que
   ninguem sabia de onde vinha. Aqui, a folha carrega em todas as paginas
   do site.
   ------------------------------------------------------------------------ */
.resumo-pagar {
    margin-top: 1rem;
    padding: .875rem 1rem;
    border: 1px solid #e9edf1;
    border-radius: 10px;
    background: #f7f9fb;
}
.resumo-pagar h4 { margin: 0 0 .5rem; font-size: .9375rem; font-weight: 700; }
.resumo-pagar dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .25rem .75rem;
    margin: 0;
    align-items: baseline;
}
.resumo-pagar dt { color: #55636d; font-size: .8125rem; }
.resumo-pagar dd {
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.resumo-pagar p { margin: .5rem 0 0; color: #55636d; font-size: .8125rem; line-height: 1.5; }

/* ------------------------------------------------------------------------
   Onde se levanta e devolve o carro, no formulario de reserva.

   O ponto que o dono marcou le-se como uma resposta, nao como uma caixa
   por preencher: sem borda de campo, com o icone do sitio a frente.
   ------------------------------------------------------------------------ */
.bc_single_book .locais-aluguer label { display: block; margin: 0 0 .25rem; }
.bc_single_book .locais-aluguer .local-fixo {
    margin: 0 0 .75rem;
    padding: .5rem .75rem;
    border-radius: 8px;
    background: #f7f9fb;
    color: #002f6d;
    font-weight: 600;
}
.bc_single_book .locais-aluguer .local-fixo .fa { margin-right: .375rem; color: #ff9202; }

/* Rotulo curto por cima e caixa a toda a largura: a coluna do formulario
   tem ~250px, e um rotulo ao lado da caixa partia-se em linhas e espremia-a. */
.bc_single_book .campo-aluguer { padding: 12px 20px 0; }
.bc_single_book .campo-aluguer label { display: block; margin: 0 0 .25rem; }
.bc_single_book .campo-aluguer select { width: 100%; }
.bc_single_book .campo-aluguer-nota {
    margin: .375rem 0 0;
    color: #55636d;
    font-size: .8125rem;
}
/* A hora da devolucao, por baixo do contador das horas. */
.bc_single_book .nota-devolucao {
    margin: -.5rem 0 .75rem;
    padding: 0 20px;
    color: #55636d;
    font-size: .8125rem;
}

/* ------------------------------------------------------------------------
   Caixa de reserva do carro — revisao geral (15-09).

   1. Cabecalho: o tema alinha o "desde" ao fundo; com dois precos caia ao
      lado do "/hora". Fica em cima, e cada preco na sua linha com a unidade.
   2. Tracos: o tema poe uma linha por baixo de cada .form-group, e os blocos
      novos estavam uns dentro dos outros — linhas a meio das seccoes. Dentro
      da seccao das datas nao ha linhas; separam-se os locais e o modo.
   3. Titulos: tres tamanhos (14/400, 14/500, 16/500). Um so.
   4. Telemovel: o tema usa 15px de margem na janela; os blocos novos e os
      totais estavam a 20px.
   5. Fechar: a janela do telemovel nao tinha botao.
   ------------------------------------------------------------------------ */
.bc_single_book .form-head .price.preco-carro { align-items: flex-start; }
.bc_single_book .form-head .price.preco-carro .label { top: 6px; }
.bc_single_book .form-head .price.preco-carro .linha-preco { display: block; white-space: nowrap; }
.bc_single_book .form-head .price.preco-carro .linha-preco .onsale { display: block; }
.bc_single_book .form-head .price.preco-carro .linha-preco small { margin-left: 2px; }

.bc_single_book .form-date-field .form-group,
.bc_single_book .form-date-field .campo-aluguer { border-bottom: 0; }
.bc_single_book .form-date-field .locais-aluguer { border-bottom: 1px solid #D7DCE3; }
.bc_single_book .form-date-field .campo-modo { border-bottom: 1px solid #D7DCE3; padding-bottom: 15px; }
.bc_single_book .campo-aluguer { padding-bottom: 4px; }
.bc_single_book .locais-aluguer .local-escolha { margin-bottom: .75rem; }

.bc_single_book .locais-aluguer > label,
.bc_single_book .campo-aluguer > label,
.bc_single_book .date-wrapper .check-in-wrapper label,
.bc_single_book .form-guest-search .guest-wrapper > .flex-grow-1,
.bc_single_book .form-section-group .form-section-title {
    font-size: 15px;
    font-weight: 500;
    color: #1a2b48;
}

.bc_single_book .form-section-total li.ao-fornecedor label,
.bc_single_book .form-section-total li.ao-fornecedor .price { color: #55636d; font-weight: 400; }

.bc_single_book .fechar-reserva { display: none; }
.bc_single_book_wrap.show .fechar-reserva {
    display: flex;
    position: absolute;
    top: 8px;
    left: 8px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #f7f9fb;
    color: #1a2b48;
    font-size: 18px;
    z-index: 2;
}
/* A folga do botão de fechar, em todos os serviços (28-09-2026): era só do
   carro, e no passeio, no evento e na embarcação o × tapava "Preço desde". */
.bc_single_book_wrap.show .form-head .price { padding-left: 44px; }
.bc_single_book_wrap.show .campo-aluguer,
.bc_single_book_wrap.show .nota-devolucao,
.bc_single_book_wrap.show .form-section-total { padding-left: 15px; padding-right: 15px; }

/* ------------------------------------------------------------------------
   Ritmo vertical da caixa de reserva do carro (queixa do dono, 15-09).

   Medido no navegador antes de mexer: cada bloco somava o seu espaco ao do
   vizinho. Os locais tinham 15px em cima e 27px em baixo (a ultima caixa
   guardava a margem); entre "Seleccione a data." e "Hora de recolha" havia
   27px (o padding do calendario mais o da hora); a caixa das horas acabava a
   5px do traco; do titulo a caixa, 4px nuns sitios e 5px noutros; e o campo
   escondido do calendario ocupava 6px sem se ver.

   Uma regra so: 16px em cima e em baixo de cada seccao, 6px do titulo a
   caixa, 14px entre campos da mesma seccao, e nada a mais no fim. Os
   seletores tem um nivel a mais do que os do tema para valerem tambem na
   janela do telemovel (`.bc_single_book_wrap.show`), e so mexem no espaco
   vertical — as margens laterais ficam como estavam.
   ------------------------------------------------------------------------ */
.bc_single_book_wrap .bc_single_book .locais-aluguer,
.bc_single_book_wrap .bc_single_book .form-section-group,
.bc_single_book_wrap .bc_single_book .form-group-padding { padding-top: 16px; padding-bottom: 16px; }

/*
   Os 6px do titulo a caixa ficam na caixa, e nao no titulo.

   ⚠️ No telemovel o tema tem `@media (max-width: 990px) {
   .bc_single_book_wrap.show label { margin: 0 !important } }`: nenhuma
   margem de rotulo passa, e os titulos ficavam colados as caixas. A margem
   de cima da caixa ele nao toca — e assim vale igual nas duas vistas.
*/
.bc_single_book_wrap .bc_single_book .locais-aluguer > label,
.bc_single_book_wrap .bc_single_book .campo-aluguer > label { margin: 0; }
.bc_single_book_wrap .bc_single_book .locais-aluguer > label + *,
.bc_single_book_wrap .bc_single_book .campo-aluguer > label + select { margin-top: 6px; }
.bc_single_book_wrap .bc_single_book .locais-aluguer .local-fixo,
.bc_single_book_wrap .bc_single_book .locais-aluguer .local-escolha { margin-bottom: 14px; }
.bc_single_book_wrap .bc_single_book .locais-aluguer > :last-child { margin-bottom: 0; }

.bc_single_book_wrap .bc_single_book .form-date-field .campo-modo { padding-top: 16px; padding-bottom: 16px; }
.bc_single_book_wrap .bc_single_book .form-date-field .date-wrapper { padding-top: 16px; padding-bottom: 0; }
.bc_single_book_wrap .bc_single_book .form-date-field .date-wrapper .check-in-wrapper label { margin-bottom: 2px; }
.bc_single_book_wrap .bc_single_book .form-date-field input.start_date {
    display: block; height: 0; padding: 0; margin: 0; border: 0;
}
.bc_single_book_wrap .bc_single_book .form-date-field .campo-aluguer:not(.campo-modo) { padding-top: 14px; padding-bottom: 16px; }
.bc_single_book_wrap .bc_single_book .form-date-field .form-guest-search { padding-top: 0; padding-bottom: 16px; }
.bc_single_book_wrap .bc_single_book .form-date-field .nota-devolucao { margin: -10px 0 0; padding-bottom: 16px; }
.bc_single_book_wrap .bc_single_book .campo-aluguer-nota { margin-top: 6px; }

/* ------------------------------------------------------------------------
   A conta de uma reserva — onde quer que ela apareça (queixa do dono, 16-09).

   ⚠️ Os três valores diziam coisas diferentes e liam-se iguais: "Total",
   "Pagar agora" e "Ao fornecedor" todos em laranja grande e a negrito, porque
   partilham a classe que o tema pinta. Quem lê tem uma pergunta só — quanto sai
   da minha carteira hoje? — e a página respondia-lhe três vezes ao mesmo tempo.

   A hierarquia é a mesma em todos os módulos:

     · **Total** — a conta inteira. Azul-marinho, o maior.
     · **Pagar agora** — o que a plataforma cobra já. Laranja, a seguir.
     · **Ao fornecedor** — o que se paga a quem presta o serviço. Discreto.

   No hotel a conta vive numa barra de duas colunas (`.row_total_price`); nos
   outros módulos, na lista da caixa lateral (`.form-section-total`). As regras
   abaixo servem as duas.
   ------------------------------------------------------------------------ */
.hotel_rooms_form .row_total_price {
    align-items: flex-start;
    padding-top: 6px;
}
.hotel_rooms_form .row_total_price > .col-md-6:first-child .extra-price-wrap {
    padding: 7px 0;
    border-bottom: 1px solid #eef1f4;
    font-size: 15px;
    color: #55636d;
}
.hotel_rooms_form .row_total_price > .col-md-6:first-child .extra-price-wrap:last-child { border-bottom: 0; }

.hotel_rooms_form .hotel_room_book_status .conta-reserva {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}
.hotel_rooms_form .hotel_room_book_status .conta-reserva .conta-linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 5px 0;
    font-size: 15px;
    font-weight: 400;
    color: #1a2b48;
    line-height: 1.35;
}
.hotel_rooms_form .hotel_room_book_status .conta-reserva .conta-linha > span { font-size: 15px; font-weight: 500; color: #1a2b48; }
.hotel_rooms_form .hotel_room_book_status .conta-reserva .conta-linha > strong { font-variant-numeric: tabular-nums; }

/* O total: a conta inteira, na cor da marca. */
.hotel_rooms_form .hotel_room_book_status .conta-reserva .conta-total {
    padding-bottom: 8px;
    border-bottom: 1px solid #e3e7eb;
    color: #002f6d;
}
.hotel_rooms_form .hotel_room_book_status .conta-reserva .conta-total > span { font-size: 16px; font-weight: 600; }
.hotel_rooms_form .hotel_room_book_status .conta-reserva .conta-total > strong { font-size: 24px; font-weight: 700; }

/* O que se paga agora: é o número que decide se a pessoa avança. */
.hotel_rooms_form .hotel_room_book_status .conta-reserva .conta-agora { padding-top: 8px; }
.hotel_rooms_form .hotel_room_book_status .conta-reserva .conta-agora > strong { font-size: 18px; font-weight: 700; color: #ff5a1f; }

/* O que fica para o fornecedor: informação, não apelo. */
.hotel_rooms_form .hotel_room_book_status .conta-reserva .ao-fornecedor,
.hotel_rooms_form .hotel_room_book_status .conta-reserva .ao-fornecedor > span,
.hotel_rooms_form .hotel_room_book_status .conta-reserva .ao-fornecedor > strong {
    font-size: 14px;
    font-weight: 400;
    color: #55636d;
}

.hotel_rooms_form .hotel_room_book_status .conta-reserva .bt-reservar {
    width: 100%;
    margin-top: 14px;
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: #002f6d;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}
.hotel_rooms_form .hotel_room_book_status .conta-reserva .bt-reservar:hover { background: #00224f; }
.hotel_rooms_form .hotel_room_book_status .conta-reserva .bt-reservar:focus-visible { outline: 3px solid #002f6d; outline-offset: 2px; }

/* No telemóvel o tema esconde as linhas da coluna da direita (só lá fica o
   botão) e mostra estas. Levam a mesma hierarquia — e cada uma a sua classe:
   o `:nth-of-type` contava os irmãos todos e nunca acertava no total. */
.hotel_rooms_form .hotel_room_book_status .conta-movel { align-items: baseline; }
.hotel_rooms_form .hotel_room_book_status .conta-movel label { margin: 0; font-size: 15px; font-weight: 500; color: #1a2b48; }
.hotel_rooms_form .hotel_room_book_status .conta-movel .total-room-price { font-size: 15px; font-weight: 600; color: #1a2b48; font-variant-numeric: tabular-nums; }

.hotel_rooms_form .hotel_room_book_status .conta-movel-total { padding-top: 10px; border-top: 1px solid #e3e7eb; }
.hotel_rooms_form .hotel_room_book_status .conta-movel-total label { font-size: 16px; font-weight: 600; }
.hotel_rooms_form .hotel_room_book_status .conta-movel-total .total-room-price { font-size: 22px; font-weight: 700; color: #002f6d; }

.hotel_rooms_form .hotel_room_book_status .conta-movel-agora .total-room-price { font-size: 17px; font-weight: 700; color: #ff5a1f; }

.hotel_rooms_form .hotel_room_book_status .conta-movel-fornecedor label,
.hotel_rooms_form .hotel_room_book_status .conta-movel-fornecedor .total-room-price { font-size: 14px; font-weight: 400; color: #55636d; }

/* O botão, que no telemóvel é a única coisa que sobra da coluna da direita. */
@media (max-width: 766px) {
    .hotel_rooms_form .hotel_room_book_status .conta-reserva .bt-reservar { margin-top: 10px; min-height: 48px; padding: 0 18px; }
}

/* A mesma conta, na caixa lateral dos outros módulos — carro, embarcação,
   passeio, evento e imóvel. A lista é outra, a hierarquia é a mesma: o total
   é o maior, o que se paga agora é o que decide, e o resto diz-se sem gritar. */
.bc_single_book .form-section-total li { align-items: baseline; }
.bc_single_book .form-section-total li label { font-size: 15px; font-weight: 500; color: #1a2b48; }
.bc_single_book .form-section-total li .price { font-variant-numeric: tabular-nums; }

/* ⚠️ A lista do evento tem as duas classes (`form-section-total resumo-reserva`)
   e a **primeira linha dela não é o total** — é "Bilhetes" ou "Ao fornecedor".
   Tem desenho próprio desde 13-09; fica de fora desta regra, ou passava a
   mostrar o valor do fornecedor com o peso de um total. */
.bc_single_book .form-section-total:not(.resumo-reserva) li:first-child label { font-size: 16px; font-weight: 600; }
.bc_single_book .form-section-total:not(.resumo-reserva) li:first-child .price { font-size: 20px; font-weight: 700; color: #002f6d; }

.bc_single_book .form-section-total li.paga-agora .price { font-size: 17px; font-weight: 700; color: #ff5a1f; }

/* O ponto de encontro do passeio (16-09).

   ⚠️ A `.nota-devolucao` nasceu no carro, colada por baixo do campo das horas,
   e por isso sobe meia linha (`margin: -.5rem`). No passeio vive por baixo do
   campo da data, que o tema desenha com altura própria: a meia linha punha o
   "Ponto de encontro" por cima da data escolhida — medido no navegador, 7px de
   sobreposição. Aqui não sobe; separa-se do campo de cima. */
.bc_single_book_wrap .bc_single_book .ponto-encontro-passeio { margin: 0; }
.bc_single_book_wrap .bc_single_book .ponto-encontro-passeio .nota-devolucao { margin: 0; padding-bottom: 16px; }

/* ------------------------------------------------------------------------
   O código promocional e o crédito, no checkout (queixa do dono, 16-09).

   Não tinham estilo nenhum: o campo e o botão saíam como o navegador os
   desenha — caixa cinzenta com canto vivo, botão "APLICAR" em maiúsculas
   coladas, e o crédito era um quadrado de número solto com "0 MT" ao lado,
   sem se perceber o que aquilo abatia. O evento já tinha o desenho certo,
   dentro do seu próprio `<style>`; estas regras são as mesmas, aqui, onde
   servem o hotel, o passeio, o carro, a embarcação e o imóvel.

   As classes `.section-coupon-form`, `.group-form`, `.message` e
   `.deposit_amount` / `.convert_deposit_amount` são as que o `checkout.blade`
   procura em JavaScript — mudam de aspecto, não de nome.
   ------------------------------------------------------------------------ */
.booking-review .cupao,
.booking-review .credito {
    --ck-tinta: #2b3138;
    --ck-suave: #5e6d77;
    --ck-linha: #e3e7eb;
    --ck-marinho: #002f6d;
    --ck-fria: #f7f9fb;
}

/* A linha que abre: discreta, para quem não tem código ler a conta seguida. */
.booking-review .cupao-caixa > summary {
    display: inline-block;
    padding: 6px 0;
    color: var(--ck-marinho);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.booking-review .cupao-caixa > summary::-webkit-details-marker { display: none; }
.booking-review .cupao-caixa > summary::before { content: '+'; margin-right: 6px; font-weight: 700; }
.booking-review .cupao-caixa[open] > summary::before { content: '−'; }
.booking-review .cupao-caixa > summary:hover { text-decoration: underline; text-underline-offset: 2px; }
.booking-review .cupao-caixa > summary:focus-visible { outline: 3px solid var(--ck-marinho); outline-offset: 2px; }

/* O campo e o botão, da mesma altura e com o mesmo raio. */
.booking-review .cupao-campo,
.booking-review .credito-campo {
    display: flex;
    gap: 8px;
    margin: 6px 0 4px;
}
.booking-review .cupao-campo input,
.booking-review .credito-campo input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--ck-linha);
    border-radius: 10px;
    background: #fff;
    color: var(--ck-tinta);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}
.booking-review .cupao-campo input:focus-visible,
.booking-review .credito-campo input:focus-visible {
    outline: 3px solid var(--ck-marinho);
    outline-offset: 2px;
}
.booking-review .cupao-campo button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: var(--ck-marinho);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
}
.booking-review .cupao-campo button:hover { background: #00224f; }
.booking-review .cupao-campo button:focus-visible { outline: 3px solid var(--ck-marinho); outline-offset: 2px; }

/* O crédito: o saldo ao lado do rótulo, e o que ele vale em dinheiro à
   frente do campo — era um "0 MT" solto que ninguém ligava ao número. */
.booking-review .credito { display: block; margin-top: 12px; }
.booking-review .credito-rotulo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    margin: 0;
    color: var(--ck-tinta);
    font-size: 15px;
    font-weight: 600;
}
.booking-review .credito-saldo {
    color: var(--ck-suave);
    font-size: 13px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}
.booking-review .credito-campo input { max-width: 140px; flex: 0 1 140px; }
.booking-review .credito-convertido {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--ck-fria);
    color: var(--ck-suave);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.booking-review .credito-ajuda,
.booking-review .cupao-ajuda {
    margin: 0;
    color: var(--ck-suave);
    font-size: 13px;
}

/* Um cupão já aplicado é dinheiro: mostra-se sempre, aberto. */
.booking-review .cupao-aplicados { margin: 0 0 8px; padding: 0; list-style: none; }
.booking-review .cupao-aplicados .item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px;
    border: 1px dashed #bcd0a8;
    border-radius: 8px;
    background: #f4f9ee;
    color: #2f5d1e;
    font-size: 14px;
}
.booking-review .cupao-aplicados .label { font-weight: 600; letter-spacing: .02em; }
.booking-review .cupao-retirar { margin-left: 8px; color: #a52020; font-size: 13px; }

.booking-review .section-coupon-form .message:empty { display: none; }
.booking-review .section-coupon-form .message .alert { margin: 8px 0 0; padding: 8px 12px; font-size: 14px; }

/* No telemóvel o botão desce para baixo do campo, em vez de o espremer. */
@media (max-width: 480px) {
    .booking-review .cupao-campo { flex-wrap: wrap; }
    .booking-review .cupao-campo button { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────
   Menu da conta, canto superior direito (18-09-2026).
   Ver themes/BC/Layout/parts/menu-da-conta.blade.php.

   O tema pinta este menu com `.bc_wrap .bc_topbar .content .dropdown-menu
   li a { display:block }` — cinco classes. Com menos, as regras daqui
   perdiam em silêncio: ícones colados ao texto, nome e e-mail a escuro
   sobre o azul. `--conta-texto` diz a cor de cada fundo: branco na barra
   escura, marinho no cabeçalho transparente e no cabeçalho claro.
   ───────────────────────────────────────────────────────────────────── */
.menu-da-conta { --conta-texto: #1a2b48; --conta-linha: rgba(26, 43, 72, .14); --conta-pastilha: rgba(26, 43, 72, .08); }
.bc_wrap .bc_topbar .content .dropdown-menu.menu-da-conta { --conta-texto: #fff; --conta-linha: rgba(255, 255, 255, .16); --conta-pastilha: rgba(255, 255, 255, .16); }
.frontend-page.header-transparent .bc_wrap .bc_topbar .content .topbar-right .topbar-items .dropdown-menu.menu-da-conta { --conta-texto: #1a2b48; --conta-linha: rgba(26, 43, 72, .14); --conta-pastilha: rgba(26, 43, 72, .08); }

.bc_wrap .dropdown-menu.menu-da-conta,
.bc_wrap .bc_topbar .content .topbar-right .dropdown-menu.menu-da-conta { min-width: 17rem; padding: .375rem 0; color: var(--conta-texto); }
.bc_wrap .bc_topbar .content .dropdown-menu.menu-da-conta li,
.bc_wrap .dropdown-menu.menu-da-conta li { display: block; float: none; margin: 0; border: 0; }
.bc_wrap .bc_topbar .content .dropdown-menu.menu-da-conta li a,
.bc_wrap .dropdown-menu.menu-da-conta li a {
    display: flex; align-items: center; gap: .75rem;
    padding: .5625rem 1.125rem; font-size: .9375rem; font-weight: 500; line-height: 1.4;
    white-space: nowrap; text-decoration: none; color: var(--conta-texto);
}
.bc_wrap .dropdown-menu.menu-da-conta li a > i { flex: 0 0 1.125rem; text-align: center; font-size: 1rem; opacity: .8; }
.bc_wrap .dropdown-menu.menu-da-conta li a:hover > i,
.bc_wrap .dropdown-menu.menu-da-conta li a:focus-visible > i { opacity: 1; }
.bc_wrap .dropdown-menu.menu-da-conta li a:focus-visible { outline: 2px solid var(--conta-texto); outline-offset: -2px; }

.bc_wrap .bc_topbar .content .dropdown-menu.menu-da-conta li.conta-quem,
.bc_wrap .dropdown-menu.menu-da-conta li.conta-quem {
    display: flex; flex-direction: column; gap: .125rem;
    padding: .625rem 1.125rem .75rem; margin-bottom: .25rem;
    border-bottom: 1px solid var(--conta-linha); color: var(--conta-texto);
}
.bc_wrap .dropdown-menu.menu-da-conta .conta-quem strong { font-size: .9375rem; font-weight: 700; line-height: 1.3; }
.bc_wrap .dropdown-menu.menu-da-conta .conta-quem span {
    font-size: .8125rem; opacity: .75; max-width: 18rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bc_wrap .dropdown-menu.menu-da-conta .conta-valor {
    margin-left: auto; padding: .0625rem .5rem; border-radius: 999px;
    background: var(--conta-pastilha); font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.bc_wrap .dropdown-menu.menu-da-conta .conta-valor--novo { background: #b42318; color: #fff; }
.bc_wrap .bc_topbar .content .dropdown-menu.menu-da-conta li.conta-sep,
.bc_wrap .dropdown-menu.menu-da-conta li.conta-sep {
    height: 1px; margin: .375rem 0; padding: 0; background: var(--conta-linha);
}

/* ─────────────────────────────────────────────────────────────────────
   Botão "Procurar" da pesquisa da página inicial (18-09-2026).
   Branco fino em maiúsculas sobre #5191fa: contraste de ~3:1, abaixo dos
   4,5:1 do texto. Passa ao azul da marca, com peso e sem maiúsculas.
   ───────────────────────────────────────────────────────────────────── */
.bc_wrap .bc_form .g-button-submit button,
.bc_wrap .bc_form .g-button-submit .btn-search {
    background: #002f6d; color: #fff;
    text-transform: none; font-weight: 700; font-size: 1.0625rem; letter-spacing: .01em;
}
.bc_wrap .bc_form .g-button-submit button:hover,
.bc_wrap .bc_form .g-button-submit button:focus-visible { background: #00224f; color: #fff; }
.bc_wrap .bc_form .g-button-submit button:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }

/* ========================================================================
   A caixa de reserva, do anúncio ao checkout (28-09-2026).

   Pedido do dono: "melhore a área pública, principalmente como fazer as
   reservas do anúncio à reserva, atenção ao design". Aberta no navegador nos
   cinco serviços que a usam (carro, embarcação, passeio, evento, imóvel).
   ======================================================================== */

/* ⚠️ A conta desalinhava-se depois de escolher a data. O tema põe os preços
   em `float:right`, e a regra de 16-09 deu-lhes letra maior do que a linha:
   cada preço caía para baixo do anterior. "Pagar agora" ficava sem valor, os
   100 MT apareciam ao lado de "Ao fornecedor", e os 1 000 MT do fornecedor
   saíam da caixa. Cada linha passa a ser uma fila: rótulo à esquerda, valor à
   direita, na mesma linha de base. */
.bc_single_book .form-section-total li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.bc_single_book .form-section-total li::before,
.bc_single_book .form-section-total li::after { content: none; }
.bc_single_book .form-section-total li label { margin: 0; }
.bc_single_book .form-section-total li .price {
    float: none;
    margin-left: auto;
    text-align: right;
    white-space: nowrap;
}

/* A faixa por cima da caixa e o separador activo estavam no azul-céu do tema
   (#5191fa), que não é da marca. Marinho, como o resto da plataforma. */
.bc_single_book_wrap .bc_single_book { border-top-color: #002f6d; }
.bc_single_book_wrap .bc_single_book .nav-enquiry .enquiry-item span {
    text-transform: none;
    font-size: 15px;
    letter-spacing: 0;
}
.bc_single_book_wrap .bc_single_book .nav-enquiry .enquiry-item.active span {
    color: #002f6d;
    font-weight: 600;
    border-bottom: 2px solid #002f6d;
}

/* "Preço desde": pequeno, por cima do número, que é o que se lê. */
.bc_single_book_wrap .bc_single_book .form-head .price .label {
    font-size: 13px;
    color: #55636d;
}

/* O campo da data.
   Era um título, uma frase cinzenta ("Seleccione a data.") e uma seta — um
   acordeão, e não um campo: nada dizia que se carregava ali. Passa a caixa com
   moldura e um calendário, como os outros campos da caixa. É a primeira
   decisão de quem reserva, e tem de se ver como uma. */
.bc_single_book_wrap .bc_single_book .form-date-field .date-wrapper {
    position: relative;
    margin: 16px 20px 0;
    padding: 10px 32px 10px 40px;
    border: 1px solid #cfd6df;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.bc_single_book_wrap .bc_single_book .form-date-field .date-wrapper:hover { border-color: #002f6d; }
.bc_single_book_wrap .bc_single_book .form-date-field .date-wrapper::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: #002f6d;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bc_single_book_wrap .bc_single_book .form-date-field .date-wrapper .arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -9px;
    font-size: 18px;
    color: #55636d;
}
.bc_single_book_wrap .bc_single_book .form-date-field .date-wrapper .check-in-wrapper label {
    display: block;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: #55636d;
}
.bc_single_book_wrap .bc_single_book .form-date-field .date-wrapper .render {
    font-size: 15px;
    font-weight: 500;
    color: #1a2b48;
    line-height: 1.4;
    /* Uma linha só, de altura estável (v0.029.6): "Seleccione a data." partia-se em
       duas e o campo ficava mais alto do que os vizinhos; a data escolhida ocupa a mesma linha. */
    min-height: 1.4em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* A data em falta (`custom/caixa-reserva.js`): moldura vermelha, e o
   calendário abre-se. A cor nunca vai sozinha — a frase do servidor continua
   por baixo do botão. */
.bc_single_book_wrap .bc_single_book .form-date-field .date-wrapper.falta-data {
    border-color: #b42318;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, .12);
}

/* O botão de reservar: a acção da página, em marinho, frase normal e não em
   maiúsculas — "RESERVAR AGORA" em azul-céu lia-se como mais um separador. */
.bc_single_book_wrap .bc_single_book .submit-group .btn,
.bc_single_book_wrap .bc_single_book .form-send-enquiry .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: #002f6d;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: 0 1px 2px rgba(0, 47, 109, .18);
    transition: background-color .15s, transform .15s;
}
.bc_single_book_wrap .bc_single_book .submit-group .btn:hover,
.bc_single_book_wrap .bc_single_book .form-send-enquiry .btn:hover { background: #00224f; color: #fff; }
.bc_single_book_wrap .bc_single_book .submit-group .btn:active { transform: translateY(1px); }
.bc_single_book_wrap .bc_single_book .submit-group .btn:focus-visible { outline: 3px solid #002f6d; outline-offset: 2px; }
.bc_single_book_wrap .bc_single_book .submit-group .btn.disabled { opacity: .7; cursor: progress; }
.bc_single_book_wrap .bc_single_book .submit-group .alert-text { margin-top: 10px; font-size: 13px; }

/* O mesmo marinho na barra de baixo do telemóvel, que abre a caixa. */
/* ⚠️ Os botões da barra são ligações (`<a>`): sem a cor da letra dita aqui, a
   regra das ligações da cor principal pintava-a de marinho sobre marinho. */
body .bc-more-book-mobile .btn-primary,
body .bc-more-book-mobile .btn-primary:hover,
body .bc-more-book-mobile .btn-primary:focus { color: #fff; }
.bc-more-book-mobile .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    background: #002f6d;
    font-weight: 600;
    text-transform: none;
}
.bc-more-book-mobile .btn-primary:hover { background: #00224f; }

@media (prefers-reduced-motion: reduce) {
    .bc_single_book_wrap .bc_single_book .form-date-field .date-wrapper,
    .bc_single_book_wrap .bc_single_book .submit-group .btn { transition: none; }
}

/* O separador escolhido da pesquisa da página inicial (28-09-2026).
   Com a cor principal em marinho, o activo (#002f6d) e os outros (#1a2b47)
   passaram a ser a mesma cor: já não se via que "Hotel" estava escolhido.
   Fica branco, colado à caixa branca da pesquisa, como uma aba de pasta. O
   `body` à frente é para passar a folha `custom-css`, que vem depois desta. */
body .bc_wrap .page-template-content .bc-form-search-all .g-form-control .nav-tabs li a.active {
    background-color: #fff;
    border-color: #fff;
    color: #002f6d;
    font-weight: 600;
}

/* O selo do desconto nos cartões dos resultados (28-09-2026).
   Era um círculo azul-céu metido meio por cima da fotografia, e a fotografia
   ficava à frente dele: via-se "32%" cortado ao meio. Camadas não resolveram
   (a imagem tem a sua). Passa a pastilha a seguir ao título, na cor de atenção
   da marca — laranja com tinta de carvão, nunca branco sobre laranja (2,24:1,
   `DESIGN.md`). */
.bc_wrap .item-loop .item-title .sale_info {
    position: static;
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
    margin: 0 0 0 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #ff9202;
    color: #1f2328;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    vertical-align: middle;
}

.bc-reviews .avaliacoes-vazio {
    margin: 4px 0 20px;
    padding: 14px 16px;
    border: 1px solid #e3e7eb;
    border-radius: 8px;
    background: #f7f9fb;
    color: #55636d;
    font-size: 15px;
}


/* O separador activo "Reservar | Consulta" também no hotel, que não usa a
   caixa lateral (28-09-2026): ficava azul-céu sobre cinzento, 2,94:1. O
   `!important` é para passar o da folha `custom-css`. */
body .nav-enquiry .enquiry-item span { text-transform: none !important; }
body .nav-enquiry .enquiry-item.active span {
    color: #002f6d !important;
    border-bottom: 2px solid #002f6d !important;
    font-weight: 600;
}

/* A caixa dos quartos do hotel (28-09-2026): a mesma faixa marinho e o mesmo
   botão em frase normal que a caixa dos outros serviços. */
body .hotel_rooms_form .nav-enquiry { border-top-color: #002f6d; }
/* ⚠️ O hotel.css carrega depois desta folha e diz o mesmo com mais classes
   (`.form-search-row .g-button-submit .btn`): é preciso o caminho inteiro. */
.hotel_rooms_form .form-search-rooms .form-search-row .g-button-submit .btn.btn-search {
    text-transform: none;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
}

/* O total do resumo do checkout (28-09-2026): o checkout.css do tema pinta-o
   de azul (#3490dc), e carrega depois desta folha — daí o `body`. É o número
   mais importante da coluna: vai à cor da marca. */
body .booking-review .booking-review-content .review-list li.final-total .val,
body .booking-review .booking-review-content .review-list li.final-total .label {
    color: #002f6d;
    font-weight: 700;
}

/* ── A página de contacto (28-09-2026) ─────────────────────────────────
   Formulário à esquerda, formas de falar connosco à direita, em marinho. As
   classes são novas (`.contacto-*`) para não herdar o `.bc-contact-block` do
   tema, que escondia os rótulos e punha a fotografia a mandar na página. */
.contacto { padding: 3rem 0 4.5rem; color: #1d2530; }
.contacto-cabeca { max-width: 44rem; margin-bottom: 2rem; }
.contacto-cabeca h1 { font-size: clamp(1.75rem, 3.2vw, 2.375rem); font-weight: 600; color: #002f6d; margin: 0 0 .5rem; line-height: 1.2; }
.contacto-cabeca p { font-size: 1.0625rem; color: #4a5563; margin: 0; line-height: 1.55; }

.contacto-grelha { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 991px) { .contacto-grelha { grid-template-columns: 1fr; } }

.contacto-titulo { font-size: 1.125rem; font-weight: 600; margin: 0 0 1.25rem; }

.contacto-cartao { background: #fff; border: 1px solid #dfe4ea; border-radius: 12px; padding: 1.75rem; box-shadow: 0 6px 20px -12px rgba(0, 47, 109, .25); }
.contacto-cartao .contacto-titulo { color: #002f6d; }

.contacto-campo { margin-bottom: 1.125rem; }
.contacto-campo label,
.contacto-par legend { display: block; font-size: .875rem; font-weight: 500; color: #1d2530; margin: 0 0 .375rem; }
.contacto-suave { font-weight: 400; color: #5e6b7a; font-size: .8125rem; }
.contacto-campo input,
.contacto-campo select,
.contacto-campo textarea {
    display: block; width: 100%; font: inherit; font-size: 1rem; color: #1d2530;
    background: #fff; border: 1px solid #c9d1db; border-radius: 8px;
    padding: .6875rem .875rem; min-height: 48px; transition: border-color .15s, box-shadow .15s;
}
.contacto-campo textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.contacto-campo input:focus,
.contacto-campo select:focus,
.contacto-campo textarea:focus { outline: none; border-color: #002f6d; box-shadow: 0 0 0 3px rgba(0, 47, 109, .15); }
.contacto-campo [aria-invalid="true"] { border-color: #b42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.contacto-erro { display: block; color: #b42318; font-size: .8125rem; margin-top: .3125rem; }
.contacto-erro:empty { display: none; }
.contacto-dica { display: block; margin-top: .375rem; font-size: .8125rem; color: #5e6b7a; }

.contacto-par { border: 0; padding: 0; margin: 0; min-width: 0; }
.contacto-par legend { width: auto; padding: 0; border: 0; }
.contacto-par-grelha { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
.contacto-par .contacto-campo label { font-weight: 400; color: #4a5563; }
@media (max-width: 575px) { .contacto-par-grelha { grid-template-columns: 1fr; } }

.contacto-erro-geral { background: #fdecea; color: #8a1c12; border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1.125rem; font-size: .9375rem; }

/* O campo que só os robôs vêem. */
.contacto-armadilha { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.contacto-botao {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 48px; padding: 0 1.75rem; border: 0; border-radius: 8px;
    background: #002f6d; color: #fff; font-size: 1rem; font-weight: 600;
    box-shadow: 0 4px 10px -4px rgba(0, 47, 109, .5); transition: background .15s, transform .15s;
    cursor: pointer;
}
.contacto-botao:hover { background: #00224f; }
.contacto-botao:active { transform: translateY(1px); box-shadow: 0 2px 6px -3px rgba(0, 47, 109, .5); }
.contacto-botao:focus-visible { outline: 3px solid #ff9202; outline-offset: 2px; }
.contacto-botao.a-enviar { cursor: progress; opacity: .8; }
.contacto-botao.a-enviar::after {
    content: ""; width: 1rem; height: 1rem; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: contacto-gira .8s linear infinite;
}
@keyframes contacto-gira { to { transform: rotate(360deg); } }
@media (max-width: 575px) { .contacto-botao { width: 100%; } }

.contacto-feito { text-align: left; padding: .5rem 0; outline: none; }
.contacto-feito-marca {
    display: inline-block; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #e6f4ea; position: relative; margin-bottom: .75rem;
}
.contacto-feito-marca::after {
    content: ""; position: absolute; left: 50%; top: 45%; width: .75rem; height: 1.25rem;
    border: solid #1e7a3a; border-width: 0 3px 3px 0; transform: translate(-50%, -50%) rotate(45deg);
}
.contacto-feito-titulo { font-size: 1.125rem; font-weight: 600; color: #1d2530; margin: 0 0 .25rem; }
.contacto-ligacao { background: none; border: 0; padding: 0; margin-top: 1rem; color: #002f6d; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.contacto-canais { background: #002f6d; color: #dbe2eb; border-radius: 12px; padding: 1.75rem; }
.contacto-fotografia { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; margin-bottom: 1.5rem; }
.contacto-canais .contacto-titulo { color: #fff; }
.contacto-canais ul { list-style: none; margin: 0; padding: 0; }
.contacto-canais li { padding: .875rem 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.contacto-canais li:first-child { border-top: 0; padding-top: 0; }
.contacto-canal-rotulo { display: block; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: #aebdd0; margin-bottom: .25rem; }
.contacto-canais li > a,
.contacto-canais li > span:not(.contacto-canal-rotulo) { color: #fff; font-size: 1.0625rem; font-weight: 500; word-break: break-word; }
.contacto-canais a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 146, 2, .7); text-underline-offset: 4px; }
.contacto-canais a:hover { color: #ffb44d; }
.contacto-canais a:focus-visible { outline: 3px solid #ff9202; outline-offset: 2px; border-radius: 2px; }
.contacto-mais { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .14); color: #dbe2eb; font-size: .9375rem; }
.contacto-mais h1, .contacto-mais h2, .contacto-mais h3, .contacto-mais h4 { color: #fff; font-size: 1rem; }
.contacto-ajuda { margin: 1.25rem 0 0; font-size: .9375rem; color: #dbe2eb; }
.contacto-canais ::selection, .contacto-canais::selection { background: #fff; color: #002f6d; }

@media (prefers-reduced-motion: reduce) {
    .contacto-botao, .contacto-campo input, .contacto-campo select, .contacto-campo textarea { transition: none; }
    .contacto-botao.a-enviar::after { animation: none; }
}

/* O posto administrativo do bairro, por baixo do nome (28-09-2026). */
.bc_detail_location .local-posto { margin: -.25rem 0 1rem; color: #5e6b7a; font-size: .9375rem; }

/* ── A página de contacto, segunda passagem (13-10-2026) ───────────────
   A mesma linguagem da Política de Privacidade e da página «Sobre o GVIM ADS»:
   topo em marinho com as acções directas, fundo claro, cartões de 18px com
   ícone. Os canais passaram a cartão branco — marinho debaixo de um topo
   marinho ficava pesado. */
.contacto { padding: 0; background: #f5f7fb; color: #1b2733; }
.contacto-topo { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 85% 10%, #0b4a9c 0%, #002f6d 45%, #001f4a 100%); color: #fff; }
.contacto-topo::after { content: ""; position: absolute; right: -8rem; bottom: -10rem; width: 26rem; height: 26rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 146, 2, .22), transparent 65%); pointer-events: none; }
.contacto-topo .container { position: relative; z-index: 1; padding-top: 3.5rem; padding-bottom: 3.5rem; }
.contacto .contacto-marca { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.1rem; padding: .3rem .8rem .3rem .35rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; font-size: .78rem; font-weight: 600; }
.contacto-marca__logo { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #ff9202; color: #1b1b1b; font-size: .6rem; font-weight: 800; letter-spacing: -.02em; }
.contacto-topo h1 { max-width: 40rem; margin: 0; color: #fff; font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.contacto .contacto-topo__texto { max-width: 38rem; margin: 1rem 0 0; color: #dbe2eb; font-size: 1.04rem; line-height: 1.65; }
.contacto-topo__accoes { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }
.contacto-topo__selo { position: absolute; right: 4%; top: 50%; display: grid; place-items: center; width: 13rem; height: 13rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03)); color: #ffbf66; transform: translateY(-50%); }
.contacto-topo__selo svg { width: 5.5rem; height: 5.5rem; stroke-width: 1.2; }
@media (max-width: 1199px) { .contacto-topo__selo { display: none; } }

.contacto-accao { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 46px; padding: .55rem 1.2rem; border: 1px solid transparent; border-radius: 999px; background: #ff9202; color: #1b1b1b; font-size: .95rem; font-weight: 600; text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.contacto-accao svg { width: 1.1rem; height: 1.1rem; }
.contacto-accao:hover { background: #ffa733; color: #1b1b1b; text-decoration: none; transform: translateY(-1px); }
.contacto-accao--claro { border-color: rgba(255, 255, 255, .45); background: transparent; color: #fff; }
.contacto-accao--claro:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }
.contacto-accao--marinho { background: #002f6d; color: #fff; }
.contacto-accao--marinho:hover { background: #001f4a; color: #fff; }
.contacto-accao:focus-visible { outline: 3px solid #ff9202; outline-offset: 2px; }

.contacto-corpo { padding-top: 2.5rem; padding-bottom: 4rem; }
.contacto-grelha { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1.5rem; }
.contacto-cartao { padding: 2rem; border: 1px solid #e2e8f0; border-radius: 18px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.contacto-cartao__cabeca { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.4rem; }
.contacto-cartao__cabeca .contacto-titulo { margin: 0; }
.contacto .contacto-titulo { color: #002f6d; font-size: 1.3rem; font-weight: 700; line-height: 1.25; }
.contacto-icone { display: inline-grid; place-items: center; flex: 0 0 auto; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: #eaf1fb; color: #002f6d; }
.contacto-icone svg { width: 1.35rem; height: 1.35rem; }
.contacto-icone--laranja { background: #fff4e5; color: #b45f00; }
.contacto-campo input, .contacto-campo select, .contacto-campo textarea { border-radius: 10px; }

.contacto-envio { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem; }
.contacto .contacto-privacidade { display: flex; align-items: flex-start; gap: .45rem; flex: 1 1 15rem; margin: 0; color: #5b6b7f; font-size: .84rem; line-height: 1.5; }
.contacto-privacidade svg { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: .15rem; color: #17703f; }
.contacto-privacidade a { color: #002f6d; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.contacto-lado { display: grid; gap: 1.5rem; }
.contacto-canais { padding: 1.75rem; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; color: #334155; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.contacto-canais ul { display: grid; gap: .25rem; }
.contacto-canais li { display: flex; align-items: center; gap: .85rem; padding: .7rem 0; border-top: 1px solid #edf1f6; }
.contacto-canais li:first-child { border-top: 0; padding-top: 0; }
.contacto-canais .contacto-canal-rotulo { color: #5b6b7f; font-size: .72rem; font-weight: 700; letter-spacing: .05em; }
.contacto-canais li a, .contacto-canais .contacto-canal-valor { display: block; color: #1b2733; font-size: 1rem; font-weight: 600; line-height: 1.4; word-break: break-word; }
.contacto-canais li a { color: #002f6d; text-decoration: none; }
.contacto-canais li a:hover { color: #001f4a; text-decoration: underline; text-underline-offset: 3px; }
.contacto-canais .contacto-mais { border-top-color: #edf1f6; color: #334155; }
.contacto-canais .contacto-mais h1, .contacto-canais .contacto-mais h2, .contacto-canais .contacto-mais h3, .contacto-canais .contacto-mais h4 { color: #002f6d; }
.contacto-canais ::selection, .contacto-canais::selection { background: rgba(255, 146, 2, .28); color: inherit; }

.contacto-ajuda-cartao { display: flex; gap: .9rem; align-items: flex-start; padding: 1.5rem; border: 1px solid #f6c27a; border-radius: 18px; background: #fff8eb; }
.contacto-ajuda-cartao .contacto-titulo { font-size: 1.1rem; margin: 0 0 .35rem; }
.contacto .contacto-ajuda { margin: 0 0 1rem; color: #5c3d00; font-size: .93rem; line-height: 1.55; }

@media (max-width: 991px) { .contacto-grelha { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) {
    .contacto-topo .container { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .contacto-cartao, .contacto-canais { padding: 1.35rem; border-radius: 16px; }
    .contacto-topo__accoes .contacto-accao { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .contacto-accao { transition: none; } .contacto-accao:hover { transform: none; } }
/* A regra antiga `.contacto-canais li > span` pintava de branco tudo o que é
   filho directo da linha — o ícone incluído (era para o fundo marinho). */
.contacto-canais li > span:not(.contacto-canal-rotulo) { color: #1b2733; font-size: inherit; font-weight: inherit; }
.contacto-canais li > span.contacto-icone { color: #002f6d; }

/* As janelas «Iniciar sessão» e «Registar» (13-10-2026), na linguagem das
   páginas /login e /register. O tema pinta-as com
   `.frontend-page .modal.login .modal-content .modal-body …` (cinco classes):
   as regras daqui levam `.janela-conta` a mais para passarem à frente sem
   !important. O botão era azul-céu e em maiúsculas. */
:is(.bc-form-login, .bc-form-register) .bc-rotulo { display: block; margin: 0 0 .35rem; color: #1b2733; font-size: .86rem; font-weight: 600; }
.modal.login.janela-conta .modal-dialog { max-width: 30rem; }
.modal.login.janela-conta#register .modal-dialog { max-width: 34rem; }
.modal.login.janela-conta .modal-content { padding: 1.75rem 1.75rem 1.5rem; border: 0; border-radius: 20px; box-shadow: 0 30px 60px -30px rgba(0, 31, 74, .45); }
.modal.login.janela-conta .modal-content .modal-header { align-items: flex-start; gap: 1rem; padding: 0 0 1.25rem; }
.modal.login.janela-conta .modal-content .modal-header .modal-title { margin: 0; color: #002f6d; font-size: 1.4rem; font-weight: 700; line-height: 1.25; }
.modal.login.janela-conta .janela-conta__sub { margin: .3rem 0 0; color: #5b6b7f; font-size: .9rem; line-height: 1.5; }
.modal.login.janela-conta .janela-conta__fechar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; margin: -.4rem -.5rem 0 0; padding: 0; border: 0; border-radius: 50%; background: #f1f4f9; color: #334155; cursor: pointer; transition: background .15s ease, color .15s ease; }
.modal.login.janela-conta .janela-conta__fechar:hover { background: #e2e8f0; color: #002f6d; }
.modal.login.janela-conta .janela-conta__fechar svg { width: 1.15rem; height: 1.15rem; }
.modal.login.janela-conta .modal-content .modal-body .form-group { margin-bottom: 1rem; }
.modal.login.janela-conta .modal-content .modal-body .form-group .form-control { height: 46px; padding: 0 .9rem; border: 1px solid #c9d1db; border-radius: 10px; color: #1b2733; font-size: 1rem; transition: border-color .15s, box-shadow .15s; }
.modal.login.janela-conta .modal-content .modal-body .form-group .reg-pw-caixa .form-control { padding-right: 3rem; }
.modal.login.janela-conta .modal-content .modal-body .form-group .form-control:focus { border-color: #002f6d; box-shadow: 0 0 0 3px rgba(0, 47, 109, .15); }
.modal.login.janela-conta .modal-content .modal-body label.bc-rotulo { margin-bottom: .35rem; color: #1b2733; font-size: .86rem; font-weight: 600; }
.modal.login.janela-conta .modal-content .modal-body label.en-lembrar,
.modal.login.janela-conta .modal-content .modal-body label.reg-termos { display: inline-flex; align-items: flex-start; gap: .45rem; color: #334155; font-size: .9rem; line-height: 1.5; cursor: pointer; }
.modal.login.janela-conta .modal-content .modal-body label.en-lembrar { align-items: center; }
.modal.login.janela-conta .modal-content .modal-body input[type="checkbox"] { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin: .2rem 0 0; accent-color: #002f6d; }
.modal.login.janela-conta .modal-content .modal-body label.en-lembrar input[type="checkbox"] { margin-top: 0; }
.modal.login.janela-conta .checkmark { display: none; }
.modal.login.janela-conta .modal-body a { color: #002f6d; font-weight: 600; }
.modal.login.janela-conta .modal-body .bc-ajuda { display: block; margin-top: .3rem; color: #5b6b7f; font-size: .8rem; }
.modal.login.janela-conta .modal-body .row { margin-left: -.4rem; margin-right: -.4rem; }
.modal.login.janela-conta .modal-body .row > [class*="col-"] { padding-left: .4rem; padding-right: .4rem; }
.modal.login.janela-conta .modal-content .modal-body .form-submit { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: auto; min-height: 50px; border-radius: 999px; background: #002f6d; color: #fff; font-size: 1rem; font-weight: 600; text-transform: none; transition: background .2s ease; }
.modal.login.janela-conta .modal-content .modal-body .form-submit:hover { background: #001f4a; }
.modal.login.janela-conta .modal-body .message-error .alert { margin: 0 0 1rem; border-radius: 10px; font-size: .9rem; }
.modal.login.janela-conta .modal-body .invalid-feedback { font-size: .82rem; }
.modal.login.janela-conta .modal-body .c-grey { color: #5b6b7f; }
.modal.login.janela-conta a:focus-visible, .modal.login.janela-conta button:focus-visible, .modal.login.janela-conta input:focus-visible { outline: 3px solid #ff9202; outline-offset: 2px; }
/* No telemóvel a janela ocupa o ecrã inteiro e rola por dentro: com o teclado
   aberto, um cartão centrado escondia o botão. */
@media (max-width: 575px) {
    .modal.login.janela-conta .modal-dialog, .modal.login.janela-conta#register .modal-dialog { max-width: none; min-height: 100%; margin: 0; align-items: stretch; }
    .modal.login.janela-conta .modal-content { min-height: 100dvh; padding: 1.25rem 1.15rem 1.5rem; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .modal.login.janela-conta .janela-conta__fechar, .modal.login.janela-conta .modal-content .modal-body .form-submit { transition: none; } }

/* O logótipo das páginas e janelas de conta (17-10-2026). Ligado ao início, no
   topo do cartão e da janela — o cartão vem primeiro no telemóvel, por isso é
   lá que a marca tem de estar, e não no lado marinho. */
.auth-logo { display: inline-flex; align-items: center; margin: 0 0 1.5rem; padding: 0; border-radius: 8px; line-height: 0; text-decoration: none; }
.auth-logo img { display: block; width: auto; height: 44px; max-width: 100%; }
.auth-logo__texto { color: #002f6d; font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.auth-logo:focus-visible { outline: 3px solid #ff9202; outline-offset: 4px; }
.modal.login.janela-conta .auth-logo { margin-bottom: 1rem; }
.modal.login.janela-conta .auth-logo img { height: 38px; }
/* Linha própria: o cadeado (.en-selo) é inline e ficava ao lado do logótipo. */
.en-cartao .auth-logo { display: flex; width: fit-content; }
.en-cartao--so .auth-logo { margin-bottom: 1.25rem; }
@media (max-width: 767px) { .en-cartao .auth-logo { margin-bottom: 1.25rem; } .en-cartao .auth-logo img { height: 40px; } }

/* Entrar com uma conta de fora (17-10-2026): ver Layout::auth._social. */
.auth-social { margin-top: 1.25rem; }
.auth-social__ou { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; color: #5b6b7f; font-size: .85rem; text-align: center; }
.auth-social__ou::before, .auth-social__ou::after { content: ""; flex: 1 1 auto; border-top: 1px solid #e2e8f0; }
.auth-social__botoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .625rem; }
.auth-social a.auth-social__bt { display: flex; align-items: center; justify-content: center; gap: .625rem; min-height: 48px; padding: .5rem 1rem; border: 1px solid #dadce0; border-radius: 999px; background: #fff; color: #1f2933; font-size: .95rem; font-weight: 600; line-height: 1.2; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; }
.auth-social a.auth-social__bt:hover { background: #f8fafd; border-color: #c4cbd5; color: #1f2933; text-decoration: none; }
.auth-social a.auth-social__bt:focus-visible { outline: 3px solid #ff9202; outline-offset: 2px; }
.auth-social a.auth-social__bt--facebook { border-color: #1877f2; background: #1877f2; color: #fff; }
.auth-social a.auth-social__bt--facebook:hover { background: #1465d0; border-color: #1465d0; color: #fff; }
.auth-social a.auth-social__bt--x { border-color: #111; background: #111; color: #fff; }
.auth-social a.auth-social__bt--x:hover { background: #2a2a2a; border-color: #2a2a2a; color: #fff; }
.auth-social .auth-social__bt svg, .auth-social .auth-social__bt i { flex: none; }
/* A ligação «Sem conta? / Já tem conta?» que vem depois não pode ficar colada ao botão. */
.auth-social + .c-grey { margin-top: 1.25rem; }
@media (prefers-reduced-motion: reduce) { .auth-social a.auth-social__bt { transition: none; } }


/* ------------------------------------------------------------------------- */
/* Center Pemba na página inicial (19-10-2026): bloco `center_pemba_inicio`.  */
/* Marinho da marca, laranja só como acento (com tinta escura, nunca branco), */
/* o estado dito por palavra e ponto. Tudo leva ao /centerpemba.              */
/* ------------------------------------------------------------------------- */
.cpb { --cpb-marinho: #002f6d; --cpb-escuro: #001f4a; --cpb-laranja: #ff9202; padding: 3rem 0; font-family: Poppins, system-ui, sans-serif; }
.cpb *, .cpb *::before, .cpb *::after { box-sizing: border-box; }
.cpb__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.cpb__painel { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2.5rem; align-items: center; max-width: 1170px; margin: 0 auto; padding: 2.75rem; overflow: hidden; overflow: clip; border-radius: 28px; color: #fff; background: radial-gradient(110% 130% at 90% 0%, #0b4a9c 0%, var(--cpb-marinho) 48%, var(--cpb-escuro) 100%); box-shadow: 0 40px 70px -40px rgba(0, 31, 74, .7); }
.cpb__painel::before { content: ""; position: absolute; right: -9rem; bottom: -12rem; width: 28rem; height: 28rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 146, 2, .22), transparent 65%); pointer-events: none; }
.cpb__painel::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent, #000 70%); pointer-events: none; }
.cpb__texto, .cpb__montra { position: relative; z-index: 1; min-width: 0; }
.cpb__ola { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .9rem; padding: .3rem .8rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .07); color: #ffd39a; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.cpb__ponto { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); animation: cpb-pulsar 2.4s ease-in-out infinite; }
@keyframes cpb-pulsar { 50% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } }
.cpb__titulo { margin: 0; color: #fff; font-size: clamp(1.65rem, 3.2vw, 2.4rem); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.cpb__sub { max-width: 34rem; margin: .8rem 0 0; color: #d6e0ee; font-size: 1.02rem; line-height: 1.6; }
.cpb__busca { display: flex; align-items: center; gap: .5rem; max-width: 34rem; margin: 1.5rem 0 0; padding: .35rem .35rem .35rem 1rem; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px -22px rgba(0, 16, 40, .7); }
.cpb__busca:focus-within { outline: 3px solid var(--cpb-laranja); outline-offset: 2px; }
.cpb__busca svg { flex: none; width: 1.25rem; height: 1.25rem; color: #64748b; }
.cpb__busca input { flex: 1 1 auto; min-width: 0; height: 2.9rem; border: 0; outline: 0; background: transparent; color: #1b2733; font-size: 1rem; }
.cpb__busca input::placeholder { color: #7a8797; }
.cpb__busca button { flex: none; min-height: 2.9rem; padding: 0 1.2rem; border: 0; border-radius: 12px; background: var(--cpb-marinho); color: #fff; font-weight: 600; cursor: pointer; }
.cpb__busca button:hover { background: var(--cpb-escuro); }
.cpb__atalhos { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.cpb__atalhos a { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: .35rem .85rem; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .07); color: #fff !important; font-size: .86rem; font-weight: 500; text-decoration: none !important; transition: background-color .15s ease, border-color .15s ease; }
.cpb__atalhos a:hover { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .15); }
.cpb__atalhos svg { width: 1.05rem; height: 1.05rem; color: #ffbf66; }
.cpb__botao { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.6rem; min-height: 52px; padding: .6rem 1.4rem; border-radius: 14px; background: var(--cpb-laranja); color: #1b1b1b !important; font-size: 1rem; font-weight: 700; text-decoration: none !important; box-shadow: 0 14px 26px -14px rgba(255, 146, 2, .8); transition: transform .15s ease, box-shadow .15s ease; }
.cpb__botao:hover { transform: translateY(-1px); box-shadow: 0 18px 30px -14px rgba(255, 146, 2, .9); }
.cpb__botao svg { width: 1.2rem; height: 1.2rem; transition: transform .15s ease; }
.cpb__botao:hover svg { transform: translateX(3px); }
.cpb :is(a, button):focus-visible { outline: 3px solid var(--cpb-laranja); outline-offset: 2px; }

.cpb__montra { display: grid; gap: .75rem; padding: 1rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 22px; background: rgba(255, 255, 255, .06); backdrop-filter: blur(6px); }
.cpb__numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.cpb__numero { display: grid; gap: .1rem; padding: .7rem .8rem; border-radius: 14px; background: rgba(255, 255, 255, .08); color: #fff !important; text-decoration: none !important; transition: background-color .15s ease; }
.cpb__numero:hover { background: rgba(255, 255, 255, .14); }
.cpb__numero strong { font-size: 1.6rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cpb__numero span { display: inline-flex; align-items: center; gap: .35rem; color: #c9d4e2; font-size: .76rem; font-weight: 500; }
.cpb__numero--verde { background: rgba(52, 211, 153, .14); }
.cpb__numero--verde strong { color: #6ee7b7; }
.cpb__numero .cpb__ponto { width: .45rem; height: .45rem; }
.cpb__lista { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.cpb__item { display: flex; align-items: center; gap: .6rem; padding: .6rem .6rem .6rem .7rem; border-radius: 16px; background: #fff; color: #1b2733; box-shadow: 0 10px 22px -18px rgba(0, 0, 0, .6); }
.cpb__quem { display: flex; flex: 1 1 auto; align-items: center; gap: .7rem; min-width: 0; color: inherit !important; text-decoration: none !important; }
.cpb__icone { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; overflow: hidden; border-radius: 12px; background: #e7eef8; color: var(--cpb-marinho); }
.cpb__icone svg { width: 1.3rem; height: 1.3rem; }
.cpb__icone img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.cpb__item[data-grupo="saude"] .cpb__icone { background: #feecef; color: #c81e3a; }
.cpb__item[data-grupo="combustivel"] .cpb__icone { background: #fff3df; color: #b45309; }
.cpb__item[data-grupo="servicos"] .cpb__icone { background: #e3f5f8; color: #0e7490; }
.cpb__item[data-grupo="financas"] .cpb__icone { background: #e6f6ec; color: #15803d; }
.cpb__item[data-grupo="educacao"] .cpb__icone { background: #eaf0ff; color: #1d4ed8; }
.cpb__item[data-grupo="governo"] .cpb__icone { background: #f1ebff; color: #6d28d9; }
.cpb__nome { display: grid; min-width: 0; line-height: 1.3; }
.cpb__nome b, .cpb__nome small, .cpb__estado { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpb__nome b { font-size: .92rem; font-weight: 650; }
.cpb__nome small { color: #5b6b7f; font-size: .76rem; }
.cpb__estado { font-size: .76rem; font-style: normal; font-weight: 600; }
.cpb__estado--aberto { color: #0f6b3f; } .cpb__estado--fecha_em_breve { color: #8a4b00; } .cpb__estado--fechado { color: #b42318; } .cpb__estado--duvida { color: #475569; }
.cpb__ligar { display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--cpb-marinho); color: #fff !important; }
.cpb__ligar:hover { background: var(--cpb-escuro); }
.cpb__ligar svg { width: 1.15rem; height: 1.15rem; }
.cpb__alerta { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border-radius: 14px; background: rgba(255, 146, 2, .16); color: #ffd39a !important; font-size: .86rem; font-weight: 600; text-decoration: none !important; }
.cpb__alerta svg { flex: none; width: 1.05rem; height: 1.05rem; }
.cpb__alerta span { flex: 1 1 auto; }
@media (max-width: 991px) { .cpb__painel { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; padding: 2rem; } }
@media (max-width: 575px) {
    .cpb { padding: 2rem 0; }
    .cpb__painel { margin: 0 .75rem; padding: 1.5rem 1.1rem; border-radius: 22px; }
    .cpb__busca button { display: none; }
    .cpb__atalhos { flex-wrap: nowrap; margin-right: -1.1rem; overflow-x: auto; scrollbar-width: none; }
    .cpb__atalhos::-webkit-scrollbar { display: none; }
    .cpb__atalhos a { white-space: nowrap; }
    .cpb__botao { justify-content: center; width: 100%; }
    .cpb__numero strong { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) { .cpb *, .cpb *::before, .cpb *::after { animation: none !important; transition: none !important; } }


/* ------------------------------------------------------------------------- */
/* O rodapé (19-10-2026). Newsletter num cartão por cima do corpo em marinho; */
/* a marca e os contactos à esquerda, as colunas (editáveis no painel) à      */
/* direita; a barra final com o copyright, os meios de pagamento e o autor.   */
/* `.bc_footer.rodape` ganha às regras do tema, que pintavam o rodapé antigo.     */
/* ⚠️ `overflow: clip` e não só `hidden`: uma caixa `hidden` rola por programa —  */
/* focar um link com o teclado (ou um scrollIntoView) deslocava o conteúdo e     */
/* deixava um buraco vazio no fundo do rodapé. `hidden` fica como reserva.       */
/* ------------------------------------------------------------------------- */
.bc_footer.rodape { --rp-marinho: #002f6d; --rp-escuro: #001a3d; --rp-laranja: #ff9202; padding: 0; margin-top: 3rem; background: transparent; border: 0; font-family: Poppins, system-ui, sans-serif; }
.rodape *, .rodape *::before, .rodape *::after { box-sizing: border-box; }
.rodape__sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.rodape :is(a, button, input):focus-visible { outline: 3px solid var(--rp-laranja); outline-offset: 2px; }

.rodape__news { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 1.5rem 2.5rem; align-items: center; margin-bottom: -3.75rem; padding: 1.75rem 2rem; border: 1px solid #e2e8f0; border-radius: 22px; background: #fff; box-shadow: 0 30px 50px -36px rgba(0, 31, 74, .6); }
.rodape__news-texto { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.rodape__news-icone { display: inline-grid; place-items: center; flex: none; width: 3.25rem; height: 3.25rem; border-radius: 16px; background: #fff3df; color: #b45309; }
.rodape__news-icone svg { width: 1.6rem; height: 1.6rem; }
.rodape__news h2 { margin: 0; color: var(--rp-marinho); font-size: 1.3rem; font-weight: 700; line-height: 1.25; }
.rodape__news p { margin: .25rem 0 0; color: #5b6b7f; font-size: .92rem; line-height: 1.5; }
.rodape .rodape__news-form { margin: 0; }
.rodape .rodape__news-form .form-group { display: flex; gap: .4rem; margin: 0; padding: .35rem; border: 1px solid #c9d1db; border-radius: 14px; background: #fff; }
.rodape .rodape__news-form .form-group:focus-within { border-color: var(--rp-marinho); box-shadow: 0 0 0 3px rgba(0, 47, 109, .14); }
.rodape .rodape__news-form .email-input { flex: 1 1 auto; min-width: 0; height: 2.85rem; padding: 0 .75rem; border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: #1b2733; font-size: .95rem; }
.rodape .rodape__news-form .email-input:focus { outline: 0; box-shadow: none; }
.rodape .rodape__news-form .btn-submit { position: relative; flex: none; height: 2.85rem; padding: 0 1.25rem; border: 0; border-radius: 10px; background: var(--rp-marinho); color: #fff; font-size: .92rem; font-weight: 600; letter-spacing: 0; text-transform: none; cursor: pointer; }
.rodape .rodape__news-form .btn-submit:hover { background: var(--rp-escuro); }
.rodape .rodape__news-form .btn-submit .fa-spinner { display: none; }
.rodape .rodape__news-form.loading .btn-submit .fa-spinner { display: inline-block; }
.rodape .rodape__news-form .form-mess { margin-top: .4rem; font-size: .84rem; }

.rodape__corpo { position: relative; overflow: hidden; overflow: clip; padding: 6.5rem 0 3rem; color: #d6e0ee; background: radial-gradient(120% 140% at 100% 0%, #0b4a9c 0%, var(--rp-marinho) 40%, var(--rp-escuro) 100%); }
.rodape__corpo::after { content: ""; position: absolute; left: -10rem; bottom: -14rem; width: 30rem; height: 30rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 146, 2, .14), transparent 65%); pointer-events: none; }
.rodape__corpo .container { position: relative; z-index: 1; }
.rodape__grelha { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 2.6fr); gap: 3rem; }
.rodape__logo { display: inline-flex; align-items: center; padding: .6rem .85rem; border-radius: 14px; background: #fff; line-height: 0; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .6); }
.rodape__logo img { width: auto; height: 38px; max-width: 170px; object-fit: contain; }
.rodape__logo span { color: var(--rp-marinho); font-size: 1.1rem; font-weight: 700; line-height: 1.2; }
.rodape__lema { max-width: 22rem; margin: 1rem 0 1.25rem; color: #c9d4e2; font-size: .9rem; line-height: 1.6; }
.rodape__contactos { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.rodape__contactos a, .rodape__sem-link { display: inline-flex; align-items: flex-start; gap: .6rem; color: #fff !important; font-size: .92rem; line-height: 1.45; text-decoration: none !important; }
.rodape__contactos a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.rodape__sem-link { color: #c9d4e2 !important; }
.rodape__contactos svg { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; color: #ffbf66; }
.rodape__redes { display: flex; gap: .5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.rodape__redes a { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; background: rgba(255, 255, 255, .06); color: #fff !important; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.rodape__redes a:hover { border-color: var(--rp-laranja); background: var(--rp-laranja); color: #1b1b1b !important; transform: translateY(-2px); }
.rodape__redes svg { width: 1.15rem; height: 1.15rem; }

.rodape__colunas { display: grid; grid-template-columns: repeat(var(--rp-n, 3), minmax(0, 1fr)) minmax(17rem, 1.6fr); gap: 2rem 2rem; }
.rodape__coluna h3 { margin: 0 0 1rem; color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.rodape__coluna h3::after { content: ""; display: block; width: 1.75rem; height: 2px; margin-top: .6rem; border-radius: 2px; background: var(--rp-laranja); }
.rodape__links ul { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.rodape__links li { margin: 0; padding: 0; }
.rodape__links a, .rodape__mini { display: inline-flex; align-items: center; min-height: 28px; color: #c9d4e2 !important; font-size: .9rem; text-decoration: none !important; transition: color .15s ease, transform .15s ease; }
.rodape__links a:hover, .rodape__mini:hover { color: #fff !important; transform: translateX(3px); }
.rodape__center { position: relative; display: grid; gap: .85rem; padding: 1.1rem; overflow: hidden; overflow: clip; border: 1px solid rgba(255, 191, 102, .35); border-radius: 20px; background: linear-gradient(160deg, rgba(255, 146, 2, .16) 0%, rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .04) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 20px 40px -30px rgba(0, 0, 0, .8); }
.rodape__center::before { content: ""; position: absolute; top: -3.5rem; right: -3.5rem; width: 9rem; height: 9rem; border-radius: 50%; background: radial-gradient(circle, rgba(255, 146, 2, .28), transparent 70%); pointer-events: none; }
.rodape__center-topo { position: relative; display: flex; align-items: center; gap: .75rem; }
.rodape__center-icone { display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 14px; background: var(--rp-laranja); color: #1b1b1b; box-shadow: 0 10px 20px -12px rgba(255, 146, 2, .9); }
.rodape__center-icone svg { width: 1.3rem; height: 1.3rem; }
.rodape__center-nome { margin: 0; color: #fff; font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.rodape__center-desc { margin: .15rem 0 0; color: #c9d4e2; font-size: .8rem; line-height: 1.4; }
.rodape__center-numeros { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.rodape__center-num { display: grid; gap: .1rem; padding: .55rem .7rem; border-radius: 12px; background: rgba(255, 255, 255, .08); color: #fff !important; text-decoration: none !important; transition: background-color .15s ease; }
.rodape__center-num:hover { background: rgba(255, 255, 255, .14); }
.rodape__center-num strong { font-size: 1.35rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rodape__center-num span { display: inline-flex; align-items: center; gap: .35rem; color: #c9d4e2; font-size: .74rem; }
.rodape__center-num--verde { background: rgba(52, 211, 153, .13); }
.rodape__center-num--verde strong { color: #6ee7b7; }
.rodape__center-num i { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); animation: cpb-pulsar 2.4s ease-in-out infinite; }
.rodape__center-atalhos { position: relative; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.rodape__center-atalhos a { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; padding: .2rem .65rem; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: rgba(255, 255, 255, .05); color: #fff !important; font-size: .78rem; font-weight: 500; text-decoration: none !important; transition: background-color .15s ease, border-color .15s ease; }
.rodape__center-atalhos a:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12); }
.rodape__center-atalhos svg { width: .95rem; height: .95rem; color: #ffbf66; }
.rodape__center-botao { position: relative; display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; border-radius: 12px; background: var(--rp-laranja); color: #1b1b1b !important; font-size: .9rem; font-weight: 700; text-decoration: none !important; transition: transform .15s ease, box-shadow .15s ease; }
.rodape__center-botao:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -12px rgba(255, 146, 2, .9); }
.rodape__center-botao svg { width: 1.05rem; height: 1.05rem; transition: transform .15s ease; }
.rodape__center-botao:hover svg { transform: translateX(3px); }
.rodape__mini { gap: .45rem; margin-top: .85rem; }
.rodape__mini svg { width: 1rem; height: 1rem; color: #ffbf66; }

.rodape__fim { padding: 1.1rem 0; color: #9fb0c6; background: var(--rp-escuro); border-top: 1px solid rgba(255, 255, 255, .08); font-size: .84rem; }
.rodape__fim-linha { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.rodape__fim p { margin: 0; }
.rodape__copy { flex: 1 1 auto; }
.rodape__versao { margin: .25rem 0 0; font-size: .75rem; opacity: .8; }
.rodape__autor a { color: #fff !important; }
.rodape__pagamentos { display: flex; flex-wrap: wrap; gap: .35rem; }
.rodape__pagamentos { align-items: center; }
.rodape__pagamentos span { padding: .2rem .6rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; color: #d6e0ee; font-size: .74rem; font-weight: 600; }
.rodape__pagamentos .rodape__citkin { display: inline-flex; align-items: center; padding: .2rem .65rem; border-color: #fff; background: #fff; line-height: 0; }
.rodape__citkin img { width: auto; height: 20px; }
.rodape__topo { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff !important; }
.rodape__topo:hover { background: var(--rp-laranja); color: #1b1b1b !important; }
.rodape__topo svg { width: 1.1rem; height: 1.1rem; }

@media (max-width: 1199px) { .rodape__colunas { grid-template-columns: repeat(var(--rp-n, 3), minmax(0, 1fr)); } .rodape__coluna--util { grid-column: 1 / -1; max-width: 26rem; } }
@media (max-width: 991px) {
    .rodape__news { grid-template-columns: minmax(0, 1fr); }
    .rodape__grelha { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
}
@media (max-width: 575px) {
    .rodape__news { margin-bottom: -2.5rem; padding: 1.25rem; border-radius: 18px; }
    .rodape__news-icone { display: none; }
    .rodape__news h2 { font-size: 1.15rem; }
    .rodape__corpo { padding-top: 4.5rem; }
    .rodape__colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rodape__coluna--util { max-width: none; }
    .rodape__coluna--util { grid-column: 1 / -1; }
    .rodape__fim-linha { flex-direction: column; align-items: flex-start; padding-right: 3.25rem; }
    .rodape__topo { position: absolute; right: 1rem; }
    .rodape__fim { position: relative; }
}
@media (prefers-reduced-motion: reduce) { .rodape *, .rodape *::before, .rodape *::after { transition: none !important; } }


/* Avaliar um anúncio (21-10-2026): o formulário como superfície própria — um cartão, uma nota que se
   vê a formar, estrelas por rádios (teclado e leitor de ecrã). Sem cartões dentro de cartões. */
.bc-reviews .review-form { background: #fff; border: 1px solid #e3e7eb; border-radius: 16px; overflow: hidden; margin-top: 2rem; box-shadow: 0 1px 2px #002f6d0f, 0 12px 32px #002f6d0d; }
.bc-reviews .review-form .title-form { background: #fff; border: 0; padding: 1.75rem 2rem .25rem; margin: 0; }
.bc-reviews .review-form .title-form h4 { font-size: 1.25rem; font-weight: 700; color: #002f6d; margin: 0 0 .25rem; letter-spacing: -.01em; }
.bc-reviews .review-form .title-form p { margin: 0; color: #5e6d77; font-size: .875rem; }
.bc-reviews .review-form .form-wrapper { padding: 1.25rem 2rem 2rem; }
.bc-reviews .av-grelha { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; grid-template-areas: "titulo nota" "texto nota"; gap: 1.25rem 2.5rem; align-items: start; }
.bc-reviews .av-campo--titulo { grid-area: titulo; }
.bc-reviews .av-campo--texto { grid-area: texto; }
.bc-reviews .av-nota { grid-area: nota; background: #f4f7fb; border-radius: 12px; padding: 1.25rem 1.25rem .5rem; }
.bc-reviews .av-form label { display: block; font-weight: 600; font-size: .875rem; color: #002f6d; margin-bottom: .375rem; }
.bc-reviews .av-form .form-control { border: 1px solid #b5c0cd; border-radius: 8px; min-height: 48px; padding: .75rem 1rem; font-size: 1rem; box-shadow: none; }
.bc-reviews .av-form .form-control:focus { border-color: #002f6d; outline: 3px solid #c6d7ec; outline-offset: 2px; }
.bc-reviews .av-form textarea.form-control { height: 9.5rem; resize: vertical; }
.bc-reviews .av-ajuda { display: block; color: #5e6d77; font-size: .8125rem; margin-top: .375rem; font-variant-numeric: tabular-nums; }
.bc-reviews .av-nota-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.bc-reviews .av-nota-titulo { margin: 0; font-weight: 700; font-size: .9375rem; color: #002f6d; }
.bc-reviews .av-media { font-size: .875rem; color: #5e6d77; font-variant-numeric: tabular-nums; }
.bc-reviews .av-media strong { font-size: 1.5rem; font-weight: 700; color: #002f6d; letter-spacing: -.02em; }
.bc-reviews .av-criterio { border: 0; margin: 0; padding: .625rem 0; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .75rem; }
.bc-reviews .av-criterio + .av-criterio { background: linear-gradient(#dfe6ef, #dfe6ef) top / 100% 1px no-repeat; } /* fio por fundo: a borda do fieldset passava por trás da legenda */
.bc-reviews .av-criterio legend { float: left; width: auto; grid-column: 1; grid-row: 1; padding: 0; margin: 0; font-size: .875rem; font-weight: 500; color: #2b3138; }
.bc-reviews .av-estrelas { grid-column: 2; grid-row: 1; display: inline-flex; flex-direction: row-reverse; }
.bc-reviews .av-palavra { grid-column: 1 / -1; min-height: 1.125rem; font-size: .75rem; font-weight: 600; color: #8a5300; text-align: right; }
.bc-reviews .av-estrelas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bc-reviews .av-estrelas label { margin: 0; padding: 0 .125rem; cursor: pointer; color: #c3cedd; font-size: 1.5rem; line-height: 1; min-width: 32px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, transform .15s; }
.bc-reviews .av-estrelas label:hover, .bc-reviews .av-estrelas label:hover ~ label, .bc-reviews .av-estrelas input:checked ~ label { color: #ff9202; }
.bc-reviews .av-estrelas input:checked + label { transform: scale(1.12); }
.bc-reviews .av-estrelas input:focus-visible + label { outline: 3px solid #002f6d; outline-offset: 1px; border-radius: 6px; }
.bc-reviews .av-enviar { display: flex; justify-content: flex-end; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #e3e7eb; }
.bc-reviews .av-enviar .btn { background: #002f6d; color: #fff; border: 0; border-radius: 8px; min-height: 52px; padding: .875rem 2rem; font-weight: 600; font-size: 1rem; transition: background-color .18s, transform .1s; }
.bc-reviews .av-enviar .btn:hover { background: #002354; }
.bc-reviews .av-enviar .btn:active { transform: translateY(1px); }
.bc-reviews .av-enviar .btn:focus-visible { outline: 3px solid #ff9202; outline-offset: 3px; }
.bc-reviews .av-enviar .btn:disabled { opacity: .7; cursor: progress; }
@media (max-width: 767px) {
    .bc-reviews .review-form .title-form { padding: 1.25rem 1.25rem .25rem; }
    .bc-reviews .review-form .form-wrapper { padding: 1rem 1.25rem 1.5rem; }
    .bc-reviews .av-grelha { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titulo" "nota" "texto"; gap: 1.25rem; }
    .bc-reviews .av-estrelas label { min-width: 40px; min-height: 44px; font-size: 1.625rem; }
    .bc-reviews .av-enviar .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .bc-reviews .av-estrelas label, .bc-reviews .av-enviar .btn { transition: none; } .bc-reviews .av-estrelas input:checked + label { transform: none; } }
.bc-reviews .review-form .title-form { border-bottom: 0 !important; }
.bc-reviews .review-form .av-form textarea.form-control { height: 9.5rem !important; min-height: 9rem; }
@media (max-width: 767px) {
    /* No telemóvel o rótulo fica por cima e as cinco estrelas por baixo, sem sair do painel. */
    .bc-reviews .av-criterio { grid-template-columns: auto 1fr; }
    .bc-reviews .av-criterio legend { float: none; grid-column: 1 / -1; grid-row: 1; padding-bottom: .125rem; }
    .bc-reviews .av-estrelas { grid-column: 1; grid-row: 2; }
    .bc-reviews .av-palavra { grid-column: 2; grid-row: 2; text-align: left; padding-left: .5rem; align-self: center; min-height: 0; }
}
.bc-reviews .review-form .form-wrapper { border: 0 !important; }

/* ── O resumo da reserva no checkout, à direita (21-10-2026) ───────────────
   A fotografia por cima e a toda a largura (era um selo de 110 px ao lado de
   nada), linhas de rótulo e valor alinhadas, o "Detalhe" como ligação pequena
   e a divisão do que se paga dita por extenso. `body` para passar o checkout.css. */
body .booking-detail .booking-review { border: 1px solid #e3e7eb; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px #002f6d0f, 0 10px 28px #002f6d0d; }
body .booking-detail .booking-review-title { margin: 0 0 .75rem; font-size: 1.125rem; font-weight: 700; color: #002f6d; }
body .booking-review .booking-review-content { border: 0; }
body .booking-review .review-section { padding: 1.25rem 1.5rem; border-top: 1px solid #e8edf3; }
body .booking-review .review-section:first-child { border-top: 0; padding: 0; }
body .booking-review .service-info { display: flex; flex-direction: column; }
body .booking-review .service-info > div:nth-child(2) { order: -1; }
body .booking-review .service-info > div:nth-child(2) img { display: block; width: 100% !important; max-width: none !important; height: 11rem !important; object-fit: cover; }
body .booking-review .service-info > div:first-child { padding: 1rem 1.5rem 0; }
body .booking-review .service-info > div:nth-child(3) { padding: 0 1.5rem 1.25rem; font-size: .875rem; color: #5e6d77; }
body .booking-review .service-name { font-size: 1.0625rem; font-weight: 700; line-height: 1.35; margin: 0 0 .25rem; }
body .booking-review .service-name a { color: #002f6d; }
body .booking-review .address { margin: 0; font-size: .8125rem; color: #5e6d77; }
body .booking-review .review-list { list-style: none; margin: 0; padding: 0; }
body .booking-review .review-list > li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .375rem 0 !important; margin: 0 !important; font-size: .875rem; }
body .booking-review .review-list > li .label { color: #5e6d77; }
body .booking-review .review-list > li .val { color: #2b3138; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
body .booking-review .review-list > li.flex-wrap p.text-center { text-align: left !important; margin: .25rem 0 0; }
body .booking-review .review-list > li.flex-wrap a { font-size: .8125rem; font-weight: 600; color: #002f6d; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
body .booking-review .total-review { background: #f7f9fb; }
body .booking-review li.final-total { border-top: 1px solid #d8e0ea; margin-top: .5rem; padding-top: .75rem !important; }
body .booking-review li.final-total .val { font-size: 1.375rem; letter-spacing: -.01em; }
@media (max-width: 767px) { body .booking-review .service-info > div:nth-child(2) img { height: 9rem !important; } }
/* A capa abre o cartão (21-10-2026): "A sua reserva" vinha antes da fotografia e a fotografia ficava a meio.
   Com fotografia, os blocos do cartão passam a ser filhos directos para se poder ordenar: capa, título, nome. */
body .booking-detail .booking-review:has(.service-info img) { display: flex; flex-direction: column; }
body .booking-detail .booking-review:has(.service-info img) > .booking-review-content,
body .booking-detail .booking-review:has(.service-info img) .review-section:first-child,
body .booking-detail .booking-review:has(.service-info img) .service-info { display: contents; }
body .booking-detail .booking-review:has(.service-info img) .service-info > div:nth-child(2) { order: -2; }
body .booking-detail .booking-review:has(.service-info img) .booking-review-title { order: -1; margin: 0; padding: 1rem 1.5rem 0; font-size: .8125rem; font-weight: 600; color: #5e6d77; letter-spacing: .02em; }
body .booking-detail .booking-review:has(.service-info img) .service-info > div:first-child { padding-top: .25rem; }

/* ══ Telemóvel (21-10-2026): alvos de toque de 44 px e campos a 16 px ══════════════════
   O DESIGN.md pede 44 px ao dedo. Medido a 390 px: a barra de topo e o menu do telemóvel
   (20 px), as abas da pesquisa (35), o rodapé (21-42), os controlos dos anúncios (18), o menu
   lateral dos painéis (34 nos filhos), as abas dos formulários (21), os botões dos painéis (40).
   E os campos a 14 px fazem o Safari do iPhone ampliar a página ao tocar. Só abaixo de
   768 px: no ecrã largo nada muda. Quando o alvo é texto numa frase, cresce com padding e
   margem negativa, para a linha não mudar de altura. */
@media (max-width: 767px) {
    /* Campos: 16 px (sem zoom do iOS) e altura de dedo. */
    input.form-control, select.form-control, textarea.form-control,
    .form-control:not(textarea), .bc_wrap input[type="text"], .bc_wrap input[type="email"], .bc_wrap input[type="tel"],
    .bc_wrap input[type="number"], .bc_wrap input[type="password"], .bc_wrap input[type="search"], .bc_wrap select {
        font-size: 16px; min-height: 44px;
    }
    textarea.form-control { font-size: 16px; }
    .form-date-search-hotel input.check-in-out, .smart-search input.smart-select { font-size: 16px; min-height: 44px; }

    /* Cabeçalho público e menu do telemóvel. */
    .bc-menu-mobile .user-profile ul li a, .bc-menu-mobile .g-menu ul.main-menu > li > a, .bc-menu-mobile .g-menu ul.main-menu li li a {
        display: flex; align-items: center; min-height: 44px;
    }
    .bc_header .bc-logo { min-height: 44px; display: inline-flex; align-items: center; }
    .g-form-control ul.nav-tabs li a { min-height: 44px; display: inline-flex; align-items: center; }

    /* Ligações em texto: o alvo cresce, a linha não. */

    /* Rodapé. */
    .rodape a { display: inline-flex; align-items: center; min-height: 44px; }
    .rodape__social a, .rodape a[aria-label] { min-width: 44px; justify-content: center; }

    /* Painéis do cliente e do fornecedor. */
    .sidebar-user .sidebar-menu ul.main-menu li a, .sidebar-user .sidebar-menu ul.children li a { display: flex; align-items: center; min-height: 44px; }
    .page-breadcrumb li a { display: inline-block; padding: .75rem 0; margin: -.75rem 0; }
    body .pf-bt, body .cart-bt-principal, body .cart-bt, body .btn-change-password, body .bc_wrap .btn { min-height: 44px !important; }
    .pf-ver { display: inline-flex; align-items: center; min-height: 44px; }
    .form-add-service .nav-tabs a, .form-add-service #nav-tab a { display: flex; align-items: center; min-height: 44px; }
}

@media (max-width: 767px) {
    /* Ligações curtas dentro de texto: a área de toque cresce por um pseudo-elemento, sem mexer na linha. */
    a.text-white, a.st-btn, .item-loop .item-title a, ol.ul li a, .author-link, .ca-categoria-cabeca h3 a, .pl-contacto a, .pf-ver, .page-breadcrumb li a { position: relative; }
    a.text-white::after, a.st-btn::after, .item-loop .item-title a::after, ol.ul li a::after, .author-link::after,
    .ca-categoria-cabeca h3 a::after, .pl-contacto a::after, .pf-ver::after, .page-breadcrumb li a::after { content: ''; position: absolute; inset: -12px -8px; }
    .cpb__atalhos a, .cpb__alerta { min-height: 44px; display: flex; align-items: center; }
    .cpb__ligar { min-width: 44px; min-height: 44px; }
}

/* As etapas dos formulários de anúncio, no telemóvel (21-10-2026).
   Cada separador ocupava 340 px: só se via "1. Hotel" e as outras cinco etapas ficavam
   escondidas à direita, sem pista nenhuma. E a barra era azul-céu (#5191fa), que não é da paleta. */
.form-add-service #nav-tab.nav-tabs { background: #002f6d; border: 0; }
.form-add-service #nav-tab.nav-tabs a { color: #cfdcec; }
.form-add-service #nav-tab.nav-tabs a.active { color: #fff; box-shadow: inset 0 -3px 0 #ff9202; }
@media (max-width: 767px) {
    .form-add-service #nav-tab.nav-tabs { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 .25rem; }
    .form-add-service #nav-tab.nav-tabs::-webkit-scrollbar { display: none; }
    .form-add-service #nav-tab.nav-tabs a { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; padding: 0 16px !important; scroll-snap-align: start; white-space: nowrap; font-size: .8125rem; }
    /* O editor de texto: o menu "Ficheiro / Editar / Ver…" ocupava três linhas antes do texto. */
    .tox .tox-menubar { display: none !important; }
}
@media (max-width: 767px) {
    .email-input, .rodape input[type="email"] { font-size: 16px !important; }
    body .ga-bt, a.gvim-ads-link { min-height: 44px !important; display: flex; align-items: center; }
}
@media (max-width: 767px) {
    body .pedir-fornecedor, body .sidebar-user .pedir-fornecedor { min-height: 44px !important; }
    .notifications a, .notify-items a, .bc-notification a, .list-notifications a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 767px) {
    li.notification a { position: relative; }
    li.notification a::after { content: ''; position: absolute; inset: -12px -6px; }
}
@media (max-width: 767px) {
    /* O botão do título ("Alterar palavra-passe", "Adicionar hotel") encostava ao canto: com margem e sem sair do ecrã. */
    .bc_wrap .bc_user_profile .user-form-settings .title-bar .btn-change-password { margin: 0 0 0 .5rem; max-width: 55%; white-space: normal; text-align: center; line-height: 1.25; padding-top: .5rem; padding-bottom: .5rem; display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 767px) {
    /* Checkout: o "Editar dados", os termos e as ligações curtas ao dedo (21-10-2026). */
    .contactos-editar { min-height: 44px; padding-left: 12px; padding-right: 12px; }
    label:has(> input[name="term_conditions"]), .term-conditions label { display: flex; align-items: center; gap: .625rem; min-height: 44px; }
    input[name="term_conditions"] { width: 24px; height: 24px; flex-shrink: 0; }
    input[name="payment_gateway"] { width: 22px; height: 22px; }
    .booking-detail .service-info a, .booking-form label a, a[data-target^="#detailBookingDate"] { position: relative; }
    .booking-detail .service-info a::after, .booking-form label a::after, a[data-target^="#detailBookingDate"]::after { content: ''; position: absolute; inset: -12px -6px; }
}
@media (max-width: 767px) { .bravo-booking-page h3.form-title, .bc_wrap .form-title { margin-top: 1.5rem; } }
@media (max-width: 767px) {
    /* Folha de reserva: o fechar a 44 px, e o formulário da visita a imóvel a 16 px (sem zoom do iOS). */
    .fechar-reserva { width: 44px !important; height: 44px !important; }
    input[name="visita_data"], select[name="visita_hora"] { font-size: 16px !important; min-height: 44px !important; }
}

/* Calendário da pesquisa (hotel, carro, embarcação…): o daterangepicker
   posiciona-se pelo campo escondido `.check-in-out`, e o do tema era uma
   caixa de 150px colada a -15px do canto — o calendário abria 60px à
   esquerda do campo visível e, com `opens:left`, cortava-se na margem da
   janela. Agora o campo escondido tem a largura da caixa da data e o
   calendário nasce alinhado a ela, logo por baixo. */
.bc_wrap .bc_form .form-content .form-date-search .check-in-out,
.bc_wrap .bc_form .form-content .form-date-search-hotel .check-in-out,
.bc_wrap .bc_form .form-content .date-wrapper .check-in-out {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    pointer-events: none;
}

/* Pesquisa da página inicial, todos os separadores com a mesma forma.
   Havia dois descompassos: (1) Passeio, Carro e Evento tinham `max-width:1000px`
   e os outros três 1110px — a caixa mudava de largura e de colunas ao trocar de
   separador; (2) cada campo tinha a altura do seu conteúdo (75, 76 ou 81px), e a
   caixa inteira seguia o mais alto: 76px em Imóvel, 81px nos que têm data. Um
   piso de 81px em cada campo iguala-os todos. */
.bc_wrap .page-template-content .bc-form-search-all .g-form-control .tab-content #bc_tour,
.bc_wrap .page-template-content .bc-form-search-all .g-form-control .tab-content #bc_car,
.bc_wrap .page-template-content .bc-form-search-all .g-form-control .tab-content #bc_event {
    max-width: none;
}
@media (min-width: 768px) {
    .bc_wrap .page-template-content .bc-form-search-all .g-field-search .form-group .form-content {
        box-sizing: border-box;
        min-height: 81px;
    }
}

/* Caixa "O que procura?" da pesquisa (imóveis, embarcações): sugestões em três
   grupos por baixo do campo. A lista nasce dentro de `.form-content` (que é
   `position:relative`) e tem a largura da caixa — não sai do campo a que
   pertence. Sem `text-transform`: o nome de um anúncio lê-se como foi escrito. */
.pesquisa-livre { position: relative; }
.pesquisa-livre-lista {
    position: absolute;
    left: -60px;
    right: -15px;
    top: calc(100% + 14px);
    z-index: 30;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px 0;
    background: #fff;
    border: 1px solid #d7dce3;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 24px rgba(0, 32, 77, .14);
    text-align: left;
}
.pesquisa-livre-lista[hidden] { display: none; }
.pesquisa-livre-grupo {
    padding: 8px 20px 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #5e6d77;
}
.pesquisa-livre-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 20px;
    font-size: 15px;
    line-height: 1.3;
    color: #1a2b48;
    cursor: pointer;
}
.pesquisa-livre-item small { font-size: 12px; color: #5e6d77; }
.pesquisa-livre-item:hover,
.pesquisa-livre-item.activo { background: #eef3fb; }

/* A caixa de texto da pesquisa tem de parecer os campos ao lado (tipo, data):
   sem contorno nem fundo, na mesma letra e cor, e a ocupar a mesma altura. */
.bc_wrap .bc_form .form-content .pesquisa-livre .pesquisa-livre-campo {
    height: 25px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 16px;
    color: #002f6d;
    text-overflow: ellipsis;
}
.bc_wrap .bc_form .form-content .pesquisa-livre .pesquisa-livre-campo::placeholder {
    color: #002f6d;
    opacity: .72;
}
.pesquisa-livre-lista { top: calc(100% + 10px); }

/* "Como li a sua pesquisa": uma fila de etiquetas no topo da lista de sugestões. */
.pesquisa-livre-entendido {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 20px 6px;
    border-bottom: 1px solid #eef1f5;
}
.pesquisa-livre-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #eef3fb;
    color: #002f6d;
    font-size: 13px;
}
.pesquisa-livre-chip small { font-size: 11px; color: #5e6d77; text-transform: none; }

/* Lista vazia de uma pesquisa: o que se procurou e o que se propõe a seguir. */
.sem-resultados-pesquisa,
.bc-list-item .ajax-search-result .row > .sem-resultados-pesquisa { display: flex; flex-direction: column; align-items: flex-start; padding: 24px 15px; }  /* `.col-lg-12` do tema é flex em linha: sem isto, o título e a dica ficavam lado a lado */
.sem-resultados-titulo { margin: 0 0 6px; font-size: 18px; font-weight: 600; color: #1a2b48; }
.sem-resultados-dica { margin: 0 0 8px; color: #5e6d77; }
.sem-resultados-lista { margin: 0; padding: 0; list-style: none; }
.sem-resultados-lista li { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; }
.sem-resultados-lista a { font-weight: 600; color: #002f6d; }
.sem-resultados-lista small { color: #5e6d77; }

/* Calendário de datas dos anúncios (20-10-2026).
   1) Aviso dentro do calendário — erro com «Tentar novamente» e «sem datas»
      (custom/calendario-disponibilidade.js). Cobre a grelha e o spinner, para
      que nunca se veja um calendário apagado sem explicação.
   2) O calendário nunca é mais largo do que o ecrã: no telemóvel o do tema
      (278px por mês, e dois meses nos de intervalo) saía da janela. */
.daterangepicker .calendario-aviso {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: 1.25rem;
    text-align: center;
    background: rgba(255, 255, 255, .94);
    color: #002f6d;
    font-size: .9375rem;
    line-height: 1.4;
}
.daterangepicker .calendario-aviso p { margin: 0; }
.daterangepicker .calendario-aviso__botao {
    min-height: 44px;
    padding: 0 1.25rem;
    border: 0;
    border-radius: 8px;
    background: #002f6d;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.daterangepicker .calendario-aviso__botao:focus-visible { outline: 3px solid #ff9202; outline-offset: 2px; }
.daterangepicker .calendario-aviso--vazio { background: rgba(255, 255, 255, .82); font-weight: 600; }
@media (max-width: 575px) {
    .daterangepicker { max-width: calc(100vw - 16px); }
}

/* A capa do resumo no checkout (v0.029.5): o cartão tem sempre capa (fotografia ou desenho neutro).
   Sem ela, o título ficava encostado ao canto: o `.booking-review-title` não tinha respiro próprio. */
body .booking-detail .booking-review > .booking-review-title { padding: 1rem 1.5rem 0; margin: 0; }
body .booking-review .service-info img.capa-substituta { object-fit: cover; background: #e8edf3; }

/* ══ Uma só escala de espaço na caixa de reserva (v0.029.7) ═══════════════════════════
   Medido no passeio: o bloco da data não tinha padding e a linha divisória do tema
   (`.form-content .form-group`, border-bottom) caía a 0 px da caixa do calendário; a
   hora e o ponto de encontro (`.nota-devolucao`) levavam só padding-bottom, por isso
   o primeiro colava à linha e o segundo repetia 16 px de baixo mais 0 de cima; e os
   blocos liam o lado de três sítios (20 px, 15 px no telemóvel, 20 px da data).
   Agora: --caixa-lado a toda a largura e --caixa-gap em cima e em baixo de cada bloco,
   com a divisória no meio — 16 px de cada lado dela. Os seletores têm o nível do
   `.bc_single_book` à frente para valerem também na janela do telemóvel (`.show`). */
.bc_single_book_wrap { --caixa-lado: 20px; --caixa-gap: 16px; }

.bc_single_book_wrap .bc_single_book .form-date-field > .date-wrapper { margin: var(--caixa-gap) var(--caixa-lado) 0; }
/* Sem blocos do aluguer por baixo (passeio, evento, embarcação), o bloco da data fecha ele próprio. */
.bc_single_book_wrap .bc_single_book .form-date-field:not(:has(.campo-aluguer)) { padding-bottom: var(--caixa-gap); }

.bc_single_book_wrap .bc_single_book .ponto-encontro-passeio { padding: var(--caixa-gap) var(--caixa-lado); }
.bc_single_book_wrap .bc_single_book .ponto-encontro-passeio .nota-devolucao { margin: 0; padding: 0; }
.bc_single_book_wrap .bc_single_book .ponto-encontro-passeio .nota-devolucao + .nota-devolucao { margin-top: 8px; }

.bc_single_book_wrap .bc_single_book .form-content > .form-guest-search,
.bc_single_book_wrap .bc_single_book .form-content > div > .form-guest-search { padding: var(--caixa-gap) var(--caixa-lado); }
.bc_single_book_wrap .bc_single_book .form-section-group { padding-left: var(--caixa-lado); padding-right: var(--caixa-lado); }
.bc_single_book_wrap .bc_single_book .form-section-total,
.bc_single_book_wrap.show .bc_single_book .form-section-total { padding: var(--caixa-gap) var(--caixa-lado); }
.bc_single_book_wrap .bc_single_book .submit-group { padding: var(--caixa-gap) var(--caixa-lado); }
.bc_single_book_wrap .bc_single_book .form-date-field .campo-aluguer:not(.campo-modo) { padding-top: var(--caixa-gap); padding-bottom: var(--caixa-gap); padding-left: var(--caixa-lado); padding-right: var(--caixa-lado); }