@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

@font-face {
    font-family: 'TailwindBlack';
    src: url("../fonts/TailwindBlack.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* Estilização global */
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background-color: black; /* Changed to avoid conflict with Bootstrap */
    color: white;
    overflow-y: auto;
}


body.menu-open {
    overflow: hidden; /* Apenas esconde rolagem quando menu estiver ativo */
}

/* Estilização do Header */
.header {
    position: relative; /* Essencial para o posicionamento absoluto do filho (.menu) */
    display: flex;
    justify-content: space-between; /* Empurra o logo para a esquerda e o user-info para a direita */
    align-items: center; /* Alinha verticalmente o logo e o user-info */
    width: 100%;
    padding: 0 20px; /* Adiciona um espaçamento nas laterais */
    box-sizing: border-box; /* Garante que o padding não aumente a largura total */
    background-color: #000; /* Fundo preto para o header */
    z-index: 10; /* Garante que o header fique sobre o conteúdo */
}

.header .menu {
    position: absolute;
    top: 50%; /* Alinha o topo do menu no meio vertical do header */
    left: 50%; /* Alinha a esquerda do menu no meio horizontal do header */
    transform: translate(-50%, -50%); /* Puxa o menu 50% de sua própria largura/altura para a esquerda/cima, centralizando-o perfeitamente */
}


/* Logo */
.logo-link {
    display: flex;
    align-items: center;
}

.logo {
    width: 120px;
    height: auto;
}

/* MENU */
.menu {
    background: #ffc521 !important; /* Amarelo em todas as telas */
    border-radius: 10px; /* Bordas arredondadas */
    padding: 5px 5px;
}

/* Ajusta os links dentro da navegação */
.menu ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: center;
}

.menu ul li {
    position: relative;
}

/* Links do menu */
.menu ul li a {
    display: block;
    padding: 10px 15px;
    color: #000 !important;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
    border-radius: 5px;
}

/* Mantém a mesma proporção ao passar o mouse */
.menu ul li a:hover {
    background: #000 !important; /* Fundo preto */
    color: #fff !important; /* Texto branco */
}

/* Estilização do Dropdown */
.dropdown-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: -5%;
    background: #ffc521 !important; /* Mantém a cor amarela */
    border-radius: 5px;
    list-style: none;
    padding: 5px 0;
    min-width: 160px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Itens do Dropdown */
.dropdown-menu li {
    display: block;
    padding: 0;
}

/* Hover do dropdown mantendo o tamanho */
.dropdown-menu li a:hover {
    background: #000 !important;
    color: #fff !important;
}

/* Exibir o dropdown quando passar o mouse */
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}

/* Correção de largura e alinhamento */
.menu ul li {
    display: inline-block;
    text-align: center;
}

.menu ul li .dropdown-menu {
    width: auto;
    min-width: 100%;
    display: flex;
    flex-direction: column;
}

/* Ajuste para evitar botões do dropdown grudados */
.dropdown-menu li a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
}

/* Usuário */
.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    filter: invert(1);
}

/* Ajusta a aparência do select */
select {
    background: black !important;
    color: white !important;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
}

/* Estiliza o dropdown (options) */
select option {
    background: black !important;
    color: white !important;
    font-size: 16px;
    padding: 10px;
}

/* Quando hover ou selecionado */
select option:checked, select option:hover {
    background: #ffc521 !important;
    color: black !important;
}

body {
    background: url('../img/background.png');
    background-repeat: no-repeat;
    background-size: cover;
}

/* Formulário */
.form-layout {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px 0;
}

.form-layout .container {
    max-width: 1100px;
    width: 90%;
    background: rgba(0, 0, 0, 0.85);
    padding: 50px;
    border-radius: 8px;
}

/* Inputs */
input, select {
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color 0.3s ease-in-out;
}

input:focus, select:focus {
    border-color: #FFC51F;
    outline: none;
}

/* Grupo de Taxas */
.taxas-group {
    width: 70%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
}

.taxas-group .form-group {
    margin: 0;
    padding: 0;
    width: auto; /* Mantém os campos no tamanho ideal */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.taxas-group input {
    width: 50%;
}

/* Campo Locação */
.locacao-group {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    gap: 5%;
    margin-top: 15px;
}

.locacao-group .form-group {
    width: auto;
}

/* Campo Adq */
.adq-group {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 15px;
    align-items: center
}

.adq-group label{
    padding-right: 10px;
}    

.adq-group .form-group {
    width: 40%;
}

/* 🔹 Estilização geral do dropdown */
.custom-dropdown {
    position: relative;
    width: 13%;
    background: #1c1c1c;
    border-radius: 5px;
    border: 1px solid #ffc521;
    color: #fff;
    justify-items: center;
}

/* 🔹 Botão do dropdown */
.dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #fff;
}

/* 🔹 Ajuste da logo dentro do botão */
.dropdown-btn img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    margin-right: 6px;
}

/* 🔹 Lista de opções do dropdown */
.dropdown-list {
    position: absolute;
    top: 100%; /* 🔹 Agora desce corretamente */
    left: 0;
    width: 100%;
    background: #2a2a2a;
    border: 1px solid #ffc521;
    border-radius: 5px;
    display: none; /* 🔹 Começa oculto */
    list-style: none;
    padding: 5px 0;
    margin: 0;
    z-index: 100;
}

/* 🔹 Corrigindo a altura dos itens para garantir visibilidade */
.dropdown-list li {
    display: flex;
    align-items: center;
    padding: 10px; /* 🔹 Aumentado para melhorar clique */
    cursor: pointer;
    transition: background 0.2s ease-in-out;
    color: #ffffff;
    height: 40px; /* 🔹 Garantindo altura fixa */
}

/* 🔹 Hover nos itens */
.dropdown-list li:hover {
    background: #ffc521;
    color: #000;
}

/* 🔹 Ajuste das imagens dentro do dropdown */
.dropdown-list li img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 6px;
}

.dropdown-list.show {
    display: block !important;
}


/* Botões */
.form-actions {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 25px;
}


/* Esconder o ícone do menu hambúrguer no desktop */
.menu-toggle {
    display: none;
}

/* Layout para alinhar Data Inicial e Data Final na mesma linha */
.datas-container {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    flex-wrap: wrap; /* Se a tela for pequena, os inputs vão quebrar corretamente */
}

.datas-container .input-wrapper {
    width: 48%;
}

.textarea-custom {
    height: 100px; /* Ajusta altura */
    resize: none; /* Impede redimensionamento */
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    border-radius: 6px;
    padding: 12px;
    box-sizing: border-box;
    transition: border-color 0.3s ease-in-out;
    display: block;
    width: 100%;
}

.textarea-custom::placeholder {
    color: rgba(255, 255, 255, 0.5); /* Deixa o placeholder mais visível */
    font-size: 14px;
}

.form-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.form-buttons button {
    padding: 12px 24px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    min-width: 120px; /* Garante que os botões tenham o mesmo tamanho mínimo */
} .form-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.right-buttons {
    display: flex;
    gap: 10px;
}

.form-buttons button {
    padding: 12px 24px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    min-width: 120px;
}

.btn-cancelar {
    background-color: #f44336;
    color: white;
}

.btn-confirmar {
    background-color: #4CAF50;
    color: white;
}

.btn-orcamento {
    background-color: #2196F3;
    color: white;
}

.form-buttons button:hover {
    opacity: 0.8;
}

#others-costs-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.other-cost {
    display: flex;
    align-items: center;
    gap: 10px;
}

.other-cost select,
.other-cost input {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.other-cost button {
    background-color: red;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.other-cost button:hover {
    background-color: darkred;
}

/* Melhorando o botão "Adicionar Custo" */
#add-cost-button {
    margin-top: 10px;
    padding: 8px 12px;
    background-color: green;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#add-cost-button:hover {
    background-color: darkgreen;
}


/* Ajuste do menu no mobile */
@media (max-width: 768px) {
    .datas-container .input-wrapper {
        width: 100%;
    }

    .header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 15px;
        height: auto;
        position: relative;
        background-color: #000;
    }

    /* Ajustando a posição do menu hamburguer */
    .menu-toggle {
        display: block;
        font-size: 28px;
        cursor: pointer;
        color: #ffc521;
        position: absolute;
        right: 15px;
        top: 15px;
        z-index: 1003;
        background: rgba(0, 0, 0, 0.3);
        padding: 5px 10px;
        border-radius: 5px;
    }

    .menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 110px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        background: #ffc521;
        padding: 10px 0;
        text-align: center;
        border-radius: 10px;
        z-index: 1002;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    }

    .menu.active {
        display: flex;
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    .user-info {
        transition: margin-top 0.3s ease-in-out;
    }

    .datas-container {
        flex-direction: column; /* No mobile, volta para uma coluna */
    }

    .datas-container .input-wrapper {
        width: 100%; /* Ocupa a largura toda no mobile */
    }

    .custom-dropdown {
        max-width: 100%;
        width: 90%;
    }

    .dropdown-list {
        max-width: 100%;
        width: 90%;
    }

    .dropdown-btn {
        font-size: 14px;
        padding: 12px;
    }

    .dropdown-list li {
        height: 45px;
        font-size: 14px;
    }

    .dropdown-list li img {
        width: 22px;
        height: 22px;
    }

    .taxas-group {
        flex-direction: column; /* Coloca os campos em uma única coluna */
        gap: 10px; /* Reduz o espaço entre os campos */
    }

    .taxas-group .form-group {
        flex-direction: column; /* Alinha os labels e inputs verticalmente */
        align-items: flex-start; /* Alinha os itens à esquerda */
        width: 100%; /* Ocupa a largura total */
    }

    .taxas-group input {
        width: 70px; /* Ocupa a largura total */
        text-align: center;
    }

    .taxas-group label {
        margin-bottom: 5px; /* Adiciona um pequeno espaço entre o label e o input */
    }
}

/* Ajuste responsivo */
@media (min-width: 768px) and (max-width: 1023px) {
    .locacao-group .form-group {
        width: 30%;
    }
}

@media (min-width: 1024px) {
    .locacao-group .form-group {
        width: 20%;
    }
}

.flatpickr-calendar {
    background: black !important;
    color: white !important;
    border-radius: 8px;
}

.flatpickr-months {
    background: black !important;
}

.flatpickr-weekday {
    color: #ffc521  !important;
}

.flatpickr-day {
    color: white !important;
}

.flatpickr-day.selected {
    background: #ffc521  !important;
    color: white !important;
}

.flatpickr-day.today {
    border: 1px solid #ffc521  !important;
    color: #ffc521  !important;
}

.flatpickr-prev-month, .flatpickr-next-month {
    fill: #ffc521  !important;
}

/* Estiliza o mês e o ano para ficarem brancos */
.flatpickr-current-month {
    color: white !important;
}

/* Ajusta a cor do dropdown do ano */
.flatpickr-current-month .numInputWrapper {
    background: black !important;
    color: white !important;
}

/* Ajusta a cor do ano dentro do input */
.flatpickr-current-month .cur-year {
    color: white !important;
    font-weight: bold;
}

/* Ajusta a cor das setas de navegação do mês */
.flatpickr-prev-month svg, .flatpickr-next-month svg {
    fill: #ffc521 !important;
}

/* Estiliza a lista dropdown do calendário */
.flatpickr-monthDropdown-months, .flatpickr-current-month .numInputWrapper {
    background: black !important;
    color: white !important;
    border-radius: 5px;
}

/* Ajusta a cor das opções no dropdown */
.flatpickr-monthDropdown-months option,
.numInputWrapper span {
    background: black !important;
    color: white !important;
}

/* Hover e seleção */
.flatpickr-monthDropdown-months option:hover,
.flatpickr-monthDropdown-months option:checked {
    background: #ffc521 !important;
    color: black !important;
}

/* Estilização do Modal */
.modal_loading {
    display: none; /* Começa escondido */
    position: fixed;
    z-index: 9999; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fundo escuro transparente */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Conteúdo do modal */
.modal-content-loading {
    background: rgb(0, 0, 0);
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

/* Imagem animada */
.loading-spinner {
    width: 100px; /* Ajuste o tamanho conforme necessário */
    height: 100px;
    animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

/* Animação de rotação */
@keyframes spin {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

/* Custom style to make bootstrap-select match other select inputs */
.bootstrap-select {
    width: 100% !important;
}


.bootstrap-select .dropdown-menu {
    left: 0 !important;
    right: auto !important;
}

.bootstrap-select .dropdown-toggle .caret {
    display: inline-block !important;
}

.bootstrap-select .dropdown-toggle {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    font-size: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
    position: relative;
}

.bootstrap-select .dropdown-toggle:focus {
    border-color: #FFC51F !important;
    outline: none !important;
}

.bootstrap-select .dropdown-toggle .caret {
    position: absolute;
    top: 50%;
    right: 12px;
    margin-top: -2px;
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-top: 4px solid #fff;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    pointer-events: none;
}

.bootstrap-select .dropdown-menu {
    background: black !important;
    color: white !important;
    border-radius: 6px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

.bootstrap-select .dropdown-menu .inner > li > a {
    color: white !important;
    padding: 10px 12px !important;
}

.bootstrap-select .dropdown-menu .inner > li > a:hover,
.bootstrap-select .dropdown-menu .inner > li.selected > a {
    background-color: #ffc521 !important;
    color: black !important;
}