/*
 * Boreal — tema único do GoSurvey (WebSpot)
 * Herda de fruity_twentythree. Carregado DEPOIS do CSS da mãe, então sobrescreve
 * replicando o mesmo seletor, sem !important.
 *
 * Três seletores da mãe têm especificidade de id e exigem prefixo `body`:
 * #outerframeContainer, #navigator-container e os botões #ls-button-*.
 *
 * NÃO usar !important em regras que atinjam `table.ls-answers`: o plugin NPSQuestion
 * carrega DEPOIS do tema e precisa vencer. Toda regra de matriz aqui traz
 * :not(.nps-question) no ancestral.
 */

/* Fonte da moldura do matrix (ver seção no fim). Vem do Google Fonts, como no matrix
   (views/subviews/header/head.twig); @import precisa ficar antes de qualquer regra. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

:root {
    /* Âncora única: hover, tint e halo são derivados daqui, então a paleta fica
       coerente por construção. Este valor é só o padrão: cada pesquisa sobrescreve
       --boreal-brand pela opção `brandcolor` ("Cor da marca", nas opções de tema),
       injetada em views/subviews/header/custom_header.twig. */
    --boreal-brand: #1f82c0;
    --boreal-brand-hover: color-mix(in srgb, var(--boreal-brand) 85%, black);
    --boreal-tint: color-mix(in srgb, var(--boreal-brand) 6%, white);
    --boreal-halo: color-mix(in srgb, var(--boreal-brand) 18%, transparent);

    --boreal-ink: #2c3e50;
    --boreal-text: #333;
    --boreal-muted: #6c757d;
    --boreal-line: #e9ecef;
    --boreal-surface: #fff;
    --boreal-zebra: #f8f9fa;

    --boreal-radius: 10px;
    --boreal-radius-sm: 6px;
    --boreal-shadow: 0 2px 16px rgba(0, 0, 0, .10);
    --boreal-shadow-hover: 0 4px 20px rgba(0, 0, 0, .14);
}

/* ---------- Estrutura ---------- */

body {
    color: var(--boreal-text);
}

body #outerframeContainer {
    background: transparent;
}

/* ---------- Título da pesquisa e do grupo ---------- */

.survey-name {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--boreal-ink);
}

.group-container .group-title {
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--boreal-brand);
    background: var(--boreal-tint);
    border-left: 3px solid var(--boreal-brand);
    border-radius: 0 var(--boreal-radius-sm) var(--boreal-radius-sm) 0;
    padding: 10px 16px;
    margin-bottom: 16px;
}

.group-container .group-description {
    font-size: 1rem;
    color: var(--boreal-muted);
    padding: 0 16px;
}

/* ---------- A pergunta como cartão com cabeçalho colorido ----------
   Este é o gesto que define o tema. No fruity_twentythree a pergunta é texto solto;
   aqui ela vira um cartão com faixa de marca no topo. */

.question-container.row {
    background: var(--boreal-surface);
    border: 1px solid var(--boreal-line);
    border-radius: var(--boreal-radius);
    /* Sem overflow: hidden. Ele recortava a faixa nos cantos, mas também cortava
       tudo que precisa sair do cartão: a lista do dropdown (bootstrap-select) abria
       e sumia na borda — o hóspede via só 2 ou 3 dos nomes. Os cantos da faixa agora
       são arredondados nela mesma, logo abaixo. */
    margin-bottom: 18px;
    padding: 0;
    transition: box-shadow .2s ease;
}

.question-container.row:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

.question-container .question-title-container {
    background: var(--boreal-brand);
    border-radius: var(--boreal-radius) var(--boreal-radius) 0 0;
    margin: 0;
    padding: 13px 20px;
}

.question-container .ls-label-question {
    font-size: 1.02rem;
    font-weight: 500;
    line-height: 1.45;
    color: #fff;
}

.question-container .asterisk small,
.question-container .asterisk .text-danger {
    color: rgba(255, 255, 255, .85);
}

.question-container .answer-container {
    padding: 16px 20px;
}

.question-container .question-help-container {
    padding: 0 20px 14px;
    font-size: .85rem;
    color: #8a8a8a;
}

.question-container .ls-question-message {
    padding: 0 20px 12px;
    font-size: .85rem;
}

/* Pergunta obrigatória não respondida: o fruity_twentythree não tem NENHUMA regra
   para isto, então o espaço está livre. É o ponto mais fraco do matrix e o que mais
   confunde hóspede no celular. */
.question-container .ls-question-mandatory {
    margin: 0 20px 12px;
    padding: 9px 12px;
    border-left: 3px solid var(--bs-danger, #FF515F);
    border-radius: 0 var(--boreal-radius-sm) var(--boreal-radius-sm) 0;
    background: color-mix(in srgb, var(--bs-danger, #FF515F) 8%, white);
    font-size: .88rem;
}

.question-container.input-error {
    border-color: color-mix(in srgb, var(--bs-danger, #FF515F) 45%, white);
}

/* ---------- Campos ---------- */

.form-control,
.form-select {
    border-radius: var(--boreal-radius-sm);
    border-color: #d7dce1;
    /* 16px evita o auto-zoom do Safari no iPhone ao focar o campo. */
    font-size: 16px;
    padding: 10px 13px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--boreal-brand);
    box-shadow: 0 0 0 3px var(--boreal-halo);
}

/* ---------- Botões ---------- */

body #ls-button-submit.ls-move-btn,
body #ls-button-previous.ls-move-btn {
    border-radius: var(--boreal-radius-sm);
    font-weight: 600;
    padding: 11px 26px;
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}

body #ls-button-submit.ls-move-btn {
    background: var(--boreal-brand);
    border-color: var(--boreal-brand);
    color: #fff;
    box-shadow: 0 2px 5px var(--boreal-halo);
}

body #ls-button-submit.ls-move-btn:hover {
    background: var(--boreal-brand-hover);
    border-color: var(--boreal-brand-hover);
    transform: translateY(-1px);
    box-shadow: var(--boreal-shadow-hover);
}

body #ls-button-submit.ls-move-btn:active {
    transform: translateY(0);
}

body #ls-button-previous.ls-move-btn {
    background: transparent;
    border: 1px solid var(--boreal-brand);
    color: var(--boreal-brand);
    box-shadow: none;
}

body #ls-button-previous.ls-move-btn:hover {
    background: var(--boreal-tint);
    color: var(--boreal-brand-hover);
    border-color: var(--boreal-brand-hover);
}

/* ---------- Barra de progresso ---------- */

.top-container .progress {
    height: 16px;
    border-radius: 20px;
    background: var(--boreal-line);
}

.top-container .progress-bar {
    background: var(--boreal-brand);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Matrizes ----------
   :not(.nps-question) em todas: o plugin de NPS carrega depois do tema e precisa
   vencer a cascata sem brigar. */

.question-container:not(.nps-question) table.ls-answers .ls-heading th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--boreal-muted);
    background: var(--boreal-zebra);
    border-bottom: 2px solid var(--boreal-line);
}

.question-container:not(.nps-question) table.ls-answers .ls-even {
    background: var(--boreal-zebra);
}

.question-container:not(.nps-question) table.ls-answers tbody tr:hover {
    background: var(--boreal-tint);
}

/* Alvo de toque mínimo de 44px: exigência de acessibilidade no celular, que é onde
   a maioria dos hóspedes responde. */
.question-container:not(.nps-question) table.ls-answers td,
.question-container:not(.nps-question) table.ls-answers th {
    min-height: 44px;
    vertical-align: middle;
}

/* ---------- Rodapé ---------- */

.boreal-footer {
    padding: 22px 0 30px;
    text-align: center;
}

.boreal-footer__text {
    margin: 0;
    font-size: 12px;
    color: #9aa3ab;
}

/* ---------- Celular ---------- */

@media (max-width: 767px) {
    .survey-name {
        font-size: 1.2rem;
    }

    .group-container .group-title {
        font-size: 1rem;
        padding: 9px 13px;
    }

    .question-container.row {
        border-radius: var(--boreal-radius-sm);
        margin-bottom: 13px;
    }

    .question-container .question-title-container {
        padding: 11px 14px;
    }

    .question-container .answer-container {
        padding: 14px;
    }

    .question-container .question-help-container,
    .question-container .ls-question-message {
        padding-left: 14px;
        padding-right: 14px;
    }

    .question-container .ls-question-mandatory {
        margin-left: 14px;
        margin-right: 14px;
    }

    body #ls-button-submit.ls-move-btn,
    body #ls-button-previous.ls-move-btn {
        width: 100%;
        margin-bottom: 9px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .question-container.row,
    body #ls-button-submit.ls-move-btn,
    body #ls-button-previous.ls-move-btn,
    .top-container .progress-bar {
        transition: none;
    }

    body #ls-button-submit.ls-move-btn:hover {
        transform: none;
    }
}

/* ---------- Cor da marca fora do fluxo de perguntas ----------
 *
 * As regras acima cobrem os botões de navegação da pesquisa (#ls-button-submit e
 * #ls-button-previous), que é onde o hóspede passa a maior parte do tempo. Mas as
 * telas de borda — pedir código de acesso, mensagens, confirmações — usam o
 * .btn-primary genérico do Bootstrap, que no fruity_twentythree vem com o azul
 * escrito literalmente no CSS. Resultado: um hotel de marca preta via barra de
 * progresso preta e botão azul na mesma tela.
 *
 * Aqui essas peças passam a derivar da mesma variável, então a cor do hotel vale
 * na pesquisa inteira, qualquer que seja ela.
 */

body .btn-primary {
    background-color: var(--boreal-brand);
    border-color: var(--boreal-brand);
    color: #fff;
}

body .btn-primary:hover,
body .btn-primary:focus,
body .btn-primary:active {
    background-color: var(--boreal-brand-hover);
    border-color: var(--boreal-brand-hover);
    color: #fff;
}

body .btn-primary:focus-visible {
    box-shadow: 0 0 0 3px var(--boreal-halo);
}

/* Botão "mostrar código" colado ao campo, na tela de código de acesso. */
body .input-group .input-group-text.btn,
body button.input-group-text {
    background-color: var(--boreal-brand);
    border-color: var(--boreal-brand);
    color: #fff;
}

/* Avisos: o azul fixo do Bootstrap briga com a marca do hotel. Usando o tom claro
   derivado da própria marca, a caixa combina com qualquer cor, inclusive preto,
   e o texto fica escuro para manter contraste legível. */
body .alert-info {
    background-color: var(--boreal-tint);
    border-color: var(--boreal-halo);
    color: var(--boreal-ink, #2b2f3a);
}

/* ---------- Acabamento herdado do matrix ----------
 *
 * O boreal já tinha o cartão com faixa, o botão e a barra. Faltavam as peças que os
 * hoteleiros reconhecem do tema antigo: a matriz com quadradinhos, Sim/Não como botões
 * largos e o ritmo mais compacto entre perguntas. Portado do custom.css do matrix, com
 * a cor fixa #1f82c0 trocada por var(--boreal-brand) para seguir a marca do hotel.
 * Aprovado pelo Julio em 16/09/2026, comparando antes e depois na pesquisa da Venit.
 */

/* Ritmo: o fruity deixa um vão grande dentro do cartão. */
.question-container.row {
    margin-bottom: 14px;
}

/* Texto de pergunta escrito no editor com formatação chega embrulhado em <p>, que traz
   margem embaixo: a faixa dessas perguntas ficava 14px mais alta que a das vizinhas. */
.question-container .question-title-container p:last-child {
    margin-bottom: 0;
}

/* Entre um grupo de perguntas e o seguinte havia 84px: o fruity põe .space-col com
   margem em cima e embaixo no grupo e no contêiner de fora dele (28+28+14+14). Muitos
   hotéis dividem a pesquisa em grupos sem título, e o hóspede via um buraco no meio.
   O espaço entre grupos passa a ser o mesmo entre perguntas (margem do cartão); quando
   o grupo tem título, a margem do próprio título separa. */
body .group-outer-container.space-col,
body .group-container.space-col {
    margin-top: 0;
    margin-bottom: 0;
}

/* O contêiner da mensagem de validação ("Escolha uma das seguintes respostas") existe
   em toda pergunta, vazio na maioria, mas com 10px de margem em cima e 20px embaixo:
   eram 30px sobrando entre a faixa e o campo. A margem sai do contêiner e o respiro
   vai para a mensagem, que só ocupa espaço quando é exibida. */
.question-container .question-valid-container {
    margin-top: 0;
    margin-bottom: 0;
}

.question-container .question-valid-container .ls-questionhelp {
    padding: 10px 0 0;
}

.question-container .answer-container {
    padding-top: 14px;
    padding-bottom: 16px;
}

/* ---- Matriz: texto da linha em peso normal e quadradinhos ----
   Todas com :not(.nps-question) e sem !important, pela regra do topo do arquivo: o
   plugin NPSQuestion desenha a escala de 0 a 10 com a mesma table.ls-answers. */

.question-container:not(.nps-question) table.ls-answers tbody .answertext {
    font-weight: 500;
    font-size: .95rem;
    color: #444;
    text-align: left;
}

.question-container:not(.nps-question) table.ls-answers td.radio-item {
    position: relative;
    text-align: center;
    vertical-align: middle;
}

/* O radio real fica invisível sobre a célula inteira: a área de toque é a célula,
   não só o quadradinho. */
.question-container:not(.nps-question) table.ls-answers td.radio-item input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.question-container:not(.nps-question) table.ls-answers td.radio-item label.ls-label-xs-visibility {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    padding: 0;
    border: 2px solid #ccc;
    border-radius: 8px;
    background: #fff;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
    transition: all .2s ease;
}

.question-container:not(.nps-question) table.ls-answers td.radio-item label.ls-label-xs-visibility::before,
.question-container:not(.nps-question) table.ls-answers td.radio-item label.ls-label-xs-visibility::after {
    display: none;
}

.question-container:not(.nps-question) table.ls-answers td.radio-item:hover label.ls-label-xs-visibility {
    border-color: var(--boreal-brand);
    background: var(--boreal-tint);
    transform: scale(1.05);
}

.question-container:not(.nps-question) table.ls-answers td.radio-item input[type="radio"]:checked + label.ls-label-xs-visibility {
    border-color: var(--boreal-brand);
    background: var(--boreal-brand);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    transform: scale(1.1);
}

/* Check branco no marcado. Só a cor não basta: some para quem tem daltonismo e, em
   marca escura, o quadrado preenchido parece desabilitado. O check é desenhado com
   duas bordas giradas, sem depender de fonte de ícone. text-indent volta a 0 aqui
   porque o pseudo-elemento herdaria o -9999px do rótulo. */
.question-container:not(.nps-question) table.ls-answers td.radio-item input[type="radio"]:checked + label.ls-label-xs-visibility::after {
    content: "";
    display: block;
    position: static;
    box-sizing: content-box; /* o tema usa border-box, que encolhia o check */
    width: 7px;
    height: 14px;
    margin-top: -4px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    border-radius: 0; /* o radio do fruity arredonda o ::after e o check virava um "u" */
    background: none;
    text-indent: 0;
    transform: rotate(45deg);
}

/* Quem navega por teclado precisa ver onde está: o radio é invisível. */
.question-container:not(.nps-question) table.ls-answers td.radio-item input[type="radio"]:focus-visible + label.ls-label-xs-visibility {
    box-shadow: 0 0 0 3px var(--boreal-halo);
}

.question-container:not(.nps-question) table.ls-answers td.noanswer-item label.ls-label-xs-visibility {
    border-style: dashed;
}

/* ---- Sim/Não e gênero: botões largos, cinza, marca ao escolher ---- */

.yes-no .btn-group,
.gender-button .btn-group {
    display: flex;
    gap: 10px;
    width: 100%;
    max-width: 520px;
}

.yes-no .btn-group > label.btn,
.gender-button .btn-group > label.btn {
    flex: 1 1 0;
    margin: 0 !important;
    padding: 12px 16px;
    border-radius: 8px !important;
    border: 1px solid #e0e3e8;
    background-color: #f0f2f5;
    color: #444;
    font-weight: 500;
    transition: all .2s ease;
}

.yes-no .btn-group > label.btn:hover,
.gender-button .btn-group > label.btn:hover {
    border-color: var(--boreal-brand);
    background-color: var(--boreal-tint);
    color: var(--boreal-brand);
}

.yes-no .btn-check:checked + label.btn,
.gender-button .btn-check:checked + label.btn {
    border-color: var(--boreal-brand);
    background-color: var(--boreal-brand);
    color: #fff;
}

/* ---- Estrelas (pergunta de 5 pontos exibida como estrelas) ----
 * É o componente mais visto pelo hóspede: 1.334 perguntas em 344 pesquisas ativas.
 * O LimeSurvey desenha com CSS próprio (star-rating.css): estrelas de 24px coladas,
 * cada uma num amarelo diferente, sem relação com a marca. O JS alterna três classes
 * que usamos aqui: .star-rated-on (escolhida e as anteriores), .star-drained (acesas
 * pelo mouse) e .star-stub (as que ficam depois do mouse).
 */

.question-container .stars-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.question-container .stars-list .star-rating {
    float: none;
    width: 44px;
    height: 44px;
    font-size: 34px;
    line-height: 44px;
    text-align: center;
    color: #d5d8de;
    transition: color .15s ease, transform .15s ease;
}

.question-container .stars-list .star-rating.star-rated-on:not(.star-stub) {
    color: var(--boreal-brand);
}

/* Prévia ao passar o mouse: tom mais claro da marca, para não confundir com a escolha. */
.question-container .stars-list .star-rating.star-drained,
.question-container .stars-list .star-rating.star-drained.star-rated-on {
    color: color-mix(in srgb, var(--boreal-brand) 55%, white);
    text-shadow: none;
}

.question-container .stars-list .star-rating.star-hover {
    transform: scale(1.12);
}

.question-container .stars-list .star-rating.star-stub {
    color: #d5d8de;
}

/* Botão de limpar (só aparece em pergunta não obrigatória): discreto, separado. */
.question-container .stars-list .star-rating.star-cancel {
    margin-left: 8px;
    font-size: 22px;
    color: #b0b5bd;
}

.question-container .stars-list .star-rating.star-cancel.star-hover {
    color: #c0392b;
    text-shadow: none;
}

/* ---- Listas de opção: respiro entre itens ---- */

li.radio-item,
li.checkbox-item {
    margin-bottom: 12px;
}

/* ---- Celular ---- */

@media (max-width: 767px) {

    /* No celular a matriz vira lista com o rótulo ao lado; um quadradinho sem texto
       ficaria sem significado, então volta o radio com o texto visível. */
    .question-container:not(.nps-question) table.ls-answers td.radio-item input[type="radio"] {
        position: static;
        width: auto;
        height: auto;
        opacity: 1;
        margin-right: 8px;
    }

    /* Os estados :hover e :checked do desktop têm seletor mais específico, por isso
       são repetidos aqui em vez de usar !important. */
    .question-container:not(.nps-question) table.ls-answers td.radio-item label.ls-label-xs-visibility,
    .question-container:not(.nps-question) table.ls-answers td.radio-item:hover label.ls-label-xs-visibility,
    .question-container:not(.nps-question) table.ls-answers td.radio-item input[type="radio"]:checked + label.ls-label-xs-visibility {
        display: inline;
        width: auto;
        height: auto;
        border: 0;
        background: none;
        text-indent: 0;
        overflow: visible;
        transform: none;
        box-shadow: none;
    }

    .yes-no .btn-group,
    .gender-button .btn-group {
        max-width: none;
    }
}

/* ---------- Moldura do matrix ----------
 *
 * Com as perguntas já parecidas, o que ainda denunciava o tema era a página em volta:
 * o fruity usa fonte de 18px, título serifado à esquerda e uma barra fixa de 100px no
 * topo, com as perguntas soltas sobre o fundo. O matrix põe tudo num cartão branco
 * centralizado, com logo e título no centro, em Poppins de 14px. Medido lado a lado
 * com a Lagoon (matrix) e a Venit (boreal) em 16/09/2026.
 */

/* A Poppins é carregada no topo do arquivo: @import só vale antes de qualquer regra. */

html {
    font-size: 14px;
}

body {
    font-family: Poppins, Lato, "Helvetica Neue", sans-serif;
    font-size: 14px;
    background-color: var(--boreal-bg, #f4f6f8);
    /* The inherited fixed-navbar script writes inline padding on load/resize.
       Boreal's navbar is static, so retain only the card's intended spacing. */
    padding-top: 24px !important;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body .survey-name,
body .group-title {
    font-family: Poppins, Lato, "Helvetica Neue", sans-serif;
}

/* O topo deixa de ser uma barra fixa e vira a parte de cima do cartão. As duas metades
   (topo e corpo) têm sombra própria; o clip-path corta a sombra na emenda para que
   pareçam um cartão único. */
body #survey-nav.navbar {
    position: static;
    height: auto;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

body #survey-nav > .container-fluid {
    position: relative;
    justify-content: center;
    margin: 0 auto;
    padding: 20px 24px 4px;
    background: #fff;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .12);
    clip-path: inset(-20px -20px 0 -20px);
}

body #survey-nav .logo-container {
    margin: 0 auto;
    padding: 0;
}

body #survey-nav .logo-container img.logo {
    max-height: 64px;
    width: auto;
}

body #survey-nav #navbar-menu {
    position: absolute;
    top: 14px;
    right: 16px;
}

body #outerframeContainer {
    padding: 0;
    min-height: 0;
}

/* Avoid stacking the base theme's bottom margins inside the card. */
body #main-col,
body #navigator-container {
    margin-bottom: 0;
}

body #navigator-container {
    padding-bottom: 0;
}

body #outerframeContainer > .row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
}

body #outerframeContainer > .row > .col-centered {
    margin: 0 auto 32px;
    padding: 8px 24px 28px;
    background: #fff;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .12);
    clip-path: inset(0 -20px -20px -20px);
}

/* O fruity limita o bloco do título a 750px (#welcome-container, seletor de id), o que
   empurrava o texto para a esquerda. */
body #welcome-container {
    max-width: none;
    width: 100%;
}

/* Sem logo na opção do tema o body não recebe .brand-logo e o topo ficaria uma faixa
   branca vazia: encolhe para só arredondar o cartão. */
body:not(.brand-logo) #survey-nav > .container-fluid {
    padding-top: 12px;
    padding-bottom: 0;
}

body:not(.brand-logo) #survey-nav .logo-container {
    display: none;
}

body h1.survey-name {
    margin: 0 0 18px;
    color: #2c3e50;
    font-size: 21px;
    font-weight: 600;
    text-align: center;
}

body .survey-welcome {
    text-align: center;
}

@media (max-width: 767px) {

    body {
        padding-top: 8px !important;
    }

    body #survey-nav > .container-fluid,
    body #outerframeContainer > .row > .col-centered {
        padding-left: 12px;
        padding-right: 12px;
    }
}