/* Tz Tech - Agendamentos — estilos do frontend (modal + página de consulta) */

:root {
	/* Marca — Amber/Verde/Vermelho/Dark + Montserrat (confirmado com base no TZ Tech Suite) */
	--tza-pinho: #214A3D;
	--tza-pinho-2: #2D6A4F;
	--tza-latao: #DF8200;
	--tza-latao-claro: #F0A233;
	--tza-latao-escuro: #C47200;
	--tza-texto: #1A1A1A;
	--tza-apagado: #555555;
	--tza-bege: #F5F5F5;
	--tza-bege-2: #E5E5E5;
	--tza-cartao: #FFFFFF;
	--tza-tinta: #1A1A1A;
	--tza-bege-apagado: #CCCCCC;
	--tza-erro: #A70000;
	--tza-font-display: 'Montserrat', sans-serif;
	--tza-font-body: 'Montserrat', sans-serif;

	/* Botão (público) — sobrescrito dinamicamente via wp_add_inline_style com os valores
	   definidos na tela "Botão" do admin. Os valores abaixo são apenas o fallback padrão. */
	--tza-botao-fundo: var( --tza-latao );
	--tza-botao-texto: #fff;
	--tza-botao-hover: var( --tza-latao-escuro );
	--tza-botao-borda-cor: transparent;
	--tza-botao-borda-largura: 0px;
	--tza-botao-raio-tl: 4px;
	--tza-botao-raio-tr: 4px;
	--tza-botao-raio-br: 4px;
	--tza-botao-raio-bl: 4px;
	--tza-botao-padding-top: 14px;
	--tza-botao-padding-right: 30px;
	--tza-botao-padding-bottom: 14px;
	--tza-botao-padding-left: 30px;

	--tza-botao-icone-fundo: var( --tza-latao );
	--tza-botao-icone-cor: #fff;
	--tza-botao-icone-hover: var( --tza-latao-escuro );
	--tza-botao-icone-borda-cor: transparent;
	--tza-botao-icone-borda-largura: 0px;
	--tza-botao-icone-raio-tl: 12px;
	--tza-botao-icone-raio-tr: 12px;
	--tza-botao-icone-raio-br: 12px;
	--tza-botao-icone-raio-bl: 12px;
	--tza-botao-icone-padding-top: 13px;
	--tza-botao-icone-padding-right: 13px;
	--tza-botao-icone-padding-bottom: 13px;
	--tza-botao-icone-padding-left: 13px;
	--tza-botao-icone-tamanho: 22px;
}

.tz-agendamentos-wrapper,
.agendamento-historico-wrapper {
	font-family: var( --tza-font-body );
	color: var( --tza-texto );
}

.tz-agendamentos-wrapper {
	display: inline-block;
}

/* Honeypot anti-bot: fora da tela pra usuários reais, mas continua no DOM/tab-order
   normal pro bot "ver" e preencher. Não usa display:none (alguns bots ignoram). */
.agendamento-campo-iscas {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

button.agendamento-botao-abrir {
	all: unset;
	box-sizing: border-box;
	display: inline-block;
	padding: var( --tza-botao-padding-top ) var( --tza-botao-padding-right ) var( --tza-botao-padding-bottom ) var( --tza-botao-padding-left );
	background: var( --tza-botao-fundo ) !important;
	color: var( --tza-botao-texto ) !important;
	border-radius: var( --tza-botao-raio-tl ) var( --tza-botao-raio-tr ) var( --tza-botao-raio-br ) var( --tza-botao-raio-bl );
	border: var( --tza-botao-borda-largura ) solid var( --tza-botao-borda-cor );
	font-family: var( --tza-font-body );
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	transition: background 0.2s ease, transform 0.2s ease;
}

button.agendamento-botao-abrir:hover {
	background: var( --tza-botao-hover ) !important;
}

/* Efeito de crescimento (hover), opcional, configurado na tela "Botão" do admin. */
button.agendamento-botao-abrir--grow:hover {
	transform: scale( 1.05 );
}

/* Variante compacta: [agendar_reuniao estilo="icone"] — só o ícone, pra heros mobile. */
button.agendamento-botao-abrir--icone {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	padding: var( --tza-botao-icone-padding-top ) var( --tza-botao-icone-padding-right ) var( --tza-botao-icone-padding-bottom ) var( --tza-botao-icone-padding-left ) !important;
	background: var( --tza-botao-icone-fundo ) !important;
	border-radius: var( --tza-botao-icone-raio-tl ) var( --tza-botao-icone-raio-tr ) var( --tza-botao-icone-raio-br ) var( --tza-botao-icone-raio-bl );
	border: var( --tza-botao-icone-borda-largura ) solid var( --tza-botao-icone-borda-cor );
	flex-shrink: 0;
}

button.agendamento-botao-abrir--icone:hover {
	background: var( --tza-botao-icone-hover ) !important;
}

button.agendamento-botao-abrir--icone .dashicons {
	width: var( --tza-botao-icone-tamanho );
	height: var( --tza-botao-icone-tamanho );
	font-size: var( --tza-botao-icone-tamanho );
	line-height: 1;
	color: var( --tza-botao-icone-cor ) !important;
}

.agendamento-modal-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: rgba( 11, 26, 22, 0.65 );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 20px;
	box-sizing: border-box;
}

.agendamento-modal-overlay[hidden] {
	display: none;
}

body.agendamento-modal-aberto {
	overflow: hidden;
}

.agendamento-modal {
	background: var( --tza-cartao );
	max-width: 480px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	border-radius: 10px;
	padding: 34px;
	position: relative;
	box-shadow: 0 20px 60px rgba( 11, 26, 22, 0.35 );
	font-family: var( --tza-font-body );
}

.agendamento-modal button.agendamento-modal-fechar,
.agendamento-modal button.agendamento-modal-fechar-sucesso {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
}

.agendamento-modal button.agendamento-modal-fechar {
	position: absolute;
	top: 18px;
	right: 18px;
	font-size: 26px;
	line-height: 1;
	color: var( --tza-apagado );
	padding: 4px 8px;
}

.agendamento-modal button.agendamento-modal-fechar:hover {
	color: var( --tza-texto );
}

.agendamento-modal button.agendamento-modal-fechar-sucesso {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 18px;
	padding: 12px 28px;
	border-radius: 4px;
	border: 1.5px solid var( --tza-pinho ) !important;
	color: var( --tza-pinho ) !important;
	background: transparent !important;
	font-weight: 600;
	font-size: 15px;
	transition: background 0.2s ease, color 0.2s ease;
}

.agendamento-modal button.agendamento-modal-fechar-sucesso:hover {
	background: var( --tza-pinho ) !important;
	color: #fff !important;
}

.agendamento-modal h2 {
	margin-top: 0;
	font-family: var( --tza-font-display );
	font-weight: 600;
	font-size: 24px;
	color: var( --tza-pinho );
}

.agendamento-campo {
	margin-bottom: 16px;
}

.agendamento-campo label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 14px;
	color: var( --tza-texto );
}

.agendamento-campo input[type='text'],
.agendamento-campo input[type='date'],
.agendamento-campo input[type='tel'],
.agendamento-campo input[type='email'],
.agendamento-campo select,
.agendamento-campo textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var( --tza-bege-2 );
	border-radius: 4px;
	font-family: var( --tza-font-body );
	font-size: 15px;
	color: var( --tza-texto );
	background: #fff;
	box-sizing: border-box;
}

.agendamento-campo textarea {
	resize: vertical;
	min-height: 70px;
}

.agendamento-campo input:focus,
.agendamento-campo select:focus,
.agendamento-campo textarea:focus {
	outline: none;
	border-color: var( --tza-latao );
	box-shadow: 0 0 0 2px rgba( 190, 138, 51, 0.25 );
}

.agendamento-lista-horarios {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.agendamento-horarios-vazio {
	color: var( --tza-apagado );
	font-size: 14px;
	margin: 4px 0;
}

button.agendamento-slot {
	all: unset;
	box-sizing: border-box;
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid var( --tza-pinho ) !important;
	background: #fff !important;
	color: var( --tza-pinho ) !important;
	border-radius: 4px;
	font-family: var( --tza-font-body );
	cursor: pointer;
	font-size: 14px;
	text-align: center;
}

button.agendamento-slot:hover {
	background: var( --tza-bege ) !important;
}

button.agendamento-slot.agendamento-slot--selecionado {
	background: var( --tza-botao-fundo ) !important;
	border-color: var( --tza-botao-fundo ) !important;
	color: var( --tza-botao-texto ) !important;
}

.agendamento-mensagem-erro {
	color: var( --tza-erro );
	background: #f8ecec;
	border: 1px solid #e3c6c6;
	border-radius: 4px;
	padding: 10px 12px;
	font-size: 14px;
	margin-bottom: 16px;
}

.agendamento-modal button.agendamento-botao-enviar {
	all: unset;
	box-sizing: border-box;
	display: block;
	width: 100%;
	text-align: center;
	padding: 14px;
	background: var( --tza-botao-fundo ) !important;
	color: var( --tza-botao-texto ) !important;
	border-radius: 4px;
	font-family: var( --tza-font-body );
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease;
}

.agendamento-aviso-privacidade {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 12px 0 0;
	font-size: 12px;
	color: var( --tza-apagado );
	text-align: center;
}

.agendamento-aviso-privacidade .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.agendamento-modal button.agendamento-botao-enviar:hover {
	background: var( --tza-botao-hover ) !important;
}

.agendamento-modal button.agendamento-botao-enviar:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.agendamento-modal-sucesso {
	text-align: center;
	padding: 12px 0;
}

.agendamento-codigo-gerado {
	font-family: var( --tza-font-display );
	font-size: 22px;
	color: var( --tza-latao-escuro );
}

/* Página de consulta [historico_agendamentos] */

.agendamento-historico-wrapper {
	max-width: 420px;
	font-family: var( --tza-font-body );
}

.agendamento-historico-wrapper h3 {
	font-family: var( --tza-font-display );
	color: var( --tza-pinho );
	font-size: 20px;
}

.agendamento-historico-form .agendamento-campo {
	margin-bottom: 16px;
}

button.agendamento-botao-enviar {
	all: unset;
	box-sizing: border-box;
	display: block;
	width: 100%;
	text-align: center;
	padding: 14px;
	background: var( --tza-botao-fundo ) !important;
	color: var( --tza-botao-texto ) !important;
	border-radius: 4px;
	font-family: var( --tza-font-body );
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease;
}

button.agendamento-botao-enviar:hover {
	background: var( --tza-botao-hover ) !important;
}

.agendamento-historico-erro {
	color: var( --tza-erro );
	background: #f8ecec;
	border: 1px solid #e3c6c6;
	border-radius: 4px;
	padding: 10px 12px;
	font-size: 14px;
	margin-bottom: 16px;
}

.agendamento-historico-resultado {
	margin-top: 20px;
	padding: 18px;
	border: 1px solid var( --tza-bege-2 );
	border-radius: 8px;
	background: var( --tza-cartao );
}

.agendamento-historico-resultado p {
	margin: 6px 0;
}

.agendamento-resultado-link a {
	color: var( --tza-latao-escuro );
	font-weight: 600;
}