/* =========================================================
   Amelia — apenas ajustes visuais para o calendario combinar
   com o tema escuro. Carregado so nas paginas com o shortcode.

   Obs.: o Amelia tambem tem cores proprias em
   Amelia > Configuracoes > Personalizacao. Ajuste la primeiro;
   este arquivo cuida do que sobrar.
   ========================================================= */

.secao--agendamento { min-height: 60vh; }

.agendamento {
	--amelia-ouro: var(--cor-ouro);
	max-width: 1000px;
	margin-inline: auto;
}

/* Container geral */
.agendamento .amelia-app-booking,
.agendamento #amelia-container,
.agendamento .amelia-v2-booking {
	font-family: var(--fonte-corpo) !important;
	color: var(--cor-texto);
}

/* Caixas e cartoes */
.agendamento .am-fs__wrapper,
.agendamento .el-card,
.agendamento .am-select-service,
.agendamento .amelia-app-booking .el-card__body {
	background: var(--cor-cartao) !important;
	border: 1px solid var(--cor-linha) !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	color: var(--cor-texto) !important;
}

/* Titulos */
.agendamento h1, .agendamento h2, .agendamento h3, .agendamento h4,
.agendamento .am-fs__service-title,
.agendamento .am-fs__title {
	font-family: var(--fonte-titulo) !important;
	color: var(--cor-ouro-claro) !important;
}

/* Campos */
.agendamento input,
.agendamento textarea,
.agendamento .el-input__inner,
.agendamento .el-textarea__inner {
	background: rgba(255, 255, 255, .04) !important;
	border: 1px solid var(--cor-linha) !important;
	color: var(--cor-texto) !important;
	border-radius: 4px !important;
}
.agendamento input::placeholder,
.agendamento .el-input__inner::placeholder { color: #7B7E8C !important; }

.agendamento .el-input__inner:focus,
.agendamento .el-textarea__inner:focus { border-color: var(--cor-linha-forte) !important; }

/* Botoes */
.agendamento .el-button--primary,
.agendamento .am-button-primary,
.agendamento .am-fs__booking-cta button {
	background: var(--cor-ouro) !important;
	border-color: var(--cor-ouro) !important;
	color: #08090F !important;
	font-weight: 500 !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-radius: 4px !important;
}
.agendamento .el-button--primary:hover,
.agendamento .am-button-primary:hover {
	background: var(--cor-ouro-claro) !important;
	border-color: var(--cor-ouro-claro) !important;
}

.agendamento .el-button--default {
	background: transparent !important;
	border-color: var(--cor-ouro-fundo) !important;
	color: var(--cor-ouro-claro) !important;
}

/* Calendario */
.agendamento .el-picker-panel,
.agendamento .el-date-picker,
.agendamento .vc-container {
	background: var(--cor-fundo-alt) !important;
	border-color: var(--cor-linha) !important;
	color: var(--cor-texto) !important;
}
.agendamento .vc-day-content:hover { background: rgba(227, 185, 107, .16) !important; }
.agendamento .vc-highlight,
.agendamento .el-date-table td.current:not(.disabled) span {
	background: var(--cor-ouro) !important;
	color: #08090F !important;
}
.agendamento .vc-day-content.is-disabled { color: #565968 !important; }

/* Horarios disponiveis */
.agendamento .am-fs__time-slot,
.agendamento .am-select-time__slot {
	background: rgba(255, 255, 255, .04) !important;
	border: 1px solid var(--cor-linha) !important;
	color: var(--cor-texto) !important;
}
.agendamento .am-fs__time-slot.selected,
.agendamento .am-select-time__slot.selected {
	background: var(--cor-ouro) !important;
	color: #08090F !important;
	border-color: var(--cor-ouro) !important;
}

/* Passos */
.agendamento .el-step__title { color: var(--cor-texto-suave) !important; }
.agendamento .el-step__title.is-process,
.agendamento .el-step__title.is-finish { color: var(--cor-ouro) !important; }
.agendamento .el-step__head.is-process,
.agendamento .el-step__head.is-finish { color: var(--cor-ouro) !important; border-color: var(--cor-ouro) !important; }

/* Textos secundarios */
.agendamento .am-fs__service-duration,
.agendamento .el-form-item__label { color: var(--cor-texto-suave) !important; }