.btn-group-sm>.btn,
.btn-sm {
    border-radius: 100px;
}

/* Estilo da capa */
.cover-container {
    position: relative;
    height: 470px;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
    margin-bottom: 20px;
}

.cover-container::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 80px; /* altura do gradiente (ajuste conforme o efeito desejado) */
    pointer-events: none;
    border-radius: 20px 20px 0 0; /* acompanha o border-radius do topo */
  /*  box-shadow: inset 0 32px 32px -12px rgba(0,0,0,0.8); */
    background: linear-gradient(to bottom left, rgb(0 0 0 / 100%) 0%, rgb(0 0 0 / 0%) 50%, rgb(0 0 0 / 0%) 0%);
    z-index: 2;
}

.cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* O object-position será definido inline via PHP */
    /* Melhorar renderização para nitidez */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    backface-visibility: hidden;
    transform: translateZ(0);
    /* Suavização para navegadores que suportam */
    -webkit-font-smoothing: subpixel-antialiased;
}

/* Otimizações específicas para desktop */
@media (min-width: 1200px) {
    .cover-image {
        /* Para telas grandes, usar renderização otimizada */
        image-rendering: auto;
        image-rendering: high-quality;
        /* Força hardware acceleration */
        will-change: transform;
        /* Otimização adicional para qualidade */
        filter: brightness(1.02) contrast(1.03);
    }
    
    .cover-container {
        /* Aumentar altura em telas muito grandes */
        height: min(470px, 25vw);
        max-height: 600px;
    }
}

/* Para telas de alta densidade (Retina, etc.) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .cover-image {
        /* Em telas Retina, usar renderização mais suave */
        image-rendering: -webkit-optimize-contrast;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        /* Leve melhoria no contraste para telas Retina */
        filter: contrast(1.01) saturate(1.02);
    }
}

/* Preview do posicionamento focal */
.position-preview-container {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.preview-box {
    flex: 1;
    min-width: 120px;
    max-width: 200px;
}

.preview-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 5px;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.preview-frame {
    border: 2px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
    position: relative;
}

.desktop-frame {
    width: 100%;
    height: 60px;
    /* Proporção desktop aproximada */
}

.mobile-frame {
    width: 100%;
    height: 80px;
    /* Proporção mobile aproximada */
}

.preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--preview-position, center center);
    transition: object-position 0.3s ease;
    image-rendering: auto;
}

/* Estados do preview */
.preview-frame.active {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Responsividade do preview */
@media (max-width: 576px) {
    .position-preview-container {
        flex-direction: column;
        align-items: center;
    }
    
    .preview-box {
        max-width: 250px;
    }
}

/* Overlay gradiente para melhorar legibilidade do texto */
.cover-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
    padding: 30px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Botão de voltar no canto superior direito */
.back-button {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 20;
}



.profile-image {
   /* width: 160px;
    height: 160px; */
    object-fit: cover;
}

/* Conteúdo do perfil dentro da capa */
.cover-content {
    margin-left: 180px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    width: 60%;
}

/* Botões de ação dentro da capa */
.cover-actions {
    position: absolute;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: 40%;
}

/* Responsividade */
@media (max-width: 992px) {
    .cover-content {
        width: 100%;
        margin-bottom: 70px;
    }

    .cover-actions {
        bottom: 20px;
        right: 0px;
        left: 0px;
        justify-content: center;
        max-width: none;
    }
}

@media (max-width: 768px) {
 
    .cover-content {
        margin-left: 0;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 60px;
    }

    .cover-actions {
        bottom: 15px;
    }
}







body {
    background-color: #f8f9fa;
}

.header {
    background-color: #343a40;
    color: white;
    padding: 20px 0;
    margin-bottom: 30px;
}

.circlePerfil {
    object-fit: cover;
    height: 150px;
    width: 150px;
}

.arena-info {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.arena-info img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 20px;
}

/* AGENDA PAINEL */

.horario-btn.active {
    background-color: #0d6efd;
    color: white;
}

@media (max-width: 768px) {
    .sidebar {
        width: 0;
        overflow: hidden;
    }

    .content {
        margin-left: 0;
    }

    .toggle-btn {
        display: block;
    }
}

/* Customização FullCalendar */
.fc-day-today {
    background-color: rgba(13, 110, 253, 0.1) !important;
}

.fc-event {
    cursor: pointer;
}

/* Lista de agendamentos do dia */
.agendamento-item {
    border-left: 4px solid #fd7e14;
    padding: 10px;
    margin-bottom: 10px;
    background-color: #f8f9fa;
    border-radius: 4px;
}

.agendamento-item:hover {
    background-color: #e9ecef;
}

/* Estilo para dias indisponíveis e lotados */
.fc-day.indisponivel {
    background-color: #f8f9fa !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

.fc-day.lotado {
    background-color: #ffecb5 !important;
    /* amarelo claro */
}

/* Adicione um indicador visual */
.fc-day.indisponivel::after {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #dc3545;
    font-size: 1.5em;
    opacity: 0.5;
}

.fc-day.lotado::after {
    content: "!";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fd7e14;
    font-size: 1.5em;
    font-weight: bold;
    opacity: 0.7;
}



.fc-day-past .fc-daygrid-event-dot {
    border: calc(var(--fc-daygrid-event-dot-width, 8px) / 2) solid rgb(175 175 175);
}

.fc-day-past .fc-event-title {
    color: #6e6e6e;
}

.indisponivel a {
    color: #6e6e6e !important;
}

.fc-day-today .fc-daygrid-event-dot {
    border: calc(var(--fc-daygrid-event-dot-width, 8px) / 2) solid #ff3401;
}

.fc-day-past .fc-v-event {
    background-color: rgb(211, 211, 211) !important;
}

.fc-day-future .fc-v-event {
    background-color: #eb9743 !important;

}


.fc-day-other .fc-event-title {
    color: rgb(179, 179, 179);
}

.fc-day-other .fc-daygrid-event-dot {
    border: calc(var(--fc-daygrid-event-dot-width, 8px) / 2) solid #ff3401;
}



/* Desabilitar interação com dias indisponíveis */
.fc-day.indisponivel .fc-daygrid-day-top a {
    pointer-events: none;
    color: #e8e8e8;
    pointer-events: none !important;
}

.fc-day-past .fc-daygrid-day-top a {
    color: #e8e8e8 !important;
    cursor: default;
    /* Altera o cursor para indicar que não é clicável */

}

/* Exibição do valor total */
#valor_total_container {
    display: none;
    padding: 15px;
    margin-top: 15px;
    background-color: #e9f7ef;
    border-radius: 5px;
    text-align: center;
}

#valor_total {
    font-size: 1.2em;
    font-weight: bold;
    color: #28a745;
}





.fc-day-fechado {
    background-color: #f1f1f1 !important;
    color: #999 !important;
    cursor: not-allowed !important;
    border-radius: 0px !important;
}

.fc-day-fechado a {

    color: #d0d0d0 !important;

}


.fc-day-fechado:hover {
    background-color: #f1f1f1 !important;
}

/* Opcional: estilo para o badge "Fechado" */
.fechado-badge {
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 3px;
    background: #e0e0e0;
    color: #666;
    position: absolute;
    bottom: 2px;
    right: 2px;
}

.fc-event-main .fc-event-title {
    color: #333 !important;
    font-weight: 600;

}

.fc-v-event {
    background-color: #cceb43;
    border: none;
}

.fc-event-time {
    color: #333;
}

.fc-event-title {
    color: #000;
}

.fc-daygrid-event-dot {
    border: calc(var(--fc-daygrid-event-dot-width, 8px) / 2) solid #ff3401;
}

.fc-day-passado {
    background-color: #f8f8f8 !important;
    color: #ccc !important;
    cursor: not-allowed !important;
    opacity: 0.8;
}

.fc-day-passado:hover {
    background-color: #f8f8f8 !important;
}

.passado-badge {
    font-size: 9px;
    padding: 1px 3px;
    border-radius: 3px;
    background: #ddd;
    color: #888;
    position: absolute;
    bottom: 2px;
    left: 2px;
}

.fc .fc-daygrid-day.fc-day-today {
    background-color: var(--fc-today-bg-color, rgb(204 235 67)) !important;
    border-radius: 10px;
    /* box-shadow: -1px 0px 20px 0px; */

    margin: 10px;
    margin: 20px;

}

.fc-daygrid-day-bottom a {
    color: #ff8c01 !important;

}

.fc-day-today {
    background-color: #000 !important;

}

.fc-day-today>.fc-col-header-cell a {
    color: #000 !important;
}

.fc .fc-highlight,
.fc .fc-timegrid-col.fc-day-today {

    background: rgb(240, 240, 240) !important;
    border-radius: 10px !important;
    border: 0px solid #fff;
}

.fc .fc-timegrid-slot {
    height: 1.5em;
    border-bottom: 0;
    border: 1px dashed #dbdbdb !important;

}


#btnNovoAgendamento {
    background-color: #000;
    border: none;
    height:50px;
}

.fc-daygrid-day-top a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    font-size: 23px;
}

.fc-theme-standard td,
.fc-theme-standard th {
    border: 1px solid #ddd;
    border: 1px solid #f1f1f1;
    border-radius: 20px;
}

.fc-theme-standard td,
.fc-theme-standard th {
    border: 0px solid #ddd;
    border: none !important;
}

.fc .fc-daygrid-day-frame {
    position: relative;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    /* margin: 2px; */
    min-height: 100%;
}


.fc-col-header-cell {
    background: #000;
    border: none !important;
}

.fc-col-header-cell a {
    color: #fff;
    text-transform: capitalize;
    text-decoration: none;
}

.fc .fc-button-primary {
    color: #fff;
    color: var(--fc-button-text-color, #fff);
    background-color: #000000;
    background-color: #000000;
    border-color: #000000;
    border-color: #4e4e4e;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:disabled {
    color: #000;
    color: var(--fc-button-text-color, #000);
    background-color: #cceb43;
    background-color: #cceb43;
    border-color: #cceb43;
    border-color: #cceb43;
}

.fc .fc-button-primary:hover {
    color: #000;
    color: var(--fc-button-text-color, #000);
    background-color: #cceb43;
    background-color: #cceb43;
    border-color: #cceb43;
    border-color: #cceb43;
    transition-duration: .1s;
}

.fc .fc-button-primary:focus,
.fc .fc-button-primary:not(:disabled).fc-button-active:focus,
.fc .fc-button-primary:not(:disabled):active:focus {
    box-shadow: none;
}

.fc .fc-scrollgrid,
.fc .fc-scrollgrid table {
    width: 100%;
    table-layout: fixed;
    border: none;
}

.fc .fc-timegrid .fc-daygrid-body {
    z-index: 2;
    display: none;
}

.fc .fc-timegrid-col.fc-day-today {
    background-color: rgb(220 240 141 / 37%);
    background-color: rgb(220 240 141 / 37%);
}

.fc-theme-standard .fc-list-day-cushion a {
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
}

.fc .fc-list-event-dot {
    display: inline-block;
    box-sizing: content-box;
    width: 0;
    height: 0;
    border: 5px solid #ff8c01;
    border: calc(var(--fc-list-event-dot-width, 10px) / 2) solid #ff8c01;
    border-radius: 5px;
    border-radius: calc(var(--fc-list-event-dot-width, 10px) / 2);
}

.fc .fc-toolbar-title {
    font-size: 1.5em;
    margin: 0;
    text-transform: uppercase;
}


/* Estilo para o botão Agendar */
.fc .fc-agendarButton-button {
    background-color: #4CAF50 !important;
    border-color: #4CAF50 !important;
    font-weight: bold;
}

.fc .fc-agendarButton-button:hover {
    background-color: #45a049 !important;
    border-color: #45a049 !important;
    color: #fff !important;
}

/* Adicione um ícone de + se desejar */
.fc .fc-agendarButton-button::before {
    content: "";
    margin-right: 5px;
}

.fc-button-agendarCustom:hover {
    color: #fff !important;
}


.fc .fc-list-event:hover td {
    background-color: #fff;

}

.list-group-item:first-child {

    font-size: 15px !important;
}

.list-group-item+.list-group-item {
    border-top-width: 0;
    font-size: 15px;
}




/* Estilização de alertas vazios */
.alert-empty {
    background-color: #f8f9fa;
    border: none;
    border-radius: 12px;
    padding: 5px 5px;
    text-align: center;
    color: #6c757d;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.alert-empty:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.alert-empty .alert-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    display: block;
    opacity: 0.6;
}

.alert-empty h6 {
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.alert-empty p {
    margin-bottom: 0;
    font-size: 0.95rem;
    opacity: 0.8;
}

/* Variações de cores para diferentes tipos de alertas */
.alert-empty.alert-info .alert-icon {
    color: #686868;
}

.alert-empty.alert-warning .alert-icon {
    color: #ffc107;
}

.alert-empty.alert-success .alert-icon {
    color: #198754;
}

.alert-empty.alert-danger .alert-icon {
    color: #dc3545;
}

/* Animação de entrada para os alertas */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-empty {
    animation: fadeInUp 0.5s ease forwards;
}




/* Estilo para agendamentos do usuário logado */
.fc-event.is-owner {
    background-color: #cceb43 !important;
    /* Verde */
    border-color: #cceb43 !important;
}

.fc-event.is-owner .fc-event-main {
    color: #000 !important;
}

.fc-event.is-owner .fc-event-title {
    color: #000 !important;
    font-weight: bold;
}

.fc-event.is-owner .fc-daygrid-event-dot {
    border-color: rgb(0, 127, 254) !important;
}

.hora-indicador {
    font-size: 0.8em;
    margin-left: 2px;
    font-weight: bold;
    vertical-align: middle;
}

/* Estilo específico para eventos do usuário */
.fc-event.is-owner .hora-indicador {
    color: #333;
}

/* Estilo para eventos não pertencentes ao usuário */
.fc-event:not(.is-owner) .hora-indicador {
    color: #333;
}


.fc-theme-standard .fc-popover {
    border: 1px solid #ddd;
    border: 1px solid var(--fc-border-color, #ddd);
    background: var(--fc-page-bg-color, #fff) !important;
}


/* Estilos adicionais para melhorar a experiência em dispositivos móveis */
@media (max-width: 768px) {
    .fc .fc-toolbar {
        flex-direction: column;
        gap: 8px;
    }

    .fc .fc-toolbar-title {
        font-size: 1.2em;
    }

    .fc .fc-list-event-title {
        font-weight: bold;
    }

    /* Aumentar o tamanho do botão Agendar para ser mais fácil de tocar */
    .fc .fc-agendarButton-button {
        padding: 8px 16px;
        font-size: 16px;
    }

    .fc .fc-listWeek-button {
        display: none;
    }


}

#btnNovoAgendamento {
    background-color: #000;
    border: none;
}

#btnNovoAgendamento:hover {
    background-color: #cceb43;
    color: #000;
}

.horario-btn.active {
    background-color: #0d6efd;
    color: white;
}

.voltar-link {
    margin-bottom: 20px;
    display: inline-block;
}



/* Adicione este CSS na seção <style> do perfil_agenda.php */

.quadra-card {
    cursor: pointer;
    transition: all 0.3s ease;
    height: 100%;
}

.quadra-card:hover {
    transform: translateY(-5px);
    /*  box-shadow: 0 10px 20px rgba(0,0,0,0.1); */
}

.quadra-card.selected {
    border: 2px solid #0d6efd;

    /*  box-shadow: 0 0 15px rgba(204, 235, 67, 0.5); */
}

.quadra-img {
    height: 180px;
    object-fit: cover;
}

#quadrasImagensContainer {
    margin-bottom: 20px;
}


.quadra-slider {
    margin: 0 -10px 20px -10px;
}

.quadra-slide {
    padding: 10px;
}

.quadra-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    height: 100%;
    border: 3px solid #fff;
}

.quadra-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.quadra-card.selected {
    border: 3px solid #cceb43;
    box-shadow: 0 0 15px rgba(204, 235, 67, 0.5);
}

.quadra-img {
    height: 180px;
    object-fit: cover;
    width: 100%;
}

.slick-prev,
.slick-next {
    z-index: 10;
    width: 40px;
    height: 40px;
}

.slick-prev {
    left: 10px;
}

.slick-next {
    right: 10px;
}

.slick-prev:before,
.slick-next:before {
    font-size: 40px;
    color: #000;
    opacity: 0.8;
}

.slick-dots {
    bottom: -30px;
}

.slick-dots li button:before {
    font-size: 12px;
    color: #000;
}

.quadra-info {
    padding: 15px;
}

.quadra-nome {
    font-weight: bold;
    margin-bottom: 5px;
}

.quadra-descricao {
    color: #666;
    font-size: 0.9em;
}


/* Estilos para os indicadores de status dos agendamentos */
.agendamento-item {
    border-left: 5px solid #dee2e6;
    /* Cor padrão */
    transition: all 0.2s;
}

.agendamento-item.status-ocupado {
    border-left-color: #6c757d;
    /* Cinza para ocupado */
}

.agendamento-item.status-nao-cancelavel {
    border-left-color: #ffc107;
    /* Amarelo para não cancelável */
}

.agendamento-item.status-seu-agendamento {
    border-left-color: #28a745;
    /* Verde para seu agendamento */
}




/* Estilos para os inputs de verificação */
.verification-code-input {
    width: 45px;
    height: 50px;
    font-size: 24px;
    text-align: center;
    font-weight: bold;
}

.verification-code-container {
    max-width: 350px;
    margin: 0 auto;
}

#codeTimer {
    font-size: 14px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 4px;
    background-color: #f8f9fa;
}

#resendCodeBtn {
    font-size: 14px;
    padding: 5px 0;
}

#resendCodeBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}



/* Estilos para os modais de login e cadastro */
.modal-content {
    border-radius: 15px;
    overflow: hidden;
    border: none;
}

.modal-dialog {
    max-width: 900px;
}

.nav-pills .nav-link {
    color: #6c757d;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 10px 15px;
    transition: all 0.3s;
    font-weight: 500;
}

.nav-pills .nav-link.active {
    color: white;
    background-color: #000000;
}

.nav-pills .nav-link:hover:not(.active) {
    background-color: #e9ecef;
}

.form-floating>.form-control {
    padding: 1.5rem 0.75rem;
    height: calc(3.5rem + 2px);
}

.form-floating>label {
    padding: 1rem 0.75rem;
}

.form-control:focus {
    border-color: #000000;
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.1);
}

.password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    color: #6c757d;
}

.form-floating .password-toggle {
    top: 32px;
}

.rounded-circle {
    border-radius: 100px !important;
    
    text-align: center;
    object-fit: cover;
}

.btn-primary {
    background-color: #000000;
    border-color: #000000;

    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #cceb43;
    border-color: #cceb43;
    color: #000000;
    transform: translateY(-2px);
}

.form-check-input:checked {
    background-color: #000000;
    border-color: #000000;
}

a {
    color: #000000;
    transition: all 0.3s;
}

a:hover {
    color: #cceb43;
}

.alert {
    border-radius: 8px;
    padding: 12px 15px;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.password-strength {
    margin-top: -15px;
}

.progress {
    border-radius: 10px;
    overflow: hidden;
    background-color: #e9ecef;
}

/* Animação para o modal */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
}

.modal.show .modal-dialog {
    transform: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tab-pane.active {
    animation: fadeIn 0.5s;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

.shake {
    animation: shake 0.5s;
}





.form-floating>.form-select {
    padding-top: 1.625rem;
    height: calc(3.5rem + calc(var(--bs-border-width) * 13));
    padding-bottom: .625rem;
}



/* Estilos para o modal de agendamento */
#agendamentoModal .modal-content {
    border-radius: 15px;
    overflow: hidden;
}

#agendamentoModal .form-floating>.form-control {
    padding: 1.5rem 0.75rem;
    height: calc(3.5rem + 13px);
}

#agendamentoModal .form-floating>label {
    padding: 1rem 0.75rem;
}

#agendamentoModal .form-control:focus,
#agendamentoModal .form-select:focus {
    border-color: #000000;
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.1);
}

#agendamentoModal .btn-primary {
    background-color: #000000;
    border-color: #000000;
    padding: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border-radius: 8px;
}

#agendamentoModal .btn-primary:hover,
#agendamentoModal .btn-primary:focus {
    background-color: #cceb43;
    border-color: #cceb43;
    color: #000000;
    transform: translateY(-2px);
}

#agendamentoModal .btn-primary:disabled {
    background-color: #6c757d;
    border-color: #6c757d;
    transform: none;
}

#agendamentoModal .form-check-input:checked {
    background-color: #000000;
    border-color: #000000;
}

/* Estilos para o slider de quadras */
#agendamentoModal .quadra-slider {
    margin-bottom: 20px;
}

#agendamentoModal .quadra-slide {
    padding: 10px;
}

#agendamentoModal .quadra-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    height: 100%;
}

#agendamentoModal .quadra-card:hover {
    transform: translateY(-5spx);
    border: 3px solid #cceb43;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#agendamentoModal .quadra-card.selected {
    border: 3px solid #cceb43;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#agendamentoModal .quadra-img {
    height: 120px;
    object-fit: cover;
    width: 100%;
}

#agendamentoModal .quadra-info {
    padding: 12px;
}

#agendamentoModal .quadra-nome {
    font-weight: bold;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

#agendamentoModal .quadra-descricao {
    color: #666;
    font-size: 0.8rem;
    line-height: 1.3;
}

/* Estilos para os botões de horário */
#agendamentoModal .horarios-grid {
    display: initial;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 5px;
}

#agendamentoModal .horario-btn {
    padding: 8px 5px;
    font-size: 0.9rem;
    border-radius: 8px;
    transition: all 0.2s;
}

#agendamentoModal .horario-btn.active {
    background-color: #000000;
    border-color: #000000;
    color: white;
    transform: scale(1.05);
}

/* Estilização da barra de rolagem dos horários */
#agendamentoModal .horarios-grid::-webkit-scrollbar {
    width: 6px;
}

#agendamentoModal .horarios-grid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#agendamentoModal .horarios-grid::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

#agendamentoModal .horarios-grid::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Estilização para o valor total */
#valor_total_sidebar,
#valor_total_container {
    transition: all 0.3s;
}

#valorTotalSidebar,
#valorTotalDisplay {
    transition: all 0.3s;
}

/* Animação para o modal */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#agendamentoModal {
    animation: fadeIn 0.5s;
}

/* Estilização para os dias da semana */
#dias-semana-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

#dias-semana-container .form-check-inline {
    margin-right: 0;
    background-color: #f8f9fa;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s;
}

#dias-semana-container .form-check-inline:hover {
    background-color: #e9ecef;
}

#dias-semana-container .form-check-input:checked+.form-check-label {
    font-weight: 600;
}

/* Animação de shake para erros */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

.shake {
    animation: shake 0.5s;
}

/* Estilização para o loading */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    border-radius: 15px;
}

.loading-spinner {
    width: 50px;
    height: 50px;
}
 




 
:root {
    --primary-color: #000000;
    --secondary-color: #cceb43;
    --text-color: #333333;
    --light-bg: #f8f9fa;
    --dark-bg: #343a40;
    --card-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    --transition: all 0.3s ease;

    --status-pendente-bg: #fff8e1;
    --status-pendente-border: #ffecb3;
    --status-pago-bg: #e8f5e9;
    --status-pago-border: #c8e6c9;
    --status-atrasado-bg: #ffebee;
    --status-atrasado-border: #ffcdd2;
    --status-cancelado-bg: #f5f5f5;
    --status-cancelado-border: #e0e0e0;
    --status-finalizado-bg: #e3f2fd;
    --status-finalizado-border: #bbdefb;
}

/* Estilos gerais */
body {
    font-family: 'Roboto', sans-serif;
    color: var(--text-color);
    background-color: #f5f7fa;
    line-height: 1.6;
}

.card {
    border: none!important;
    border-radius: 12px!important;
    box-shadow: var(--card-shadow)!important;
    transition: var(--transition)!important;
    margin-bottom: 20px!important;
    overflow: hidden!important;
}


/* Estilos para as abas */
.nav-tabs {
    border-bottom: none;
    margin-bottom: 20px;
}

.nav-tabs .nav-link {
    border: none;
    border-radius: 50px;
    padding: 10px 20px;
    margin-right: 10px;
    font-weight: 500;
    color: var(--text-color);
    transition: var(--transition);
}

.nav-tabs .nav-link:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.nav-tabs .nav-link.active {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Estilos para o calendário */
.calendar-container {
    background-color: white;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    padding: 20px;
    margin-bottom: 20px;
}

.fc-theme-standard .fc-toolbar {
    margin-bottom: 1.5rem;
}

.fc-theme-standard .fc-toolbar-title {
    font-size: 1.5rem;
    font-weight: 600;
}

.fc-theme-standard .fc-button {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: none;
    transition: var(--transition);
}

.fc-theme-standard .fc-button:hover {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--primary-color);
}

.fc-theme-standard .fc-button-active {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--primary-color) !important;
}

.fc-theme-standard .fc-daygrid-day {
    transition: var(--transition);
}

.fc-theme-standard .fc-daygrid-day:hover {
    background-color: var(--light-bg);
}

.fc-theme-standard .fc-event {
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 0.8rem;
    border: none;
    transition: var(--transition);
}

.fc-theme-standard .fc-event:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Estilos para os agendamentos */
.agendamento-item {
    border-left: 4px solid transparent;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    transition: var(--transition);
    background-color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.agendamento-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.agendamento-item.pendente {
    border-left-color: #ff9a44;
    background-color: var(--status-pendente-bg);
}

.agendamento-item.confirmado {
    border-left-color: #0ba360;
    background-color: var(--status-pago-bg);
}

.agendamento-item.cancelado {
    border-left-color: #9e9e9e;
    background-color: var(--status-cancelado-bg);
}

.agendamento-item.finalizado {
    border-left-color: #2575fc;
    background-color: var(--status-finalizado-bg);
}

.agendamento-item h5 {
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.agendamento-item p {
    margin-bottom: 5px;
    color: #666;
}

.agendamento-item .badge {
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 50px;
}

.agendamento-item .badge-pendente {
    background-color: #fff8e1;
    color: #ff8f00;
}

.agendamento-item .badge-confirmado {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.agendamento-item .badge-cancelado {
    background-color: #f5f5f5;
    color: #616161;
}

.agendamento-item .badge-finalizado {
    background-color: #e3f2fd;
    color: #1565c0;
}

.agendamento-item .valor {
    font-weight: 700;
    font-size: 1.2rem;
}

.agendamento-item .valor.pendente {
    color: #ff8f00;
}

.agendamento-item .valor.confirmado {
    color: #2e7d32;
}

.agendamento-item .valor.cancelado {
    color: #616161;
    text-decoration: line-through;
}

.agendamento-item .valor.finalizado {
    color: #1565c0;
}

.agendamento-item .actions {
    display: flex;
    gap: 10px;
}

.agendamento-item .btn-sm {
    border-radius: 50px;
    padding: 5px 15px;
    font-weight: 500;
}

/* Estilos para o estado vazio */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #9e9e9e;
}

.empty-state i {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.3;
}

.empty-state h4 {
    font-weight: 500;
    margin-bottom: 10px;
}

.empty-state p {
    max-width: 400px;
    margin: 0 auto;
}

/* Estilos para os botões */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transition: var(--transition);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
}

.btn-outline-primary {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

/* Estilos para o filtro de data */
.date-filter {
    background-color: white;
    border-radius: 12px;
    padding: 15px;
    box-shadow: var(--card-shadow);
    margin-bottom: 20px;
}

/* Estilos para os cards de estatísticas */
.stats-card {
    padding: 20px;
    border-radius: 12px;
    color: white;
    transition: var(--transition);
    height: 100%;
}

.stats-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stats-card h5 {
    font-weight: 500;
    margin-bottom: 10px;
    opacity: 0.9;
}

.stats-card h3 {
    font-weight: 700;
    margin-bottom: 0;
    font-size: 1.8rem;
}

.stats-card .icon {
    font-size: 2.5rem;
    opacity: 0.2;
    position: absolute;
    top: 15px;
    right: 15px;
}

.stats-agendamentos {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
}

.stats-pendentes {
    background: linear-gradient(135deg, #ff9a44 0%, #fc6076 100%);
}

.stats-confirmados {
    background: linear-gradient(135deg, #0ba360 0%, #3cba92 100%);
}

.stats-cancelados {
    background: linear-gradient(135deg, #f43b47 0%, #453a94 100%);
}

/* Responsividade */
@media (max-width: 991.98px) {
    .stats-card {
        margin-bottom: 20px;
    }
}

@media (max-width: 767.98px) {
    .nav-tabs .nav-link {
        padding: 8px 10px;
        font-size: 0.9rem;
    }

    .agendamento-item {
        padding: 12px;
    }

    .agendamento-item h5 {
        font-size: 1rem;
    }

    .agendamento-item .valor {
        font-size: 1.1rem;
    }
}



/* Adicione estes estilos ao bloco <style> existente */

/* Estilos para a lista de agendamentos */
.agendamentos-list {
padding: 10px;
}

.agendamentos-list .agendamento-item {
border-left: 4px solid transparent;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
transition: var(--transition);
background-color: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.agendamentos-list .agendamento-item:hover {
transform: translateX(5px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.agendamentos-list .agendamento-item.pendente {
    border-left-color: #ff9a44;
    background-color: rgba(255, 154, 68, 0.08);
}



/* Adicionar uma leve separação entre seus agendamentos e os demais */
.agendamento-separator {
    margin: 20px 0;
    text-align: center;
    position: relative;
}

.agendamento-separator:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #e0e0e0;
}

.agendamento-separator span {
    background-color: #fff;
    padding: 0 15px;
    position: relative;
    color: #9e9e9e;
    font-size: 0.9rem;
}


/* Adicione estes estilos ao bloco <style> existente */
.agendamentos-list .agendamento-item.confirmado {
    border-left-color: #0ba360;
    background-color: rgba(11, 163, 96, 0.08);
}




.agendamentos-list .agendamento-item.cancelado {
border-left-color: #9e9e9e;
background-color: var(--status-cancelado-bg);
}

.agendamentos-list .agendamento-item.finalizado {
border-left-color: #2575fc;
background-color: var(--status-finalizado-bg);
}

.agendamentos-list .agendamento-item h5 {
font-weight: 600;
margin-bottom: 5px;
font-size: 1.1rem;
}

.agendamentos-list .agendamento-item p {
margin-bottom: 5px;
color: #666;
}

.agendamentos-list .badge {
font-weight: 500;
padding: 5px 10px;
border-radius: 50px;
}

.agendamentos-list .badge-pendente {
background-color: #fff8e1;
color: #ff8f00;
}

.agendamentos-list .badge-confirmado {
background-color: #e8f5e9;
color: #2e7d32;
}

.agendamentos-list .badge-cancelado {
background-color: #f5f5f5;
color: #616161;
}

.agendamentos-list .badge-finalizado {
background-color: #e3f2fd;
color: #1565c0;
}

.agendamentos-list .valor {
font-weight: 700;
font-size: 1.2rem;
}

.agendamentos-list .valor.pendente {
color: #ff8f00;
}

.agendamentos-list .valor.confirmado {
color: #2e7d32;
}

.agendamentos-list .valor.cancelado {
color: #616161;
text-decoration: line-through;
}

.agendamentos-list .valor.finalizado {
color: #1565c0;
}

.agendamentos-list .actions {
display: flex;
gap: 10px;
}

.agendamentos-list .btn-sm {
border-radius: 50px;
padding: 5px 15px;
font-weight: 500;
}

/* Estado vazio para listas de agendamentos */
.agendamentos-list .empty-state {
text-align: center;
padding: 30px 20px;
color: #9e9e9e;
}

.agendamentos-list .empty-state i {
font-size: 3rem;
margin-bottom: 15px;
opacity: 0.3;
}

.agendamentos-list .empty-state h4 {
font-weight: 500;
margin-bottom: 10px;
font-size: 1.1rem;
}

.agendamentos-list .empty-state p {
max-width: 400px;
margin: 0 auto;
font-size: 0.9rem;
}


/* Adicione estas animações ao bloco <style> */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

.agendamentos-list .agendamento-item {
animation: fadeIn 0.3s ease-out forwards;
opacity: 0;
}

.agendamentos-list .agendamento-item:nth-child(1) { animation-delay: 0.05s; }
.agendamentos-list .agendamento-item:nth-child(2) { animation-delay: 0.1s; }
.agendamentos-list .agendamento-item:nth-child(3) { animation-delay: 0.15s; }
.agendamentos-list .agendamento-item:nth-child(4) { animation-delay: 0.2s; }
.agendamentos-list .agendamento-item:nth-child(5) { animation-delay: 0.25s; }
.agendamentos-list .agendamento-item:nth-child(n+6) { animation-delay: 0.3s; }


/* Adicione este CSS ao bloco <style> da sua página */

/* Melhorar alinhamento do valor e botão de ações */
.agendamentos-list .agendamento-item .valor {
    margin-bottom: 10px;  /* Espaçamento consistente acima do botão */
    display: inline-block;
}

.agendamentos-list .agendamento-item .actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;  /* Garantir que ocupe a largura total */
}

/* Garantir que o botão de cancelar tenha largura consistente */
.agendamentos-list .agendamento-item .excluir-btn {
    min-width: 100px;  /* Largura mínima para consistência */
}

/* Para dispositivos móveis, centralizar o botão quando o layout ficar empilhado */
@media (max-width: 767.98px) {
    .agendamentos-list .agendamento-item .actions {
        justify-content: center;
        margin-top: 10px;
    }
    
    .agendamentos-list .agendamento-item .valor {
        text-align: center;
        display: block;
        margin-bottom: 10px;
    }
}