/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

body {
    font-size: 16px;
    padding-top: 110px !important;
}

/* Acessibilidade */
.apenas-leitor-ecra {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.apenas-leitor-ecra-focado:focus {
    position: absolute;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    z-index: 99999999;
    top: 10px;
    left: 10px;
}

/* Campos e formulários */
.fruity form .form-control:focus {
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #FFBB32;
    border-color: #C4C7CA;
}

h1.text-center {
    text-align: left;
    margin: 46px 0 40px;
}

.fruity .text-info.survey-description {
    color: #0E0F10;
}

.list-question-select,
.form-control {
    font-size: 16px;
}

/* Cabeçalho */
.navbar-header {
    float: none;
    margin: 0 auto;
}

.navbar-brand.logo-container {
    display: block !important;
    float: none;
    margin: 0 auto;
    text-align: center;
}

.navbar-brand > img {
    margin: 0 auto;
}

.group-title {
    text-align: left;
}

.question-title-container {
    padding-top: 0;
    padding-bottom: 0;
}

div.question-container {
    box-shadow: none;
    border: none;
}

.answer-container {
    padding-top: 8px;
}

.ls-em-tip .fa,
.emtip .fa,
.ls-questionhelp::before {
    display: none;
}

.ls-answers {
    padding: 0;
}

.dir-ltr .ls-questionhelp,
.ls-question-message {
    margin: 0;
    font-weight: 400;
}

.control-label {
    margin-bottom: 8px;
}

.fruity input[type="text"],
.fruity input[type="email"] {
    padding: 9px 16px;
    border-radius: 12px;
    height: auto;
    border-color: #C4C7CA;
    box-shadow: none;
}

/* --- RADIO E CHECKBOX --- */

.radio-list .list-unstyled {
    display: flex;
    flex-direction: row;
}

.radio-list .list-unstyled .answer-item {
    margin-bottom: 0;
}

.dir-ltr .radio-item input[type="radio"],
.dir-ltr .checkbox-item input[type="checkbox"] {
    left: -20px;
    margin: 0;
    width: 28px;
    height: 28px;
    font-size: 19px;
}

.radio-item label::before,
.checkbox-item label::before {
    width: 28px;
    height: 28px;
    margin-left: calc(-12px - 28px);
}

/* Aparência padrão dos radios e checkboxes */
body .answer-item.radio-item label::after {
    left: calc(-12px - 28px);
    margin: 0;
    height: 28px;
    width: 28px;
    top: 0;
    background-color: #fff !important;
    font-size: 19px;
    border: solid 7px #008743;
}

body .answer-item.checkbox-item label::after {
    left: calc(-12px - 28px);
    margin: 0;
    height: 28px;
    width: 28px;
    top: 0;
    background-color: #008743 !important;
    font-size: 19px;
}

.radio-list li,
.checkbox-list li {
    margin-right: calc(12px + 28px);
    padding-left: calc(12px + 28px);
}

/* ======= RÁDIOS: compatível com vários markups + clicável ======= */

/* Reset / prioridade — garante que regras antigas sejam sobrepostas */
table .radio-item,
table .radio-item td,
table .radio-item th {
    /* garante que a célula tenha contexto para posicionamento */
    position: relative;
    vertical-align: middle;
}

/* 1) label padrão: faz o label ter o tamanho do "círculo" e ser o contêiner clicável */
table .radio-item label {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    margin: 0;
    padding: 0;
    position: relative;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
}

/* 2) input como elemento independente (input + label) — colocamos o input ABSOLUTO por cima do label */
table .radio-item input[type="radio"] {
    position: absolute !important;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    z-index: 3;           /* acima dos pseudo-elementos */
    opacity: 0;           /* invisível mas clicável */
    cursor: pointer;
}

/* 3) caso o input esteja dentro do label ( <label><input/></label> ) — tornamos o input preenchendo o label */
table .radio-item label input[type="radio"] {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 3;
    opacity: 0;
    cursor: pointer;
}

/* 4) pseudo-elemento do círculo base (aparece "atrás" do input) */
table .radio-item label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #C4C7CA;
    background: #fff;
    box-sizing: border-box;
    z-index: 1;
    pointer-events: none; /* garante que o clique passe para o input */
}

/* 5) marcador interno quando checked */
table .radio-item input[type="radio"]:checked + label::after,
table .radio-item label input[type="radio"]:checked + span::after,
table .radio-item label input[type="radio"]:checked::after {
    /* cobre os diferentes padrões — esta linha tenta pegar input + label e input dentro do label */
}

table .radio-item input[type="radio"]:checked + label::after,
table .radio-item label input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 7px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #008743; /* verde institucional */
    z-index: 2;
    pointer-events: none;
}

/* 6) hover / foco — destaque na borda */
table .radio-item label:hover::before,
table .radio-item input[type="radio"]:focus + label::before,
table .radio-item label input[type="radio"]:focus::before {
    border-color: #008743;
}

/* 7) força alinhamento das colunas: faz com que cada célula mantenha o centro do controle */
table td, table th {
    text-align: center;
    vertical-align: middle;
}

/* 8) Quando houver classes existentes que deslocam (ex.: margin-left calc etc.), anular para tabelas */
table .radio-item .ls-label-xs-visibility,
table .radio-item label.ls-label-xs-visibility {
    width: 28px !important;
    height: 28px !important;
    font-size: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 9) se existirem regras globais que posicionam o input com left negativo, anular dentro de tabelas */
table .radio-item input[type="radio"],
table .radio-item .checkbox-item input[type="checkbox"] {
    left: 0 !important;
}

/* 10) fallback: se markup usar input + label em células separadas (ex: input em uma td, label em outra),
    tentamos tornar o label clicável via for (não há CSS para criar for, mas garantimos visual) */
/* (Nenhuma ação CSS adicional possível — se continuar não clicável, precisa checar HTML) */