/* ==========================================================
   1. ESTILIZAÇÃO DO CARTÃO DO SERVIÇO (Página Principal)
   ========================================================== */
.vap-servicesearch-container,
div[class*="vap-service-"],
.vap-services-list-wrapper {
    background-color: #f5f6fa !important;
    border-radius: 20px !important;
    padding: 30px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.04) !important;
    border: none !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

/* ==========================================================
   2. ESTRUTURA DO CALENDÁRIO LADO A LADO (Página do Serviço)
   ========================================================== */
/* Força o contentor do calendário e slots a ficar em 2 colunas */
.vap-booking-step-container,
.vap-servicesearch-view,
.vap-calendar-slots-flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 30px !important;
    background-color: #f5f6fa !important;
    border-radius: 20px !important;
    padding: 30px !important;
}

/* Coluna da Esquerda: Calendário */
.vap-calendar-wrapper,
.ui-datepicker-inline,
.vap-datepicker-container {
    flex: 1 !important;
    border-right: 1px solid #dcdfe6 !important;
    padding-right: 25px !important;
    background: transparent !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* Coluna da Direita: Horários */
.vap-slots-wrapper,
.vap-timeline-wrapper,
.vap-times-container {
    flex: 1 !important;
    padding-left: 10px !important;
}

/* ==========================================================
   3. CORES E ELEMENTOS VISUAIS (Verde Lima)
   ========================================================== */
/* Dia Selecionado no Calendário (Círculo Verde) */
.ui-datepicker-calendar .ui-state-active,
.ui-datepicker-calendar .ui-state-highlight,
.vap-day-element.active {
    background-color: #8CFA3B !important;
    color: #000000 !important;
    font-weight: bold !important;
    border-radius: 50% !important;
    border: none !important;
}

/* Grelha de Horários (3 por linha) */
.vap-slots-grid,
.vap-timeline-slots {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
}

.vap-slot-btn,
.vap-timeline-block {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    color: #000000 !important;
    padding: 10px 5px !important;
    text-align: center !important;
}

/* Botão Confirm Selection */
.vap-btn-confirm,
.vap-submit-btn,
.vap-btn-primary {
    background-color: #8CFA3B !important;
    color: #000000 !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    border: none !important;
    border-radius: 8px !important;
    width: 100% !important;
    padding: 14px !important;
    margin-top: 15px !important;
}