#pV {
	.coin3d { transform: scale(.7) }
	section {max-width: 568px;}
	.coin-details .coin {
		position: fixed; z-index: 8;
		display: flex; align-items: center;
		top: 20vh; right: 20vh;
		width: 60vh; height: 60vh;
		margin: 0 auto;
		background: url('/assets/img/hexagon4.svg') 50% 50% no-repeat;
	}

	.getCoin {
		border-radius: 12px;
		display: flex;
		align-items: center;
		max-width: 420px;
		width: 100%;
		position: relative;
		color: #90CAF9;

		margin-bottom: 20px;
		.icon {
			position: absolute;
			left: 0;
			width: 64px;
		}

		.icon-close {
			left: auto; right: 0;
			opacity: .5!important;
		}
		input {
			padding-left: 64px;
			padding-right: 64px;
			font-weight: 600;
			height: 80px;
			text-transform: uppercase;
			letter-spacing: 2px;
			color: white;
			min-height: 64px;
			height: 64px;

			border-radius: 20px;
			background: transparent;
			border: 0;
			box-shadow: inset 0 0 0 1px #90caf9;

			&::placeholder { color: white; text-transform: none }
		}
	}

	.btn-qr-scanner {
		display: none;
		align-items: center;
		gap: 8px;
		padding: 12px 24px;
		border: 2px solid #90CAF9;
		border-radius: 12px;
		background: transparent;
		color: #90CAF9;
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;
		margin: 16px auto;

		.icon {
			width: 24px;
			height: 24px;
		}

		&:hover {
			background: rgba(144, 202, 249, 0.1);
			transform: scale(1.05);
		}
	}

	.qr-scanner-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.95);
		z-index: 9999;
		display: none;
		align-items: center;
		justify-content: center;
		padding: 20px;
	}

	.qr-scanner-container {
		width: 100%;
		max-width: 500px;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	.qr-scanner-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: white;

		h3 {
			margin: 0;
			font-size: 20px;
		}

		.btn-close {
			background: none;
			border: none;
			color: white;
			font-size: 32px;
			cursor: pointer;
			padding: 0;
			width: 32px;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.qr-scanner-video-wrapper {
		position: relative;
		width: 100%;
		aspect-ratio: 1;
		background: black;
		border-radius: 12px;
		overflow: hidden;

		video {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		&::before,
		&::after {
			content: '';
			position: absolute;
			width: 20px;
			height: 20px;
			border: 3px solid white;
			transition: border-color 0.3s ease;
			z-index: 10;
		}

		&::before {
			bottom: calc(50% - 125px - 3px);
			left: calc(50% - 125px - 3px);
			border-top: none;
			border-right: none;
		}

		&::after {
			bottom: calc(50% - 125px - 3px);
			right: calc(50% - 125px - 3px);
			border-top: none;
			border-left: none;
		}
	}

	.qr-scanner-frame {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 250px;
		height: 250px;
		border: 3px solid rgba(255, 255, 255, 0.5);
		border-radius: 12px;
		transition: border-color 0.3s ease;

		&::before,
		&::after {
			content: '';
			position: absolute;
			width: 20px;
			height: 20px;
			border: 3px solid white;
			transition: border-color 0.3s ease;
		}

		&::before {
			top: -3px;
			left: -3px;
			border-right: none;
			border-bottom: none;
		}

		&::after {
			top: -3px;
			right: -3px;
			border-left: none;
			border-bottom: none;
		}

		&.detected {
			border-color: #4CAF50;
			box-shadow: 0 0 20px rgba(76, 175, 80, 0.5);

			&::before,
			&::after {
				border-color: #4CAF50;
			}

			& ~ .qr-scanner-video-wrapper::before,
			& ~ .qr-scanner-video-wrapper::after {
				border-color: #4CAF50;
			}
		}
	}

	.qr-scanner-video-wrapper:has(.qr-scanner-frame.detected) {
		&::before,
		&::after {
			border-color: #4CAF50;
		}
	}

	.qr-scanner-hint {
		text-align: center;
		color: rgba(255, 255, 255, 0.7);
		margin: 0;
		font-size: 14px;
	}

	@media (max-width: 1080px) {
		.coin-details .coin {
			position: relative;
			top: auto;
			right: auto;
			margin-bottom: 32px;
		}
		section {
			max-width: 100%;
		}

		.btn-qr-scanner.mobile-only {
			display: flex;
		}
	}
}