/* ==================================================
   CSS CORREÇÃO TOTAL - ID 2
   ================================================== */

/* --- 1. CONTAINER E ESPAÇAMENTO --- */
/* Mantém o respiro do topo/fundo, mas deixa a largura fluida até 1000px */
#cp_appointment_hour_booking_app_2, 
.cp-app-booking-container {
    margin: 50px auto 80px auto !important;
    padding: 20px !important;
    max-width: 1000px !important; /* Mais largo */
    font-family: 'Poppins', sans-serif !important;
    background: #fff;
}

/* --- 2. CALENDÁRIO (Tamanho e Formas) --- */

/* Remove travas de tamanho do calendário para ele crescer */
div.ui-datepicker-inline {
    width: 100% !important; 
    max-width: none !important; /* Remove limite */
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
}

/* Cabeçalho Verde */
.ui-datepicker-header {
    background-color: #62a8a3 !important;
    color: #fff !important;
    border: none !important;
    padding: 15px 0 !important;
    border-radius: 8px 8px 0 0 !important;
}

/* Setas */
.ui-datepicker-prev span, .ui-datepicker-next span {
    filter: invert(1) !important;
    cursor: pointer !important;
}

/* --- AQUI ESTÁ A CORREÇÃO DO "QUADRADO VS REDONDO" --- */
/* Aplica estilo igual para (a) Links e (span) Texto simples */
.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
    display: block !important;
    width: 100% !important; /* Ocupa a célula toda */
    height: 50px !important; /* Altura fixa maior */
    line-height: 50px !important; /* Centraliza texto verticalmente */
    text-align: center !important;
    padding: 0 !important;
    border: none !important;
    background: #f2f2f2 !important; /* Fundo cinza claro padrão para todos */
    color: #333 !important;
    border-radius: 0 !important; /* Todo mundo QUADRADO (ou mude para 50% se quiser redondo) */
    margin: 0 !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
}

/* Dias Indisponíveis (Texto mais claro) */
.ui-datepicker-calendar td.ui-state-disabled span {
    opacity: 0.5 !important;
    background: #fff !important; /* Fundo branco para os vazios */
}

/* Dia Disponível (Hover e Ativo) */
.ui-datepicker-calendar td a:hover,
.ui-datepicker-calendar td a.ui-state-active {
    background-color: #d2e270 !important; /* Verde Limão */
    color: #000 !important;
    font-weight: bold !important;
    cursor: pointer !important;
}

/* Espaçamento entre as células da tabela */
.ui-datepicker-calendar {
    border-collapse: separate !important;
    border-spacing: 4px !important; /* Espacinho entre os dias */
}

/* --- 3. FORÇAR BOTÕES DE HORÁRIO --- */
/* Alta especificidade para garantir que pegue */
#cp_appointment_hour_booking_app_2 .cp_time_slot,
button.cp_time_slot {
    background-color: #fff !important;
    border: 1px solid #62a8a3 !important;
    color: #62a8a3 !important;
    padding: 10px 25px !important;
    margin: 5px !important;
    border-radius: 4px !important; /* Levemente arredondado */
    font-size: 15px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    background-image: none !important; /* Remove gradientes antigos */
}

/* Hover e Selecionado */
#cp_appointment_hour_booking_app_2 .cp_time_slot:hover,
#cp_appointment_hour_booking_app_2 .cp_time_slot.selected {
    background-color: #62a8a3 !important;
    color: #fff !important;
}

/* --- 4. FORÇAR BOTÃO PEGAR INGRESSO --- */
#cp_appointment_hour_booking_app_2 .cp-submit,
input[type="submit"].cp-submit {
    background-color: #62a8a3 !important;
    color: #fff !important;
    padding: 15px 40px !important;
    font-size: 18px !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 50px !important;
    display: block !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 30px auto 0 auto !important;
    cursor: pointer !important;
    background-image: none !important;
}

#cp_appointment_hour_booking_app_2 .cp-submit:hover {
    background-color: #508a86 !important;
}