/* Lock Modal Styles */
.lock-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #2c1810 0%, #4a2c1a 25%, #3d2317 50%, #2a1a0f 75%, #1a0f08 100%);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 99999;
	transition: opacity 0.5s ease, visibility 0.5s ease;
	overflow: hidden;
}

/* Floating Effects Container */
.floating-effects {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
}

.float-item {
	position: absolute;
	opacity: 0.3;
	filter: drop-shadow(0 0 10px rgba(227, 176, 121, 0.3));
}

/* Flash positions and animations */
.flash-1 { width: 50px; top: 5%; left: 5%; animation: floatUp 6s ease-in-out infinite; }
.flash-2 { width: 40px; top: 60%; right: 8%; animation: floatUp 8s ease-in-out infinite 1s; }
.flash-3 { width: 35px; bottom: 15%; left: 15%; animation: floatUp 7s ease-in-out infinite 2s; }
.flash-4 { width: 45px; top: 30%; right: 15%; animation: floatUp 5s ease-in-out infinite 0.5s; }
.flash-5 { width: 30px; top: 15%; left: 25%; animation: floatUp 9s ease-in-out infinite 0.3s; }
.flash-6 { width: 38px; top: 75%; left: 5%; animation: floatUp 6.5s ease-in-out infinite 1.5s; }
.flash-7 { width: 42px; top: 45%; right: 3%; animation: floatUp 7.5s ease-in-out infinite 2.2s; }
.flash-8 { width: 28px; bottom: 5%; left: 35%; animation: floatUp 5.5s ease-in-out infinite 0.8s; }
.flash-9 { width: 35px; top: 8%; right: 25%; animation: floatUp 8.5s ease-in-out infinite 1.8s; }
.flash-10 { width: 32px; bottom: 30%; right: 5%; animation: floatUp 6.8s ease-in-out infinite 2.5s; }
.flash-11 { width: 48px; top: 85%; left: 20%; animation: floatUp 7.2s ease-in-out infinite 0.6s; }
.flash-12 { width: 36px; top: 40%; left: 2%; animation: floatUp 5.8s ease-in-out infinite 1.2s; }

/* Gem positions and animations */
.gem-1 { width: 45px; top: 20%; right: 5%; animation: floatSpin 7s ease-in-out infinite 0.5s; }
.gem-2 { width: 35px; bottom: 25%; left: 8%; animation: floatSpin 9s ease-in-out infinite 1.5s; }
.gem-3 { width: 40px; top: 50%; left: 3%; animation: floatSpin 6s ease-in-out infinite 2.5s; }
.gem-4 { width: 50px; bottom: 10%; right: 10%; animation: floatSpin 8s ease-in-out infinite; }
.gem-5 { width: 32px; top: 10%; left: 40%; animation: floatSpin 7.5s ease-in-out infinite 0.7s; }
.gem-6 { width: 38px; top: 70%; right: 20%; animation: floatSpin 6.5s ease-in-out infinite 1.8s; }
.gem-7 { width: 28px; bottom: 40%; left: 12%; animation: floatSpin 8.5s ease-in-out infinite 2.3s; }
.gem-8 { width: 42px; top: 25%; left: 8%; animation: floatSpin 5.5s ease-in-out infinite 0.4s; }
.gem-9 { width: 36px; bottom: 8%; left: 45%; animation: floatSpin 7.8s ease-in-out infinite 1.1s; }
.gem-10 { width: 30px; top: 55%; right: 12%; animation: floatSpin 6.2s ease-in-out infinite 2.8s; }
.gem-11 { width: 44px; top: 3%; right: 35%; animation: floatSpin 8.2s ease-in-out infinite 0.9s; }
.gem-12 { width: 34px; bottom: 20%; right: 3%; animation: floatSpin 5.2s ease-in-out infinite 1.6s; }

@keyframes floatUp {
	0%, 100% {
		transform: translateY(0) rotate(0deg);
		opacity: 0.5;
	}
	50% {
		transform: translateY(-30px) rotate(10deg);
		opacity: 0.9;
		filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
	}
}

@keyframes floatSpin {
	0%, 100% {
		transform: translateY(0) rotate(0deg) scale(1);
		opacity: 0.5;
	}
	50% {
		transform: translateY(-25px) rotate(15deg) scale(1.1);
		opacity: 0.9;
		filter: drop-shadow(0 0 25px rgba(227, 176, 121, 0.8));
	}
}

/* Modal Border Effects */
.modal-border-effects {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 10;
}

.border-item {
	position: absolute;
	filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9));
}

/* Corners */
.b-top-left {
	width: 35px;
	top: -15px;
	left: -15px;
	animation: borderPulse 2s ease-in-out infinite;
}

.b-top-right {
	width: 35px;
	top: -15px;
	right: -15px;
	animation: borderFloat 2.2s ease-in-out infinite 0.3s;
}

.b-bottom-left {
	width: 35px;
	bottom: -15px;
	left: -15px;
	animation: borderFloat 2.4s ease-in-out infinite 0.6s;
}

.b-bottom-right {
	width: 35px;
	bottom: -15px;
	right: -15px;
	animation: borderPulse 2.1s ease-in-out infinite 0.4s;
}

/* Left side middle */
.b-left-1 {
	width: 30px;
	top: 35%;
	left: -14px;
	animation: borderPulse 2.3s ease-in-out infinite 0.2s;
}

.b-left-2 {
	width: 30px;
	top: 55%;
	left: -14px;
	animation: borderFloat 2.5s ease-in-out infinite 0.7s;
}

/* Right side middle */
.b-right-1 {
	width: 30px;
	top: 35%;
	right: -14px;
	animation: borderFloat 2.2s ease-in-out infinite 0.5s;
}

.b-right-2 {
	width: 30px;
	top: 55%;
	right: -14px;
	animation: borderPulse 2.4s ease-in-out infinite 0.8s;
}

@keyframes borderPulse {
	0%, 100% {
		transform: scale(1) rotate(0deg);
		filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
	}
	50% {
		transform: scale(1.2) rotate(10deg);
		filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1)) drop-shadow(0 0 30px rgba(227, 176, 121, 0.8));
	}
}

@keyframes borderFloat {
	0%, 100% {
		transform: translateY(0) scale(1);
		filter: drop-shadow(0 0 5px rgba(227, 176, 121, 0.6));
	}
	50% {
		transform: translateY(-8px) scale(1.15);
		filter: drop-shadow(0 0 15px rgba(227, 176, 121, 1)) drop-shadow(0 0 25px rgba(255, 255, 255, 0.7));
	}
}

		.lock-overlay.hidden {
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
		}

.lock-modal {
	background: #E3B079;
	backdrop-filter: blur(20px);
	border-radius: 24px;
	padding: 15px 40px 50px;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
	max-width: 400px;
	width: 90%;
	animation: modalAppear 0.6s ease;
	font-family: 'Source Sans Pro', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	position: relative;
	z-index: 1;
}

		.modal-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border: none !important;
			border-bottom: none !important;
			padding: 10px 0;
			margin: -5px -10px 0;
		}

		.modal-header img {
			width: auto;
			object-fit: contain;
			animation: lightWave 2s ease-in-out infinite;
		}

		.header-icon-left {
			height: 90px;
			max-width: 150px;
			animation-delay: 0s;
		}

		.header-logo-right {
			height: 110px;
			max-width: 280px;
			animation-delay: 0.5s;
		}

		@keyframes lightWave {
			0%, 100% {
				filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
				transform: scale(1);
			}
			50% {
				filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 40px rgba(227, 176, 121, 0.6));
				transform: scale(1.03);
			}
		}

		@keyframes modalAppear {
			from {
				opacity: 0;
				transform: scale(0.9) translateY(20px);
			}
			to {
				opacity: 1;
				transform: scale(1) translateY(0);
			}
		}

		.lock-icon {
			width: 80px;
			height: 80px;
			margin: 0 auto 30px;
			background: linear-gradient(135deg, #E3B079 0%, #d4956a 100%);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 10px 30px rgba(227, 176, 121, 0.4);
		}

		.lock-icon svg {
			width: 40px;
			height: 40px;
			fill: white;
		}

		.lock-modal h2 {
			color: #2c1810;
			font-size: 22px;
			margin-bottom: 8px;
			margin-top: 10px;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 1px;
			position: relative;
			display: inline-block;
			white-space: nowrap;
			background: linear-gradient(135deg, #2c1810 0%, #5a3825 50%, #2c1810 100%);
			background-size: 200% auto;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			animation: shimmer 3s ease-in-out infinite;
		}

		.lock-modal h2::after {
			content: '';
			position: absolute;
			bottom: -5px;
			left: 50%;
			transform: translateX(-50%);
			width: 60%;
			height: 3px;
			background: linear-gradient(90deg, transparent, #2c1810, transparent);
			border-radius: 2px;
			animation: underlineGlow 2s ease-in-out infinite;
		}

		@keyframes shimmer {
			0%, 100% {
				background-position: 0% center;
			}
			50% {
				background-position: 200% center;
			}
		}

		@keyframes underlineGlow {
			0%, 100% {
				opacity: 0.5;
				width: 40%;
			}
			50% {
				opacity: 1;
				width: 70%;
			}
		}

		.lock-modal h4 {
			color: #2c1810;
			font-size: 14px;
			margin-bottom: 20px;
			font-weight: 600;
			background: rgba(255, 255, 255, 0.3);
			padding: 5px 20px;
			border-radius: 20px;
			display: inline-block;
			border: 1px solid rgba(255, 255, 255, 0.4);
		}

		.lock-modal p {
			color: #4a2c1a;
			margin-bottom: 30px;
			font-size: 14px;
		}

		.key-input-container {
			position: relative;
			margin-bottom: 20px;
		}

		.input-icon {
			position: absolute;
			left: 15px;
			top: 50%;
			transform: translateY(-50%);
			width: 24px;
			height: 24px;
			z-index: 1;
			filter: drop-shadow(0 0 3px rgba(227, 176, 121, 0.5));
		}

		.key-input {
			width: 100%;
			padding: 16px 20px 16px 50px;
			font-size: 16px;
			border: 2px solid #c9975c;
			border-radius: 12px;
			background: rgba(255, 255, 255, 0.9);
			color: #2c1810;
			outline: none;
			transition: all 0.3s ease;
			letter-spacing: 2px;
			box-sizing: border-box;
		}

		.key-input::placeholder {
			color: #a08060;
			letter-spacing: normal;
		}

		.key-input:focus {
			border-color: #4a2c1a;
			box-shadow: 0 0 15px rgba(44, 24, 16, 0.3);
			background: #ffffff;
		}

		.key-input.error {
			border-color: #8b0000;
			animation: shake 0.5s ease;
		}

		@keyframes shake {
			0%, 100% { transform: translateX(0); }
			20%, 60% { transform: translateX(-10px); }
			40%, 80% { transform: translateX(10px); }
		}

		.unlock-btn {
			width: 100%;
			padding: 16px;
			font-size: 16px;
			font-weight: 600;
			border: none;
			border-radius: 12px;
			background: linear-gradient(135deg, #3d2317 0%, #2c1810 100%);
			color: #E3B079;
			cursor: pointer;
			transition: all 0.3s ease;
			text-transform: uppercase;
			letter-spacing: 1px;
		}

		.unlock-btn:hover {
			transform: translateY(-2px);
			box-shadow: 0 8px 25px rgba(44, 24, 16, 0.5);
			background: linear-gradient(135deg, #4a2c1a 0%, #3d2317 100%);
		}

		.unlock-btn:active {
			transform: translateY(0);
		}

		.error-message {
			color: #8b0000;
			font-size: 14px;
			font-weight: 600;
			margin-top: 15px;
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		.error-message.show {
			opacity: 1;
		}

		.lock-icon.unlocked {
			background: linear-gradient(135deg, #2ed573 0%, #17a558 100%);
			box-shadow: 0 10px 30px rgba(46, 213, 115, 0.4);
		}

		/* Divider */
		.divider {
			display: flex;
			align-items: center;
			margin: 10px 0 20px;
			color: #4a2c1a;
			font-size: 13px;
			font-weight: 500;
		}

		.divider::before,
		.divider::after {
			content: '';
			flex: 1;
			height: 1px;
			background: rgba(44, 24, 16, 0.3);
		}

		.divider span {
			padding: 0 15px;
		}

		/* Social Share Section */
		.social-share-section {
			margin-top: 10px;
		}

		.share-instruction {
			color: #2c1810;
			font-size: 13px;
			margin-bottom: 15px;
			font-weight: 500;
		}

		.social-buttons {
			display: flex;
			justify-content: center;
			gap: 12px;
		}

		.social-btn {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			border: none;
			cursor: pointer;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: all 0.3s ease;
			color: white;
			font-size: 20px;
		}

		.social-btn:hover {
			transform: translateY(-3px) scale(1.1);
		}

		.social-btn.facebook {
			background: linear-gradient(135deg, #4267B2 0%, #3b5998 100%);
			box-shadow: 0 4px 15px rgba(66, 103, 178, 0.4);
		}

		.social-btn.facebook:hover {
			box-shadow: 0 8px 25px rgba(66, 103, 178, 0.6);
		}

		.social-btn.instagram {
			background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
			box-shadow: 0 4px 15px rgba(225, 48, 108, 0.4);
		}

		.social-btn.instagram:hover {
			box-shadow: 0 8px 25px rgba(225, 48, 108, 0.6);
		}

		.social-btn.twitter {
			background: linear-gradient(135deg, #1DA1F2 0%, #0d8ecf 100%);
			box-shadow: 0 4px 15px rgba(29, 161, 242, 0.4);
		}

		.social-btn.twitter:hover {
			box-shadow: 0 8px 25px rgba(29, 161, 242, 0.6);
		}

		.social-btn svg {
			width: 24px;
			height: 24px;
			fill: white;
		}

		/* Hide main content until unlocked */
		.main-content-wrapper {
			display: none;
		}

		.main-content-wrapper.visible {
			display: block;
		}