/**
 * Lua interativa — o bloco é escuro porque é onde a esfera se lê melhor.
 */

/* a classe do plugin é repetida junto de .astral porque o CSS do astral-core
   também casa em .astral e definiria o fundo claro do tema por cima deste */
.astral.astral-lua3d {
	display: grid;
	grid-template-columns: minmax(260px, 420px) 1fr;
	gap: 2rem;
	align-items: center;
	padding: 2.2rem;
	background: radial-gradient(120% 120% at 20% 0%, #241d46 0%, #1b1638 55%, #150f2c 100%);
	border: 1px solid #38306a;
	border-radius: 16px;
	color: #ece9f7;
}

.astral-lua3d__palco {
	position: relative;
	display: grid;
	justify-items: center;
	gap: .7rem;
}

.astral-lua3d__tela {
	width: 100%;
	max-width: 420px;
	height: auto;
	cursor: grab;
	touch-action: none;
	border-radius: 50%;
	filter: drop-shadow(0 0 42px rgba(226, 183, 106, .16));
}

.astral-lua3d__tela.esta-girando { cursor: grabbing; }
.astral-lua3d__tela:focus-visible { outline: 2px solid #e2b76a; outline-offset: 6px; }

.astral-lua3d__reiniciar {
	background: none;
	border: 1px solid rgba(236, 233, 247, .28);
	color: #b3aad4;
	border-radius: 999px;
	padding: .3rem .9rem;
	font: inherit;
	font-size: .84rem;
	cursor: pointer;
}

.astral-lua3d__reiniciar:hover { color: #fff; border-color: #e2b76a; }

.astral-lua3d__rotulo {
	display: block;
	font-size: .74rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #b3aad4;
}

.astral-lua3d__data {
	margin: .25rem 0 .1rem;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
	color: #fff;
	line-height: 1.15;
}

.astral-lua3d__fase {
	margin: 0 0 .3rem;
	font-size: 1.15rem;
	color: #e2b76a;
}

.astral-lua3d__meta {
	margin: 0 0 1.6rem;
	color: #b3aad4;
	font-size: .95rem;
}

/* ---------- régua ---------- */

.astral-lua3d__regua { position: relative; }

.astral-lua3d__range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(90deg, #1b1638, #4a3f86, #e2b76a, #4a3f86, #1b1638);
	outline: none;
	margin: 0;
}

.astral-lua3d__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid #e2b76a;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.astral-lua3d__range::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid #e2b76a;
	cursor: pointer;
}

.astral-lua3d__marcas {
	position: relative;
	height: 14px;
	margin-top: .35rem;
}

.astral-lua3d__marca {
	position: absolute;
	top: 0;
	width: 9px;
	height: 9px;
	margin-left: -4.5px;
	border-radius: 50%;
}

.astral-lua3d__marca--cheia { background: #f3ead4; }
.astral-lua3d__marca--nova { background: transparent; border: 1px solid #6f6699; }

.astral-lua3d__extremos {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	color: #8f87b3;
	font-size: .82rem;
}

.astral-lua3d__hoje {
	background: none;
	border: 1px solid rgba(236, 233, 247, .28);
	color: #ece9f7;
	border-radius: 999px;
	padding: .25rem .95rem;
	font: inherit;
	font-size: .82rem;
	cursor: pointer;
}

.astral-lua3d__hoje:hover { border-color: #e2b76a; color: #fff; }
.astral-lua3d.esta-em-outro-dia .astral-lua3d__hoje { border-color: #e2b76a; color: #e2b76a; }

.astral-lua3d__proximas {
	margin: 1.4rem 0 .4rem;
	color: #ece9f7;
	font-size: .95rem;
}

.astral-lua3d__dica {
	margin: 0;
	color: #8f87b3;
	font-size: .84rem;
}

@media (max-width: 860px) {
	.astral-lua3d {
		grid-template-columns: 1fr;
		gap: 1.6rem;
		padding: 1.5rem;
	}
	.astral-lua3d__tela { max-width: 300px; }
}