/**
 * REGRAS DE IDENTIDADE VISUAL - RAYSSA CONSULTORIA
 * Define as cores institucionais e correções de contraste para os slots de horário.
 */

/* Container principal para evitar conflitos com temas do WordPress */
.agendador-wrapper {
    --color-peach-base: #E8B093;
    --color-peach-hover: #a5705a;
    --color-text-dark: #333333;
    --color-text-light: #ffffff;
}

/* Estado padrão dos botões de horário (slots) */
.agendador-wrapper .agd-horario-btn {
    background-color: var(--color-text-light) !important;
    color: var(--color-text-dark) !important;
    border: 2px solid var(--color-peach-base) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease-in-out !important;
}

/* Efeito de hover nos slots de horário */
.agendador-wrapper .agd-horario-btn:hover {
    background-color: var(--color-peach-hover) !important;
    color: var(--color-text-light) !important;
    border-color: var(--color-peach-hover) !important;
}

/* Estado selecionado do horário */
.agendador-wrapper .agd-horario-btn.selected {
    background-color: var(--color-peach-base) !important;
    color: var(--color-text-light) !important;
    border-color: var(--color-peach-base) !important;
}

/* Botões de navegação e submissão do formulário */
.agendador-wrapper .btn-rayssa-primary {
    background-color: var(--color-peach-base) !important;
    color: var(--color-text-light) !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    transition: background-color 0.3s ease !important;
}

.agendador-wrapper .btn-rayssa-primary:hover {
    background-color: var(--color-peach-hover) !important;
}
/**
 * Definições de estados para os slots de agendamento.
 * Implementa as cores institucionais e feedback visual de seleção.
 */

/* Estado padrão do slot de horário */
.agendador-wrapper .agd-horario-btn {
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 2px solid #E8B093 !important; /* Cor base pêssego */
    transition: all 0.2s ease-in-out !important;
}

/* Efeito de hover - Pêssego escurecido para contraste */
.agendador-wrapper .agd-horario-btn:hover {
    background-color: #a5705a !important;
    color: #ffffff !important;
    border-color: #a5705a !important;
}

/* Estado SELECIONADO - Aplicado via JavaScript no evento de clique */
.agendador-wrapper .agd-horario-btn.selected {
    background-color: #E8B093 !important; /* Destaque com a cor principal */
    color: #ffffff !important;
    border-color: #a5705a !important;
    box-shadow: 0 0 8px rgba(232, 176, 147, 0.5) !important;
}