/* 
 * Start Custom Fonts CSS
 * */
span, i, b, button, a{
	font-family: inherit;
}
@font-face {
    font-family: 'Ariane Coachella';
    font-style: normal;
    font-weight: 100;
    font-display: auto;
    src: url('https://esmeraldapraiahotel.com.br/wp-content/uploads/2025/08/ArianeCoachella-Regular-2.ttf') format('truetype');
}

@font-face {
    font-family: 'Ariane Coachella';
    font-style: italic;
    font-weight: 100;
    font-display: auto;
    src: url('https://esmeraldapraiahotel.com.br/wp-content/uploads/2024/05/ArianeCoachella-ThinItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Ariane Coachella';
    font-style: italic;
    font-weight: normal;
    font-display: auto;
    src: url('https://esmeraldapraiahotel.com.br/wp-content/uploads/2024/05/ArianeCoachella-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Ariane Coachella';
    font-style: normal;
    font-weight: normal;
    font-display: auto;
    src: url('https://esmeraldapraiahotel.com.br/wp-content/uploads/2024/05/ArianeCoachella-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Ariane Coachella';
    font-style: normal;
    font-weight: 500;
    font-display: auto;
    src: url('https://esmeraldapraiahotel.com.br/wp-content/uploads/2024/05/ArianeCoachella-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Ariane Coachella';
    font-style: normal;
    font-weight: 700;
    font-display: auto;
    src: url('https://esmeraldapraiahotel.com.br/wp-content/uploads/2024/05/ArianeCoachella-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Ariane Coachella';
    font-style: italic;
    font-weight: 700;
    font-display: auto;
    src: url('https://esmeraldapraiahotel.com.br/wp-content/uploads/2024/05/ArianeCoachella-BoldItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'Ariane Coachella';
    font-style: normal;
    font-weight: 800;
    font-display: auto;
    src: url('https://esmeraldapraiahotel.com.br/wp-content/uploads/2024/05/ArianeCoachella-ExtraBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Ariane Coachella';
    font-style: italic;
    font-weight: 800;
    font-display: auto;
    src: url('https://esmeraldapraiahotel.com.br/wp-content/uploads/2024/05/ArianeCoachella-ExtraBoldItalic.ttf') format('truetype');
}

.flatpickr-monthDropdown-months{
	font-weight: 600 !important;
}

@media (max-width: 676px) {
	div.motor-reserva{
		height: fit-content;
	}
	.container{
		padding: 0 !important;
	}
	form.expanded-mobile-form{
		padding: 16px;
		padding-bottom: 24px;
		padding-top: 0;=
	}
	form.form-widget div.flatpicker-hexlab-calendar{
		justify-content: space-between !important;
		border-bottom-color: rgb(92, 72, 54) !important;
	}
	#checkInOut{
		color: rgb(92, 72, 54) !important;
	}
	.form-widget h3{
		font-size:18px !important;
		text-align: start !important;
		margin-bottom: 4px !important;
	}
	.form-widget .booknow button[type=submit]{
		padding: 16px;
	}
}
.motor-reserva .flatpicker-hexlab-calendar .input-button {
    display: flex;
    justify-content: center;
		gap: 20px;
		align-items: center;
    height: 100%;
    width: 100%;
    padding: 12px 24px;
}

@media (max-width:980px){
	.motor-reserva .flatpicker-hexlab-calendar .input-button{
		gap: 80px;
		padding: 12px 0;
	}
	.input-button svg{
		flex-shrink: 0;
	}
}

.input-button svg{
		stroke-width: 1px;
    stroke: #a2754a;
}
/* End Custom Fonts CSS */





/* CSS ENCONTRADO NO HTML DA HOME */
.option-container .btn{
    border-radius: 30px !important;
    border-color: #A2754A !important;
    color: #A2754A !important;
}

body {
    border-radius: 30px !important; 
}

#childAgeContainer button{ 
        border-radius: 30px !important;
    border-color: #A2754A !important;
    color: #A2754A !important;
}

.custom-select .salvar{
margin-top: 5px;
background: #A2754A !important;
font-weight: 600;
}

.select-qnt{
    padding-top: 15px !important;
    padding-bottom: 20px !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 700px !important;
    font-weight: bold;
    font-size: 14px !important;
    color: #342010;
}

.ui-widget.ui-widget-content {
    border: 1px solid #c5c5c5;
    margin-top: 18px;}

.ui-datepicker-title span{
    font-weight: 600;
    font-family: 'Raleway', sans-serif;
}

    .ui-datepicker-unselectable .ui-state-disabled {
        border: none !important; /* Remove the border */
        color: #c0c0c0 !important; /* Lighten the text color */
        text-decoration: line-through !important; /* Add strikethrough */
        pointer-events: none; /* Ensure the dates are not clickable */
        text-decoration: line-through !important;
    }
    
    .ui-datepicker-header {
     border-bottom: none !important; /* Remove the bottom border */
    }

        .custom-select {
            position: relative;
            max-width: 260px !important;
        }
        
        .select-selected {
            border: none;
        border-radius: 0px;
        border-bottom:1px solid #685643;
        color:#685643;
        height:40px;
        width:100%;
        margin:0px!important;
        margin-top:10px!important;  
        background: transparent;
            padding: 10px;
            font-size: 16px;
        
            cursor: pointer;
        }
        
        .child-age-control button{
            max-height: 10px !important;
        }
        
        .child-age-control p{
            padding-bottom:  0px !important;
            margin-bottom:0px !important;
            text-align: center !important;
            
        }
        
        .child-age-container {
  display: flex;
  flex-direction:  !important;
}

.child-age-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.child-age-control {
  flex: 0 1 100%; /* Ocupa toda a largura dentro do wrapper */
}
        
        #summary{
            font-size: 14px;
            display: flex;
            font-family: 'Raleway', sans-serif !important;
            color: ##342010;
            font-weight: 400;
        }
        
        #summary i{
            padding-left: 18px;
            font-size: 18px;
        }
        
        .select-items {
            position: absolute;
            background-color: white;
            border: 1px solid #ccc;
            width: 100%;
            z-index: 99;
            display: none;
            font-size: 12px;
            min-width: 340px;
            max-height: 300px; /* Altura máxima */
            overflow-y: auto; /* Scroll se necessário */
        }
        .select-items div {
            padding: 2px;
            cursor: pointer;
            display: flex;
           padding-top: 20px;
            justify-content: space-between;
            align-items: start;
        }
        
         .select-items div .child-age-container{
           padding-top: 0px !important;
         }
        
        .select-items div .child-age-control{
            padding-top: 5px !important;
            min-width: 150px;
        }
        
        .select-items div:hover {
            background-color: #e5e5e5;
        }
        .option-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .option-container button {
            margin: 0 1px;
            width: 20px !important;
            height: 20px !important;
            border-radius: 0px !important; 
            background: transparent !important;
            border: 1px solid #342010 !important;
            padding-top: 5px !important;
            padding-bottom: 5px !important;
            color: #342010 !important;
            text-align: center !important;
                text-align: center !important;
    display: flex;
    align-items: center;
    justify-content: center;
        }
        
        .option-container button:hover{
            background: #342010 !important;
            color: #fff !important;
        }
        .select-items.show {
            display: block;
            padding: 12px;
            padding-top: 18px;
                font-family: 'Raleway', sans-serif !important;
    font-weight: 500px !important;
    color: #342010 !important;
    border: none;
    margin-top: 19px;
        }
        
        .child-age-control {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

.child-age-control span {
    margin-right: 5px;
    font-size: 13px;
    font-weight: 500;
}

.child-age-control button {
    height: 25px !important; /* Ajuste a altura conforme necessário */
    width: 20px !important; /* Ajuste a largura conforme necessário */
    margin: 0 5px !important; /* Espaçamento entre os botões */
    border-radius: 4px !important; /* Ajuste de borda arredondada */
    background: transparent !important; /* Ajuste do fundo */
    border: 1px solid #342010 !important; /* Ajuste da borda */
    color: #342010 !important; /* Ajuste da cor do texto */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.child-age-control button:hover {
    background: #342010;
    color: #fff;
}

#childAgeContainer {
    display: flex;
    flex-direction: column; /* Força a direção da coluna */
    padding-top: 0px !important;
}

.select-items .show div:hover{
    background: transparent !important;
}

    /* Estilo do formulário de reserva */
    #be {
        background: rgba(247, 238, 219, 1) !important; /* Cor de fundo do formulário */
        border: 1px solid #ccc; /* Borda do formulário */
        padding: 10px; /* Espaçamento interno do formulário */
        border-radius: 0px; /* Arredondamento das bordas */
        width: 100%; /* Largura total do formulário */
        max-width: 1200px; /* Largura máxima do formulário */
        margin: 0 auto; /* Centralização horizontal */
        font-family: 'Raleway', sans-serif; /* Fonte do formulário */
    }

    /* Estilo das linhas dentro do formulário */
    #be .row {
        display: flex; /* Exibição flexível para alinhamento */
        justify-content: space-between; /* Distribuição uniforme */
        margin: 10px 0; /* Margem vertical entre as linhas */
    }


    /* Estilo dos rótulos (labels) */
    #be label {
        font-size: 12px; /* Tamanho da fonte dos rótulos */
        text-transform: uppercase; /* Transformação do texto para maiúsculas */
        color: #333; /* Cor do texto dos rótulos */
    }
    
.columns {
    position: relative; /* Importante para o posicionamento absoluto do ícone */
}

.input-with-icon {
    position: relative; /* Garante que o ícone absoluto fique dentro deste container */
    display: inline-block; /* Garante que o container não ocupe toda a largura disponível */
    width: 100%; /* Ajusta a largura conforme necessário */
}

.input-with-icon input {
    padding-left: 30px; /* Espaço à esquerda para o ícone */
}

.input-with-icon i {
    position: absolute;
    right: 10px; /* Posiciona o ícone à esquerda do input */
    top: 60%; /* Alinha verticalmente */
    transform: translateY(-50%); /* Ajusta para alinhar verticalmente */
    font-size: 18px; /* Tamanho do ícone */
    pointer-events: none; /* Garante que o ícone não seja clicável */
}


    /* Estilo das colunas dentro do formulário */
    #be .columns {
        width: 18%; /* Largura das colunas */
        margin: 0 5px; /* Margem horizontal entre as colunas */
    }


    /* Estilo dos inputs e selects */
    #be input,
    #be select{
        border: none;
        border-radius: 0px;
        border-bottom:1px solid #685643;
        color:#685643;
        height:40px;
        width:100%;
        margin:0px!important;
        margin-top:10px!important;  
        background: transparent;
        cursor: pointer; 
    }
    
    #be select {
    /* Remove a borda */
    padding: 8px; /* Adiciona um padding interno */
}

#be select option {
    border-radius: 0px !important
    padding: 8px; /* Adiciona um padding interno */
}


    #be button {
        width: 100%; /* Largura total dos elementos */
        font-size: 14px; /* Tamanho da fonte dos elementos */
         padding: 10px; /* Espaçamento interno dos elementos */
         padding-top: 20px;
         padding-bottom: 35px;
        margin-top: 5px; /* Margem superior dos elementos */
        border: 1px solid #ccc; /* Borda dos elementos */
        border-radius: 3px; /* Arredondamento das bordas dos elementos */
        height: 23px !important;/* Cor de fundo dos botões */
        color: #fff;
         transition: all ease-in-out .2s;
           cursor: pointer;
               border: none;

    }
    
    #be button {
        background: #685643; /* Cor de fundo dos botões */
        color: #fff; /* Cor do texto dos botões */
        font-size: 14px; /* Tamanho da fonte dos botões */
        border: none; /* Remoção da borda dos botões */
        transition: all ease-in-out .2s; /* Transição suave ao passar o mouse */
        cursor: pointer; /* Cursor de ponteiro ao passar o mouse */
       height: 23px !important;
           border: none;
    }

    /* Estilo ao passar o mouse sobre os botões */
    #be button:hover {
        background: #856b55 !important; /* Tom mais suave do background original */
    }


    /* Estilo ao passar o mouse sobre os botões */
    #be button:hover {
        background: #0056b3; /* Cor de fundo dos botões ao passar o mouse */
    }


    /* Estilo do título do formulário */
    #be h1 {
        font-size: 24px; /* Tamanho da fonte do título */
        text-align: center; /* Centralização do título */
        margin: 0 0 20px 0; /* Margem do título */
        color: #333; /* Cor do texto do título */
    }


    /* Estilo da caixa de seleção de crianças */
    #be #box-crianca {
        display: none; /* Inicialmente escondida */
        position: absolute; /* Posição absoluta */
        width: 200px; /* Largura da caixa */
        background: #f5f2f0; /* Cor de fundo da caixa */
        padding: 10px; /* Espaçamento interno da caixa */
        font-size: 14px; /* Tamanho da fonte dentro da caixa */
        top: 60px; /* Posição superior da caixa */
        z-index: 1; /* Camada da caixa */


        border: 1px solid #ccc; /* Borda da caixa */
    }


    /* Estilo dos rótulos dentro da caixa de seleção de crianças */
    #be #box-crianca label {
        color: #333; /* Cor do texto dos rótulos */
        margin: 0px; /* Margem dos rótulos */
        line-height: normal; /* Altura da linha dos rótulos */
    }


    /* Estilo dos inputs dentro da caixa de seleção de crianças */
    #be #box-crianca input {
        border: 1px solid #ccc; /* Borda dos inputs */
        background-color: #fff; /* Cor de fundo dos inputs */
        height: 30px; /* Altura dos inputs */
        margin-bottom: 10px; /* Margem inferior dos inputs */
        outline: none !important; /* Remoção do contorno dos inputs */
        width: 100%; /* Largura total dos inputs */
        padding-left: 10px; /* Espaçamento interno à esquerda dos inputs */
        max-width: 100px; /* Largura máxima dos inputs */
    }


    /* Estilo do botão dentro da caixa de seleção de crianças */
    #be #box-crianca button {
        width: 100%; /* Largura total do botão */
        text-align: center; /* Centralização do texto do botão */
        height: 23px !important; /* Altura do botão */
        outline: none !important; /* Remoção do contorno do botão */
        background: #007bff; /* Cor de fundo do botão */
        color: #fff; /* Cor do texto do botão */
        border: none; /* Remoção da borda do botão */
        border-radius: 3px; /* Arredondamento das bordas do botão */
        cursor: pointer; /* Cursor de ponteiro ao passar o mouse */
            height: 23px !important;
    }


    /* Estilo ao passar o mouse sobre o botão dentro da caixa de seleção de crianças */
    #be #box-crianca button:hover {
        background: #0056b3;
        color: #fff;/* Cor de fundo do botão ao passar o mouse */
    }


    /* Classes de visibilidade */
    #be .ativa {
        display: block !important; /* Exibição da caixa quando ativa */
    }
    
    table tbody > tr:nth-child(2n+1) > td, table tbody > tr:nth-child(2n+1) > th{
        background-color: transparent !important;
    }


.ui-datepicker td{
    padding: 0px;
    margin: 5px;
}

    #be .esconde {
        display: none; /* Ocultação da caixa quando escondida */
    }
    
/* Estilizando o datepicker */
.ui-datepicker {
    background: #ffffff !important; /* Cor de fundo */
    border: none !important; /* Cor da borda */
    color: #000000 !important; /* Cor do texto */
    font-family: 'Raleway', sans-serif !important; /* Fonte */
    padding: 30px !important;
}

/* Header do calendário */
.ui-datepicker-header {
    background: #ffffff !important; /* Cor de fundo */
    color: #685643 !important; /* Cor do texto */
    border-bottom: none !important; /* Cor da borda */
    font-size: 14px !important;
    padding-top: 10px !important; /* Aumenta o padding-top */
    font-weight: normal !important; /* Define o peso da fonte como normal */
    
}

..ui-state-disabled, .ui-widget-content .ui-state-disabled{
    text-align: center !important;
    text-decoration: line-through !important;
}

/* Botões de navegação */
    .ui-datepicker-prev, .ui-datepicker-next {
        background: none !important; /* Remove qualquer fundo */
        color: #685643 !important; /* Cor do texto */
        border: none !important; /* Sem borda */
        font-size: 18px !important; /* Tamanho do ícone */
        line-height: 32px !important; 
    }


.ui-datepicker-title {
        font-weight: normal !important;
    color: #685643 !important;
}


.ui-datepicker-calendar td a {
    color: #333 !important;
    background: #fff !important;
    border: none !important;
    border-radius: none !important; 
    text-align: center !important;
     transition: all ease-in-out .2s !important; 
     padding: 5px !important;
}

.ui-datepicker-calendar td:hover a {
    background: #342010 !important; 
    color: #fff !important;
     transition: all ease-in-out .2s !important;
     border-radius: 30px;
}


.ui-datepicker-calendar .ui-state-active {
    background: #A2754A !important;*/
    color: #fff !important;
     border-radius: 30px !important;
    height: 31px;
    width: 31px;

}

.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon {
    background: none !important; 
    border: none !important; 
    box-shadow: none !important;
}

.ui-datepicker th{
     font-weight: 600 !important; 
     font-size: 12px !important;
     font-family: 'Raleway', sans-serif;
     color: #342010;
}


    .ui-datepicker-prev::after {
        content: "<";
    }

    .ui-datepicker-next::after {
        content: ">";
    }

    .ui-datepicker-prev .ui-icon,
    .ui-datepicker-next .ui-icon {
        display: none !important; 
    }

.ui-icon-circle-triangle-e, .ui-icon-circle-triangle-w {
    background-color: transparent !important; 
    border: none !important;
    box-shadow: none !important;
}

.ui-widget-header{
    border: none !important;
}

.ui-datepicker-calendar th {
    border-bottom: none !important; 
}

.ui-datepicker-calendar td {
    border: none !important;
}

select option{
    border-radius: 0;
    padding: 10px;
}