@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;700;800&display=swap');

:root {
	--vdp-pink: #ff5f96;
	--vdp-pink-dark: #e0447d;
	--vdp-blue: #3e8ede;
	--vdp-blue-dark: #2d6fb3;
	--vdp-gold: #d4af37;
	--vdp-bg-card: #fffaf7;
	--vdp-text: #2b2230;
	--vdp-radius: 20px;
}

.vdp-overlay {
	position: fixed;
	inset: 0;
	background: radial-gradient(circle at 50% 20%, rgba(60, 20, 50, 0.55), rgba(10, 6, 14, 0.82));
	backdrop-filter: blur(3px);
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
	font-family: 'Vazirmatn', Tahoma, sans-serif;
	direction: rtl;
}

.vdp-overlay.vdp-visible {
	display: flex;
	animation: vdp-fade-in 0.35s ease both;
}

@keyframes vdp-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.vdp-modal {
	position: relative;
	width: 100%;
	max-width: 440px;
	background: var(--vdp-bg-card);
	border-radius: var(--vdp-radius);
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(212, 175, 55, 0.25);
	padding: 34px 28px 28px;
	color: var(--vdp-text);
	text-align: center;
	animation: vdp-pop-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
	max-height: 92vh;
	overflow-y: auto;
}

@keyframes vdp-pop-in {
	0%   { opacity: 0; transform: scale(0.75) translateY(30px); }
	60%  { opacity: 1; transform: scale(1.03) translateY(-4px); }
	100% { opacity: 1; transform: scale(1) translateY(0); }
}

.vdp-modal::before {
	content: '';
	position: absolute;
	top: -2px; left: -2px; right: -2px;
	height: 6px;
	border-radius: var(--vdp-radius) var(--vdp-radius) 0 0;
	background: linear-gradient(90deg, var(--vdp-pink), var(--vdp-gold), var(--vdp-blue));
}

.vdp-close {
	position: absolute;
	top: 10px;
	left: 14px;
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	color: #9a8fa0;
	cursor: pointer;
	transition: color 0.2s, transform 0.2s;
}
.vdp-close:hover { color: var(--vdp-pink-dark); transform: rotate(90deg); }

.vdp-back {
	position: absolute;
	top: 14px;
	right: 16px;
	background: none;
	border: none;
	font-size: 13px;
	color: #8b8091;
	cursor: pointer;
	font-family: inherit;
}
.vdp-back:hover { color: var(--vdp-blue-dark); }

.vdp-title {
	font-size: 20px;
	font-weight: 800;
	margin: 6px 30px 6px;
	line-height: 1.6;
}

.vdp-subtitle {
	font-size: 14px;
	color: #6d6272;
	margin: 0 0 18px;
}

/* Step 1: gender */
.vdp-gender-row {
	display: flex;
	gap: 16px;
	margin-top: 22px;
}

.vdp-gender-btn {
	flex: 1;
	border: none;
	border-radius: 16px;
	padding: 26px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	font-size: 16px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vdp-gender-btn:hover { transform: translateY(-4px) scale(1.03); }

.vdp-gender-female {
	background: linear-gradient(160deg, var(--vdp-pink), var(--vdp-pink-dark));
	box-shadow: 0 10px 24px rgba(224, 68, 125, 0.4);
}
.vdp-gender-male {
	background: linear-gradient(160deg, var(--vdp-blue), var(--vdp-blue-dark));
	box-shadow: 0 10px 24px rgba(45, 111, 179, 0.4);
}

.vdp-gender-icon { font-size: 34px; }

/* Step 2: offers */
.vdp-offers-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 4px;
}

.vdp-offer-card {
	border: 2px solid #ece3e8;
	border-radius: 14px;
	padding: 14px 16px;
	text-align: right;
	cursor: pointer;
	background: #fff;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
	position: relative;
}
.vdp-offer-card:hover { transform: translateY(-2px); border-color: var(--vdp-gold); }
.vdp-offer-card.vdp-offer-selected {
	border-color: var(--vdp-gold);
	box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
	background: #fffdf5;
}
.vdp-offer-card .vdp-offer-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.vdp-offer-card .vdp-offer-desc { font-size: 13px; color: #6d6272; }
.vdp-offer-card .vdp-offer-badge {
	position: absolute;
	top: 10px;
	left: 12px;
	background: var(--vdp-gold);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 20px;
}

.vdp-choose-offer-btn {
	margin-top: 18px;
	width: 100%;
	border: none;
	border-radius: 12px;
	padding: 13px;
	background: linear-gradient(135deg, var(--vdp-gold), #b8912a);
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: opacity 0.2s;
}
.vdp-choose-offer-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Step 3: phone */
.vdp-phone-form { margin-top: 10px; text-align: right; }
.vdp-label { display: block; font-size: 13px; margin-bottom: 6px; color: #6d6272; }
.vdp-input {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 14px;
	border-radius: 12px;
	border: 2px solid #ece3e8;
	font-size: 16px;
	font-family: inherit;
	direction: ltr;
	text-align: center;
	letter-spacing: 1px;
	transition: border-color 0.2s;
}
.vdp-input:focus { outline: none; border-color: var(--vdp-blue); }
.vdp-error { color: #d94141; font-size: 13px; margin: 8px 0 0; text-align: center; }

.vdp-submit-btn {
	margin-top: 16px;
	width: 100%;
	border: none;
	border-radius: 12px;
	padding: 14px;
	background: linear-gradient(135deg, var(--vdp-pink), var(--vdp-blue));
	color: #fff;
	font-family: inherit;
	font-weight: 800;
	font-size: 16px;
	cursor: pointer;
	transition: transform 0.15s, opacity 0.2s;
}
.vdp-submit-btn:hover { transform: translateY(-2px); }
.vdp-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Step 4: success */
.vdp-success-icon {
	font-size: 46px;
	animation: vdp-bounce 0.6s ease;
}
@keyframes vdp-bounce {
	0% { transform: scale(0.4); opacity: 0; }
	60% { transform: scale(1.15); opacity: 1; }
	100% { transform: scale(1); }
}

.vdp-coupon-box {
	margin-top: 16px;
	border: 2px dashed var(--vdp-gold);
	border-radius: 14px;
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: #fffdf5;
}
.vdp-coupon-code {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 2px;
	direction: ltr;
	color: var(--vdp-pink-dark);
}
.vdp-copy-btn {
	border: none;
	background: var(--vdp-gold);
	color: #fff;
	border-radius: 8px;
	padding: 8px 14px;
	font-family: inherit;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	white-space: nowrap;
}

.vdp-expiry { font-size: 13px; color: #6d6272; margin-top: 12px; }

.vdp-done-btn {
	margin-top: 18px;
	width: 100%;
	border: none;
	border-radius: 12px;
	padding: 13px;
	background: #2b2230;
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}

.vdp-locked-note {
	margin-top: 10px;
	font-size: 12px;
	color: #a08a3a;
	background: #fff8e6;
	border-radius: 8px;
	padding: 8px 10px;
}

@media (max-width: 480px) {
	.vdp-modal { padding: 28px 18px 22px; }
	.vdp-gender-row { gap: 10px; }
}