/**
 * RCM Agenda — v2.91.0, módulo «Adicionar à agenda do telemóvel» (`marcacoes.agenda_telemovel`).
 *
 * Só é carregado com o módulo ligado (RCMAgenda_Public::carregar_assets()), depois de public-booking.css: com o
 * módulo desligado a página não muda nada. Estilos do ecrã final do wizard: o botão em destaque (uma ligação <a>
 * com aspeto de botão primário) que pulsa, e o bloco recolhido «Como adicionar?».
 *
 * Especificidade: a ligação vive dentro do modal, por isso os seletores levam `.rcmagenda-modal a.…` (0,2,1), que
 * bate as regras `a { color }` do tema Hello e do kit do Elementor, venham por que ordem vierem.
 *
 * v2.91.1 — o pulsar passou a ser do próprio botão (pedido do Rui: «precisa de pulsar e mudar de cor»): em ciclo de
 * 1,6 s cresce 4% e volta, e a cor alterna entre a do botão (`--rcmagenda-agenda-cor`) e a mesma cor 25% mais
 * escura (`--rcmagenda-agenda-cor-escura`), por isso o texto branco continua legível nas duas fases. Com o
 * «Wizard público legível» ligado, a segunda cor é o `--wz-destaque-hover` desse módulo (já calculado para manter o
 * contraste com o texto dele). A troca de cor usa color-mix(): num browser sem suporte (iOS anterior ao 16.2) o
 * botão só cresce e encolhe, sem mudar de cor, em vez de ficar sem fundo (ver o @supports abaixo).
 *
 * O anel é um ::after com `background-color: inherit` (a cor do botão em cada momento) por trás do botão; o
 * contentor tem 16px de folga (o anel cresce 10px para lá do botão, que cresce até 4%), por isso nunca cria scroll
 * horizontal no telemóvel (sem `overflow: hidden`, que cortava a sombra do botão num retângulo). Com «reduzir
 * movimento» ligado no telemóvel não há animação nenhuma: o botão continua em destaque pela cor, pelo tamanho e
 * pela sombra.
 */

.rcmagenda-agenda-telemovel {
	margin: 18px auto 0;
	max-width: 420px;
	text-align: center;
}

.rcmagenda-agenda-telemovel-anel {
	padding: 16px;
}

.rcmagenda-modal a.rcmagenda-agenda-telemovel-botao,
.rcmagenda-modal a.rcmagenda-agenda-telemovel-botao:visited {
	--rcmagenda-agenda-cor: var( --rcmagenda-cor-primaria );
	--rcmagenda-agenda-cor-escura: color-mix( in srgb, var( --rcmagenda-agenda-cor ) 75%, #000000 );
	position: relative;
	z-index: 0;
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 16px 20px;
	border-radius: 14px;
	background-color: var( --rcmagenda-agenda-cor );
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	white-space: normal;
	overflow-wrap: break-word;
	box-shadow: 0 6px 18px rgba( 0, 0, 0, 0.3 );
	box-shadow: 0 6px 18px color-mix( in srgb, var( --rcmagenda-agenda-cor ) 40%, transparent );
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	animation: rcmagenda-agenda-botao 1.6s ease-in-out infinite;
}

/* Com color-mix(): o mesmo pulsar, mais a troca de cor (sem suporte fica só o crescer/encolher, acima). */
@supports ( background-color: color-mix( in srgb, red 50%, black ) ) {
	.rcmagenda-modal a.rcmagenda-agenda-telemovel-botao,
	.rcmagenda-modal a.rcmagenda-agenda-telemovel-botao:visited {
		animation-name: rcmagenda-agenda-botao-cor;
	}
}

.rcmagenda-modal a.rcmagenda-agenda-telemovel-botao:hover,
.rcmagenda-modal a.rcmagenda-agenda-telemovel-botao:focus {
	color: #ffffff;
	text-decoration: none;
}

.rcmagenda-modal a.rcmagenda-agenda-telemovel-botao:focus-visible {
	outline: 3px solid #1d1d1d;
	outline-offset: 3px;
}

/* «Wizard público legível» ligado: as cores e o texto do botão primário desse módulo. */
.rcmagenda-modal.rcmagenda-wz-legivel a.rcmagenda-agenda-telemovel-botao,
.rcmagenda-modal.rcmagenda-wz-legivel a.rcmagenda-agenda-telemovel-botao:visited,
.rcmagenda-modal.rcmagenda-wz-legivel a.rcmagenda-agenda-telemovel-botao:hover,
.rcmagenda-modal.rcmagenda-wz-legivel a.rcmagenda-agenda-telemovel-botao:focus {
	--rcmagenda-agenda-cor: var( --wz-destaque );
	--rcmagenda-agenda-cor-escura: var( --wz-destaque-hover );
	background-color: var( --rcmagenda-agenda-cor );
	color: var( --wz-sobre-destaque );
	box-shadow: 0 6px 18px color-mix( in srgb, var( --rcmagenda-agenda-cor ) 40%, transparent );
}

@keyframes rcmagenda-agenda-botao {
	0%,
	100% {
		transform: scale( 1 );
	}

	50% {
		transform: scale( 1.04 );
	}
}

@keyframes rcmagenda-agenda-botao-cor {
	0%,
	100% {
		transform: scale( 1 );
		background-color: var( --rcmagenda-agenda-cor );
	}

	50% {
		transform: scale( 1.04 );
		background-color: var( --rcmagenda-agenda-cor-escura );
	}
}

.rcmagenda-modal a.rcmagenda-agenda-telemovel-botao::after {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: inherit;
	background-color: inherit;
	opacity: 0;
	pointer-events: none;
	animation: rcmagenda-agenda-pulsar 1.6s ease-out infinite;
}

@keyframes rcmagenda-agenda-pulsar {
	0% {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0.55;
	}

	70%,
	100% {
		top: -10px;
		right: -10px;
		bottom: -10px;
		left: -10px;
		border-radius: 22px;
		opacity: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.rcmagenda-modal a.rcmagenda-agenda-telemovel-botao,
	.rcmagenda-modal a.rcmagenda-agenda-telemovel-botao:visited {
		animation: none;
	}

	.rcmagenda-modal a.rcmagenda-agenda-telemovel-botao::after {
		animation: none;
		display: none;
	}
}

/* «Como adicionar?»: recolhido por omissão (<details>), texto à esquerda para ler bem no telemóvel. */
.rcmagenda-agenda-telemovel-ajuda {
	margin: 6px 0 0;
	text-align: left;
	font-size: 14px;
	line-height: 1.5;
}

.rcmagenda-agenda-telemovel-ajuda summary {
	display: block;
	padding: 8px 0;
	text-align: center;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
	list-style: none;
}

.rcmagenda-agenda-telemovel-ajuda summary::-webkit-details-marker {
	display: none;
}

.rcmagenda-agenda-telemovel-ajuda p {
	margin: 0 0 10px;
	overflow-wrap: break-word;
}