/* Estilização do contêiner principal */
.select {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
}

/* Estilização do botão de seleção */
#select-button {
    width: 100%;
    min-height: 45px;
    height: 45px;
    border-radius: 15px;
    display: flex;
    border: 1px solid #999999;
    justify-content: space-between;
    padding: 0 10px;
    margin-top: 5px;
    align-items: center;
}

@media (max-height: 700px) {
    #select-button {
        height: 40px;
    }
}


.select .group {
    display: flex;
    align-items: center;
    cursor: pointer;
}


/* Estilização dos ícones de setas */
#chevrons {
    display: flex;
    align-items: center;
    width: 18px; 
}


/* Esconder a seta para cima por padrão */
#chevrons svg:first-child {
    display: none;
}





/* Esconder a seta para baixo quando o checkbox está marcado */
#genero-options-view-button:checked + #select-button #chevrons svg:last-child {
    display: none;
}

/* Mostrar a seta para cima quando o checkbox está marcado */
#genero-options-view-button:checked + #select-button #chevrons svg:first-child {
    display: block;
}


/* Posicionamento relativo do seletor de categoria */
#genero-selectbox {
    position: relative;
    cursor: pointer;
}

/* Estilização do checkbox invisível */
#genero-options-view-button {
    all: unset;
    position: absolute;
    inset: 0;
    z-index: 3;
}

/* Estilização da lista de opções */
#genero_options {
    margin-top: 0.5rem;
    border-radius: 10px;
    display: none;
    position: absolute;
    width: 100%;
    background-color: white;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.198);
    overflow: hidden;
    max-height: 270px;
    overflow-y: auto;
    z-index: 1000;
}

.group_icone {
    margin-right: 10px;
}

.group_icone svg {
    margin-top: 5px;
}

/* Estilização de cada opção */
.option {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 0.75rem;
    position: relative;
    height: 45px;
}

/* Cor do rótulo de cada opção */
.option .label {
    color: black;
    width: 100%;
}

/* Cor do rótulo de cada opção */
#baptismoeditar_options .option .label, #baptismo_options .option .label {
    min-width: 100px;
}

/* Esconder ícone de seleção por padrão */
.option .icone_tick {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.option svg {
    width: 24px;
}

.option .icone {
    display: flex;
    align-items: center;
}

.option .icone svg {
    margin: auto 0;
}

.option .icone_tick svg {
    margin-left: auto;
    color: #333;
    display: none;
    width: 18px; 
}

/* Estilização ao passar o mouse ou quando a opção está selecionada */
.option:has(input:checked),
.option:hover {
    background-color: #f9f9f9;;
    /*border-top: 1px solid #cccccc;
    /*border-bottom: 1px solid #cccccc;*/
}

.option:has(input:checked),
.option:first-child:hover {
    border-top: 0;
}

.option:has(input:checked),
.option:last-child:hover {
    border-bottom: 0;
}

.option:hover {
    border-top: 1px solid #999999;
}


/* Mostrar ícone de seleção quando a opção está marcada */
.option:has(input:checked) .lucide-check {
    display: block;
}

/* Estilização do input radio invisível */
.option input[type="radio"] {
    all: unset;

    position: absolute;
    inset: 0;
    cursor: pointer;
}