/* Oya Addons — tombol floating WhatsApp & kembali ke atas. */

:root {
	--oya-addons-fab-size: 56px;
	--oya-addons-fab-gap: 12px;
	--oya-addons-fab-offset: 24px;
}

.oya-addons-fab {
	position: fixed;
	right: var(--oya-addons-fab-offset);
	z-index: 9990;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--oya-addons-fab-size);
	height: var(--oya-addons-fab-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.25s ease, visibility 0.25s ease;
}

.oya-addons-fab__icon {
	display: block;
	width: 26px;
	height: 26px;
	fill: currentColor;
}

/* WhatsApp — kanan bawah. */
.oya-addons-fab--wa {
	bottom: var(--oya-addons-fab-offset);
	background: #25d366;
}

.oya-addons-fab--wa:hover,
.oya-addons-fab--wa:focus-visible {
	background: #1eb457;
	transform: scale(1.06);
}

/* Back to top — tepat di atas WhatsApp. */
.oya-addons-fab--top {
	bottom: calc(var(--oya-addons-fab-offset) + var(--oya-addons-fab-size) + var(--oya-addons-fab-gap));
	background: #0a3f3b;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
}

.oya-addons-fab--top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Tanpa tombol WhatsApp, turun ke dasar. */
.oya-addons-fab--top.oya-addons-fab--solo {
	bottom: var(--oya-addons-fab-offset);
}

.oya-addons-fab--top:hover,
.oya-addons-fab--top:focus-visible {
	background: #0f5c57;
	transform: scale(1.06);
}

.oya-addons-fab:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

@media (max-width: 600px) {
	:root {
		--oya-addons-fab-size: 52px;
		--oya-addons-fab-gap: 10px;
		--oya-addons-fab-offset: 16px;
	}

	.oya-addons-fab__icon {
		width: 24px;
		height: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.oya-addons-fab {
		transition: opacity 0.01s linear, visibility 0.01s linear;
	}

	.oya-addons-fab:hover,
	.oya-addons-fab:focus-visible {
		transform: none;
	}
}

@media print {
	.oya-addons-fab {
		display: none;
	}
}

/* Kartu tantangan verifikasi di wp-login.php. */
.oya-addons-challenge {
	--oya-challenge-brand: #0a3f3b;
	--oya-challenge-brand-ring: rgba(10, 63, 59, 0.28);
	--oya-challenge-bg: #f6f8f8;
	--oya-challenge-border: #dfe5e5;
	--oya-challenge-text: #1f2a2a;
	--oya-challenge-muted: #5b6b6b;
	--oya-challenge-error: #c62828;
	--oya-challenge-ok: #1a7f4b;

	box-sizing: border-box;
	width: 100%;
	margin: 0 0 20px;
	padding: 18px 18px 16px;
	border: 1px solid var(--oya-challenge-border);
	border-radius: 14px;
	background: var(--oya-challenge-bg);
	color: var(--oya-challenge-text);
	box-shadow: 0 1px 2px rgba(16, 24, 24, 0.04);
}

.oya-addons-challenge *,
.oya-addons-challenge *::before,
.oya-addons-challenge *::after {
	box-sizing: border-box;
}

.oya-addons-challenge__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}

.oya-addons-challenge__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	color: var(--oya-challenge-brand);
	background: rgba(10, 63, 59, 0.09);
}

.oya-addons-challenge__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--oya-challenge-muted);
}

.oya-addons-challenge__refresh {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--oya-challenge-border);
	border-radius: 9px;
	background: transparent;
	color: var(--oya-challenge-muted);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.oya-addons-challenge__refresh:hover {
	color: var(--oya-challenge-brand);
	border-color: var(--oya-challenge-brand);
	background: rgba(10, 63, 59, 0.06);
}

.oya-addons-challenge__refresh:focus-visible {
	outline: 2px solid var(--oya-challenge-brand);
	outline-offset: 2px;
}

.oya-addons-challenge__figure {
	display: flex;
	justify-content: center;
	margin: 0 0 14px;
	padding: 8px 10px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid var(--oya-challenge-border);
	color: var(--oya-challenge-brand);
}

.oya-addons-challenge__code {
	display: block;
	width: 100%;
	max-width: 380px;
	height: auto;
}

.oya-addons-challenge__noise {
	opacity: 0.35;
}

.oya-addons-challenge__input {
	display: block;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 12px;
	border: 2px solid var(--oya-challenge-border);
	border-radius: 11px;
	background: #fff;
	color: var(--oya-challenge-text);
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 24px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.42em;
	text-align: center;
	text-transform: uppercase;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.oya-addons-challenge__input:focus,
.oya-addons-challenge__input:focus-visible {
	border-color: var(--oya-challenge-brand);
	box-shadow: 0 0 0 4px var(--oya-challenge-brand-ring);
	outline: none;
}

.oya-addons-challenge__help {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--oya-challenge-muted);
}

.oya-addons-challenge__error {
	margin: 8px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--oya-challenge-error);
}

.oya-addons-challenge__error[hidden] {
	display: none;
}

/* State error. */
.oya-addons-challenge.is-error {
	border-color: var(--oya-challenge-error);
	animation: oya-addons-shake 0.32s ease-in-out 1;
}

.oya-addons-challenge.is-error .oya-addons-challenge__input {
	border-color: var(--oya-challenge-error);
}

.oya-addons-challenge.is-error .oya-addons-challenge__input:focus,
.oya-addons-challenge.is-error .oya-addons-challenge__input:focus-visible {
	box-shadow: 0 0 0 4px rgba(198, 40, 40, 0.22);
}

/* State sukses (dipakai bila server menandai lolos). */
.oya-addons-challenge.is-ok {
	border-color: var(--oya-challenge-ok);
}

.oya-addons-challenge.is-ok .oya-addons-challenge__input {
	border-color: var(--oya-challenge-ok);
}

@keyframes oya-addons-shake {
	0%,
	100% {
		transform: translateX(0);
	}
	20% {
		transform: translateX(-5px);
	}
	40% {
		transform: translateX(4px);
	}
	60% {
		transform: translateX(-3px);
	}
	80% {
		transform: translateX(2px);
	}
}

/* Jaga pesan error bawaan WordPress tetap terbaca. */
#login_error {
	border-left-color: #c62828;
}

@media (max-width: 480px) {
	.oya-addons-challenge {
		padding: 16px 14px 14px;
		border-radius: 12px;
	}

	.oya-addons-challenge__input {
		height: 50px;
		font-size: 22px;
		letter-spacing: 0.32em;
	}

	.oya-addons-challenge__figure {
		padding: 6px;
	}
}

@media (prefers-color-scheme: dark) {
	.oya-addons-challenge {
		--oya-challenge-brand: #7fd3c8;
		--oya-challenge-brand-ring: rgba(127, 211, 200, 0.3);
		--oya-challenge-bg: #1c2323;
		--oya-challenge-border: #333f3f;
		--oya-challenge-text: #eaf1f0;
		--oya-challenge-muted: #a4b3b2;
		--oya-challenge-error: #ff8a80;
		--oya-challenge-ok: #6ee7a8;

		box-shadow: none;
	}

	.oya-addons-challenge__figure,
	.oya-addons-challenge__input {
		background: #131919;
	}

	.oya-addons-challenge__icon {
		background: rgba(127, 211, 200, 0.14);
	}

	.oya-addons-challenge__refresh:hover {
		background: rgba(127, 211, 200, 0.12);
	}
}

@media (prefers-reduced-motion: reduce) {
	.oya-addons-challenge,
	.oya-addons-challenge.is-error {
		animation: none;
	}

	.oya-addons-challenge__refresh,
	.oya-addons-challenge__input {
		transition: none;
	}
}