/* Modal background */
.unique-modal-wrapper {
	display: none;
	position: fixed;
	z-index: 99999;
	left: 0; top: 0;
	width: 100%; height: 100%;
	background: rgba(0,0,0,0.6);
	backdrop-filter: blur(2px);
}

/* Modal content */
.unique-modal-content {
	background: #fff;
	width: 100%;
	margin: 5% auto;
	padding: 40px;
	border-radius: 12px;
	position: relative;
	animation: uniqueFadeIn 0.3s ease-in-out;
	max-width: 500px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Close button */
.unique-modal-close {
	position: absolute;
	top: 15px; right: 20px;
	font-size: 24px;
	cursor: pointer;
	color: #666;
	transition: color 0.2s;
}

.unique-modal-close:hover {
	color: #333;
}

/* Steps */
.unique-step {
	text-align: center;
}

.unique-step h2 {
	margin-bottom: 15px;
	color: #333;
	font-size: 24px;
}

.unique-step p {
	margin-bottom: 20px;
	color: #666;
	line-height: 1.5;
}

.unique-step input {
	padding: 12px;
	border: 2px solid #e1e5e9;
	border-radius: 8px;
	text-align: center;
	font-size: 16px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.unique-step input:focus {
	border-color: #4f46e5;
	box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
	outline: none;
}

.unique-error-msg {
	color: #dc2626;
	font-size: 14px;
	margin-top: 10px;
	min-height: 20px;
}

/* Email display */
.email-display {
	background: #f8fafc;
	padding: 12px;
	border-radius: 8px;
	margin: 15px 0;
	border: 1px solid #e2e8f0;
}

.email-display strong {
	color: #374151;
	font-size: 16px;
}

/* OTP popup */
.otp-group {
	display: flex;
	gap: 8px;
	margin: 20px 0;
	align-items: center;
	justify-content: center;
}

.otp-input {
	width: 60px !important;
	height: 60px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	border: 2px solid #e1e5e9;
	border-radius: 8px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.otp-input:focus {
	border-color: #4f46e5;
	box-shadow: 0 0 0 3px rgba(79,70,229,0.15);
}

/* OTP meta section */
.otp-meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	line-height: 1.5;
}

.otp-meta span {
	color: #666;
	font-size: 14px;
	margin-bottom: 5px;
}

.otp-meta strong {
	color: #4f46e5;
	font-weight: bold;
}

.otp-meta small {
	color: #777;
	font-size: 12px;
	margin-top: 5px;
}

.otp-meta span {
	color: #666;
	font-size: 14px;
}

.otp-meta strong {
	color: #4f46e5;
	font-weight: bold;
}

/* SDG Badges */
.sdg-badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 12px;
	color: white;
	font-weight: bold;
	font-size: 12px;
	text-align: center;
	min-width: 40px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* SDG Color Classes */
.sdg-1 { background-color: #e5243b; }
.sdg-2 { background-color: #dda83a; }
.sdg-3 { background-color: #4c9f38; }
.sdg-4 { background-color: #c5192d; }
.sdg-5 { background-color: #ff3a21; }
.sdg-6 { background-color: #26bde2; }
.sdg-7 { background-color: #fcc30b; }
.sdg-8 { background-color: #a21942; }
.sdg-9 { background-color: #fd6925; }
.sdg-10 { background-color: #dd1367; }
.sdg-11 { background-color: #fd9d24; }
.sdg-12 { background-color: #bf8b2e; }
.sdg-13 { background-color: #3f7e44; }
.sdg-14 { background-color: #0a97d9; }
.sdg-15 { background-color: #56c02b; }
.sdg-16 { background-color: #00689d; }
.sdg-17 { background-color: #19486a; }

/* Climate Champion Options */
.climate-champion-options {
	margin: 15px 0;
	padding: 15px;
	background-color: #f8f9fa;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.climate-champion-options label {
	margin: 10px 0;
	padding: 10px;
	background-color: white;
	border: 2px solid #e9ecef;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.extra_question{
	margin-top:20px
}
.climate-champion-options label:hover {
	border-color: #3B5CCC;
	background-color: #f8f9ff;
}

.climate-champion-options input[type="radio"] {
	margin-right: 10px;
	transform: scale(1.2);
}

.climate-champion-options input[type="radio"]:checked + label {
	border-color: #3B5CCC;
	background-color: #e8f0ff;
	font-weight: bold;
}

/* Buttons */
.unique-step button {
	background: #4f46e5;
	color: white;
	border: none;
	padding: 12px 24px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s, transform 0.1s;
	margin: 5px;
}

.unique-step button:hover {
	background: #3730a3;
	transform: translateY(-1px);
}

.unique-step button:disabled {
	background: #9ca3af;
	cursor: not-allowed;
	transform: none;
}

#otpResendBtn {
	background: #6b7280;
	font-size: 14px;
	padding: 8px 16px;
}

#otpResendBtn:hover:not(:disabled) {
	background: #4b5563;
}

#closeModalBtn {
	background: #10b981;
}

#closeModalBtn:hover {
	background: #059669;
}

/* Success step */
#successStep {
	color: #059669;
}

#successStep h2 {
	color: #059669;
}

/* Responsive design */
@media (max-width: 768px) {
	.unique-modal-content {
		margin: 10% auto;
		padding: 30px 20px;
		max-width: 90%;
	}

	.otp-group {
		gap: 6px;
	}

	.otp-input {
		width: 50px !important;
		height: 50px;
		font-size: 18px;
	}

	.unique-step h2 {
		font-size: 20px;
	}
}

/* Animation */
@keyframes uniqueFadeIn {
	from { 
		opacity: 0; 
		transform: scale(0.8) translateY(-20px); 
	}
	to { 
		opacity: 1; 
		transform: scale(1) translateY(0); 
	}
}

/* Loading states */
.unique-step button:disabled {
	opacity: 0.7;
}

/* Table styling for better UX */
table {
	border-collapse: collapse;
	width: 100%;
	margin: 20px 0;
}

table th,
table td {
	padding: 12px;
	text-align: left;
	border: 1px solid #e5e7eb;
}

table th {
	background-color: #f9fafb;
	font-weight: 600;
	color: #374151;
}

.sendotpmail {
	color: #4f46e5;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s;
}

.sendotpmail:hover {
	color: #3730a3;
	text-decoration: underline;
}