/* ============================================================
   WD OTP Login — Frontend Styles v2
   ============================================================ */

/* ── Variables ── */
:root {
	--wdnapp-primary:      #ac09b8;
	--wdnapp-primary-light:#fcf4fd;
	--wdnapp-primary-dark: #8c07a0;
	--wdnapp-gray-1:       #f9fafc;
	--wdnapp-gray-2:       #f0f2f5;
	--wdnapp-gray-3:       #e2e6ed;
	--wdnapp-gray-4:       #878f9b;
	--wdnapp-gray-5:       #4b5563;
	--wdnapp-dark:         #1a1a2e;
	--wdnapp-card-bg:      #fff;
	--wdnapp-surface:      #fff;
	--wdnapp-error-bg:     #fff5f5;
	--wdnapp-error-border: #fecaca;
	--wdnapp-error-text:   #dc2626;
	--wdnapp-success-bg:     #f0fdf4;
	--wdnapp-success-border: #bbf7d0;
	--wdnapp-success-text:   #16a34a;
	--wdnapp-radius:       8px;
	--wdnapp-radius-sm:    10px;
	--wdnapp-shadow:       0 8px 40px rgb(167 169 175 / 10%), 0 2px 8px rgba(0, 0, 0, .06);
	--wdnapp-font:         inherit;
	--wdnapp-transition:   .22s cubic-bezier(.4,0,.2,1);
}

/* ── Dark Mode (همیشه تیره) ── */
.wdnapp-wrap.wdnapp-dark,
.wdnapp-checkout-gate-wrap.wdnapp-dark {
	--wdnapp-primary-light: color-mix(in srgb, var(--wdnapp-primary) 22%, #1a1a1a 78%);
	--wdnapp-primary-dark:  color-mix(in srgb, var(--wdnapp-primary) 80%, #fff 20%);
	--wdnapp-gray-1:        #202020;
	--wdnapp-gray-2:        #262626;
	--wdnapp-gray-3:        #353535;
	--wdnapp-gray-4:        #9b9b9b;
	--wdnapp-gray-5:        #cccccc;
	--wdnapp-dark:           #f2f2f2;
	--wdnapp-card-bg:       #1a1a1a;
	--wdnapp-surface:       #222222;
	--wdnapp-error-bg:      rgba(220,38,38,.14);
	--wdnapp-error-border:  rgba(248,113,113,.35);
	--wdnapp-error-text:    #f87171;
	--wdnapp-success-bg:     rgba(22,163,74,.14);
	--wdnapp-success-border: rgba(74,222,128,.35);
	--wdnapp-success-text:   #4ade80;
	--wdnapp-shadow:        0 8px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
}

/* ── Dark Mode خودکار (بر اساس تنظیمات سیستم/مرورگر کاربر) ── */
@media (prefers-color-scheme: dark) {
	.wdnapp-wrap.wdnapp-theme-auto,
	.wdnapp-checkout-gate-wrap.wdnapp-theme-auto {
		--wdnapp-primary-light: color-mix(in srgb, var(--wdnapp-primary) 22%, #1a1a1a 78%);
		--wdnapp-primary-dark:  color-mix(in srgb, var(--wdnapp-primary) 80%, #fff 20%);
		--wdnapp-gray-1:        #202020;
		--wdnapp-gray-2:        #262626;
		--wdnapp-gray-3:        #353535;
		--wdnapp-gray-4:        #9b9b9b;
		--wdnapp-gray-5:        #cccccc;
		--wdnapp-dark:           #f2f2f2;
		--wdnapp-card-bg:       #1a1a1a;
		--wdnapp-surface:       #222222;
		--wdnapp-error-bg:      rgba(220,38,38,.14);
		--wdnapp-error-border:  rgba(248,113,113,.35);
		--wdnapp-error-text:    #f87171;
		--wdnapp-success-bg:     rgba(22,163,74,.14);
		--wdnapp-success-border: rgba(74,222,128,.35);
		--wdnapp-success-text:   #4ade80;
		--wdnapp-shadow:        0 8px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3);
	}
}

/* ── Wrapper ── */
.wdnapp-wrap {
	font-family:     var(--wdnapp-font) !important;
	direction:       rtl;
	display:         flex;
	justify-content: center;
	align-items:     center;
	min-height:      400px;
	padding:         32px 16px;
}

/* ── حالت «نمایش تمام‌صفحه فرم (بدون هدر و فوتر قالب)» ──
   وقتی این گزینه در تنظیمات ظاهر فعال باشد، صفحه فرم به‌جای هدر/فوتر قالب
   سایت، در یک صفحه مستقل و تمام‌صفحه نمایش داده می‌شود. */
body.wdnapp-standalone-body {
	margin:     0;
	background: var(--wdnapp-gray-1);
	min-height: 100vh;
}

.wdnapp-standalone-page {
	min-height:      100vh;
	display:         flex;
	flex-direction:  column;
	justify-content: center;
}

.wdnapp-standalone-page .wdnapp-wrap {
	min-height: auto;
}

/* ── Card ── */
.wdnapp-card-form {
	background:    var(--wdnapp-card-bg);
	border-radius: var(--wdnapp-radius);
	box-shadow:    var(--wdnapp-shadow);
	width:         100%;
	max-width:     420px;
	overflow:      hidden;
	position:      relative;
}



/* ── Header (logo + title) ── */
.wdnapp-form-header {
	padding:         32px 32px 20px;
	text-align:      center;
}

/* دکمه بازگشت (فلش) — بالا سمت راست کارت فرم */
.wdnapp-back-btn {
	position:        absolute;
	top:             12px;
	right:           12px;
	width:           34px;
	height:          34px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      transparent;
	border:          1px solid var(--wdnapp-gray-4);
	border-radius:   10px;
	color:           var(--wdnapp-gray-4);
	cursor:          pointer;
	padding:         0;
	z-index:         2;
	transition:      background var(--wdnapp-transition), color var(--wdnapp-transition);
	display: none;
}

.wdnapp-back-btn:hover {
	background: var(--wdnapp-gray-2);
	color:      var(--wdnapp-dark);
}

.wdnapp-logo-wrap {
	margin-bottom: 14px;
}

.wdnapp-logo-wrap img {
	max-width:  160px;
	max-height: 60px;
	object-fit: contain;
}

.wdnapp-logo-link {
	display:         block;
	line-height:     0;
	text-decoration: none;
}


.wdnapp-welcome-title {
	font-size:   18px;
	font-weight: 700;
	color:       var(--wdnapp-dark);
	margin:      0 0 4px;
	line-height: 1.4;
}

.wdnapp-subtitle {
	font-size:  13px;
	color:      var(--wdnapp-gray-4);
	margin:     0;
	line-height: 1.6;
}

.wdnapp-gate-subnote {
	font-size:   12.5px;
	color:       var(--wdnapp-primary);
	background:  var(--wdnapp-primary-light);
	border-radius: 99px;
	padding:     4px 12px;
	display:     inline-block;
	margin:      6px 0 0;
}

/* ── Form Body ── */
.wdnapp-form-body {
	padding: 28px 32px;
}

/* ── Step transitions ── */
.wdnapp-step {
	animation: wdnapp-step-in .25s cubic-bezier(.4,0,.2,1);
}

@keyframes wdnapp-step-in {
	from { opacity: 0; transform: translateX(-12px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* ── Mobile input ── */
.wdnapp-field-group {
	margin-bottom: 18px;
}

.wdnapp-field-label {
	display:       block;
	font-size:     13px;
	font-weight:   600;
	color:         var(--wdnapp-gray-5);
	margin-bottom: 8px;
}

.wdnapp-input-wrap {
	position: relative;
	display:  flex;
}

.wdnapp-input-icon {
	position:    absolute;
	right:       14px;
	top:         50%;
	transform:   translateY(-50%);
	color:       var(--wdnapp-gray-4);
	pointer-events: none;
	display:     flex;
}

.wdnapp-input-icon svg {
	width:  18px;
	height: 18px;
}

.wdnapp-input-field {
	width:         100% !important;
	padding:       12px 44px 12px 14px !important;
	font-family:   var(--wdnapp-font) !important;
	font-size:     15px !important;
	border:        2px solid var(--wdnapp-gray-3) !important;
	border-radius: var(--wdnapp-radius-sm) !important;
	background:    var(--wdnapp-gray-1) !important;
	color:         var(--wdnapp-dark) !important;
	transition:    border-color var(--wdnapp-transition), box-shadow var(--wdnapp-transition) !important;
	box-shadow:    none !important;
	outline:       none !important;
	direction:     ltr;
}

.wdnapp-input-field:focus {
	border-color: var(--wdnapp-primary) !important;
	background:   var(--wdnapp-surface) !important;
	box-shadow:   0 0 0 4px var(--wdnapp-primary-light) !important;
}

.wdnapp-input-field::placeholder {
	color:     var(--wdnapp-gray-4) !important;
	font-size: 14px !important;
}

/* ── Step 3: Profile completion ── */
.wdnapp-profile-desc {
	font-size:   13px;
	color:       var(--wdnapp-gray-4);
	line-height: 1.7;
	margin:      -4px 0 18px;
}

.wdnapp-required-star {
	color:        var(--wdnapp-error-text);
	margin-right: 3px;
}

/* فیلدهای متنی/آدرس فارسی باید راست‌به‌چپ باشند؛ فقط ایمیل چپ‌به‌راست می‌ماند
   (کلاس پایه .wdnapp-input-field برای شماره موبایل/OTP جهت را ltr فرض می‌کند) */
.wdnapp-profile-input:not([type="email,password"]) {
	direction:  rtl !important;
	text-align: right !important;
}

.wdnapp-profile-field .wdnapp-input-wrap-plain .wdnapp-input-field {
	padding: 12px 14px !important;
}

input[type="email"].wdnapp-input-field.wdnapp-profile-input, input[type="password"].wdnapp-input-field.wdnapp-profile-input {
	direction:  ltr !important;
	text-align: left !important;
}

/* ردیف نصفه: وقتی «نام» و «نام خانوادگی» هر دو فعال باشند، کنار هم نمایش داده می‌شوند */
.wdnapp-profile-field-row {
	display: flex;
	gap:     12px;
}

.wdnapp-profile-field-row .wdnapp-profile-field-half {
	flex:      1 1 0;
	min-width: 0;
}

/* ردیف دکمه‌ها: در حالت اختیاری، دکمه‌های «ذخیره» و «بعداً» کنار هم نمایش داده می‌شوند */
.wdnapp-profile-buttons-row {
	display: flex;
	gap:     12px;
}

.wdnapp-profile-buttons-row .wdnapp-btn-main,
.wdnapp-profile-buttons-row .wdnapp-btn-secondary {
	flex:       1 1 0;
	min-width:  0;
	margin-top: 4px !important;
}

/* فیلد رمز عبور: جای دکمه چشم (نمایش/مخفی‌کردن رمز) رزرو می‌شود */
.wdnapp-password-wrap .wdnapp-input-field {
	padding-right: 44px !important;
}

.wdnapp-password-toggle {
	position:   absolute !important;
	left:      auto !important;
	right: 8px !important;
	top:        50% !important;
	transform:  translateY(-50%) !important;
	background: none !important;
	border:     none !important;
	padding:    6px !important;
	display:    flex;
	align-items: center;
	justify-content: center;
	color:      var(--wdnapp-gray-4) !important;
	cursor:     pointer;
	border-radius: 6px !important;
	transition: color var(--wdnapp-transition), background var(--wdnapp-transition) !important;
}

.wdnapp-password-toggle:hover {
	color:      var(--wdnapp-dark) !important;
}

.wdnapp-password-toggle svg { display: block; }

/* ── OTP boxes ── */
.wdnapp-otp-boxes {
	display: flex;
	gap:     10px;
	justify-content: center;
	direction: ltr;
}

.wdnapp-otp-box {
	flex:          1;
	max-width:     56px;
	height:        60px;
	text-align:    center;
	font-family:   var(--wdnapp-font) !important;
	font-size:     22px !important;
	font-weight:   700 !important;
	border:        2px solid var(--wdnapp-gray-3) !important;
	border-radius: var(--wdnapp-radius-sm) !important;
	background:    var(--wdnapp-gray-1) !important;
	color:         var(--wdnapp-dark) !important;
	transition:    border-color var(--wdnapp-transition), box-shadow var(--wdnapp-transition), transform var(--wdnapp-transition) !important;
	outline:       none !important;
	box-shadow:    none !important;
	caret-color:   transparent;
}

.wdnapp-otp-box:focus {
	border-color: var(--wdnapp-primary) !important;
	background:   var(--wdnapp-surface) !important;
	box-shadow:   0 0 0 4px var(--wdnapp-primary-light) !important;
	transform:    scale(1.05);
}

.wdnapp-otp-box.filled {
	border-color: var(--wdnapp-primary) !important;
	background:   var(--wdnapp-primary-light) !important;
	color:        var(--wdnapp-primary) !important;
}

/* ── Mobile preview chip ── */
.wdnapp-mobile-chip {
	display:        inline-flex;
	align-items:    center;
	gap:            6px;
	background:     var(--wdnapp-primary-light);
	border:         1px solid var(--wdnapp-primary);
	border-radius:  50px;
	padding:        6px 14px;
	font-size:      13px;
	font-weight:    600;
	color:          var(--wdnapp-primary);
	direction:      ltr;
	margin-bottom:  20px;
}

.wdnapp-mobile-chip svg {
	width:  14px;
	height: 14px;
}

/* ── Buttons ── */
.wdnapp-btn-main {
	display:         block;
	width:           100%;
	padding:         14px !important;
	font-family:     var(--wdnapp-font) !important;
	font-size:       15px !important;
	font-weight:     700 !important;
	color:           #fff !important;
	background:      var(--wdnapp-primary) !important;
	border:          none !important;
	border-radius:   var(--wdnapp-radius-sm) !important;
	cursor:          pointer !important;
	transition:      opacity var(--wdnapp-transition), transform var(--wdnapp-transition), box-shadow var(--wdnapp-transition) !important;
	text-align:      center !important;
	letter-spacing:  0.2px !important;
	margin-top:      4px !important;
}

.wdnapp-btn-main:hover:not(:disabled) {
	opacity:    .92 !important;
	transform:  translateY(-1px) !important;
}

.wdnapp-btn-main:active {
	transform: translateY(0) scale(.98) !important;
}

.wdnapp-btn-main:disabled {
	opacity:    .65 !important;
	cursor:     not-allowed !important;
	transform:  none !important;
}

.wdnapp-btn-main .wdnapp-spinner {
	display:        inline-block;
	width:          16px;
	height:         16px;
	border:         2px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius:  50%;
	animation:      wdnapp-spin .7s linear infinite;
	margin-left:    8px;
	vertical-align: middle;
}

/* دکمهٔ ثانویه (مثلاً «دریافت کد در بله») — پس‌زمینهٔ سفید، حاشیه و متن به رنگ اصلی افزونه */
.wdnapp-btn-secondary {
	display:         block;
	width:           100%;
	padding:         12px !important;
	font-family:     var(--wdnapp-font) !important;
	font-size:       15px !important;
	font-weight:     700 !important;
	color:           var(--wdnapp-primary) !important;
	background:      var(--wdnapp-surface) !important;
	border:          2px solid var(--wdnapp-primary) !important;
	border-radius:   var(--wdnapp-radius-sm) !important;
	cursor:          pointer !important;
	transition:      opacity var(--wdnapp-transition), transform var(--wdnapp-transition) !important;
	text-align:      center !important;
	letter-spacing:  0.2px !important;
	margin-top:      10px !important;
}

.wdnapp-btn-secondary:hover:not(:disabled) {
	opacity:    .85 !important;
	transform:  translateY(-1px) !important;
}

.wdnapp-btn-secondary:active {
	transform: translateY(0) scale(.98) !important;
}

.wdnapp-btn-secondary:disabled {
	opacity:    .55 !important;
	cursor:     not-allowed !important;
	transform:  none !important;
}

.wdnapp-btn-secondary .wdnapp-spinner {
	display:          inline-block;
	width:            16px;
	height:           16px;
	border:           2px solid var(--wdnapp-primary-light);
	border-top-color: var(--wdnapp-primary);
	border-radius:    50%;
	animation:        wdnapp-spin .7s linear infinite;
	margin-left:      8px;
	vertical-align:   middle;
}

@keyframes wdnapp-spin { to { transform: rotate(360deg); } }

/* ── Messages ── */
.wdnapp-msg {
	border-radius: var(--wdnapp-radius-sm);
	padding:       11px 16px;
	font-size:     13px;
	margin-bottom: 16px;
	display:       flex;
	align-items:   flex-start;
	gap:           8px;
	line-height:   1.5;
}

.wdnapp-msg-error {
	background: var(--wdnapp-error-bg);
	border:     1px solid var(--wdnapp-error-border);
	color:      var(--wdnapp-error-text);
}

.wdnapp-msg-success {
	background: var(--wdnapp-success-bg);
	border:     1px solid var(--wdnapp-success-border);
	color:      var(--wdnapp-success-text);
}

.wdnapp-msg-info {
	background: var(--wdnapp-primary-light);
	border:     1px solid var(--wdnapp-primary);
	color:      var(--wdnapp-primary);
}

/* ── Countdown & resend ── */
.wdnapp-footer-links {
	margin-top: 20px;
	text-align: center;
	font-size:  13px;
	color:      var(--wdnapp-gray-4);
}

.wdnapp-countdown-bar-wrap {
	height:        3px;
	background:    var(--wdnapp-gray-2);
	border-radius: 99px;
	overflow:      hidden;
	margin-bottom: 12px;
}

.wdnapp-countdown-bar {
	height:      100%;
	background:  linear-gradient(90deg, var(--wdnapp-primary), var(--wdnapp-primary-dark));
	transition:  width 1s linear;
	border-radius: 99px;
}

.wdnapp-link-btn {
	background:  none !important;
	border:      none !important;
	color:       var(--wdnapp-primary) !important;
	cursor:      pointer !important;
	font-family: var(--wdnapp-font) !important;
	font-size:   13px !important;
	font-weight: 600 !important;
	padding:     0 !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}

.wdnapp-divider {
	color: var(--wdnapp-gray-3);
	padding: 0 6px;
}

/* ── Alternate login (fixed password) toggle link ── */
.wdnapp-alt-login-link {
	text-align: center;
	margin-top: 14px;
}

.wdnapp-step-password .wdnapp-footer-links {
	display:     flex;
	align-items: center;
	justify-content: center;
	gap:         6px;
}

/* ── Rules text ── */
.wdnapp-rules {
	margin-top:   16px;
	font-size:    11.5px;
	color:        var(--wdnapp-gray-4);
	text-align:   center;
	line-height:  1.7;
}

.wdnapp-rules a {
	color: var(--wdnapp-primary) !important;
}

/* ── Honeypot ── */
.wdnapp-hp {
	position:   absolute !important;
	left:       -9999px !important;
	top:        -9999px !important;
	visibility: hidden !important;
	height:     0 !important;
	overflow:   hidden !important;
}

/* ── Checkout toggle ── */
.wdnapp-checkout-notice {
	cursor: default;
}

/* ── Login-before-checkout gate (مرحله ورود بین سبد خرید و تسویه‌حساب) ── */
.wdnapp-checkout-gate-wrap {
	max-width: 640px;
	margin:    32px auto;
	padding:   0 16px;
	direction: rtl;
}

.wdnapp-checkout-gate-banner {
	background:    var(--wdnapp-primary-light);
	border:        1px solid var(--wdnapp-primary);
	border-radius: var(--wdnapp-radius-sm);
	padding:       14px 18px;
	margin-bottom: 22px;
}

.wdnapp-checkout-gate-banner-inner {
	display:     flex;
	align-items: center;
	gap:         12px;
	flex-wrap:   wrap;
}

.wdnapp-checkout-gate-icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           34px;
	height:          34px;
	flex-shrink:     0;
	color:           var(--wdnapp-primary);
	background:      var(--wdnapp-surface);
	border-radius:   50%;
}

.wdnapp-checkout-gate-icon svg { width: 18px; height: 18px; }

.wdnapp-checkout-gate-banner-text {
	flex:        1;
	min-width:   200px;
	font-size:   13.5px;
	color:       var(--wdnapp-dark);
	line-height: 1.6;
}

.wdnapp-checkout-gate-banner-text strong {
	display:     block;
	color:       var(--wdnapp-primary-dark);
	font-weight: 700;
	margin-bottom: 3px;
}

.wdnapp-checkout-gate-cart-info {
	display:    block;
	font-size:  12.5px;
	color:      var(--wdnapp-gray-5);
}

.wdnapp-checkout-gate-cart-link {
	font-size:       12.5px;
	font-weight:     600;
	color:           var(--wdnapp-primary) !important;
	text-decoration: none;
	white-space:     nowrap;
	border:          1px solid var(--wdnapp-primary);
	border-radius:   99px;
	padding:         6px 14px;
	transition:      background .15s;
}

.wdnapp-checkout-gate-cart-link:hover {
	background: 	 var(--wdnapp-primary-light);
	border:          1px solid var(--wdnapp-primary);
}

.wdnapp-checkout-gate-guest {
	text-align: center;
	margin-top: 18px;
}

/* ── Responsive ── */
@media (max-width: 520px) {
	.wdnapp-card-form { border-radius: 12px; }
	.wdnapp-form-body, .wdnapp-form-header { padding-left: 20px; padding-right: 20px; }
	.wdnapp-otp-box  { height: 52px; font-size: 18px !important; }
}

@media (max-width: 360px) {
	.wdnapp-profile-field-row,
	.wdnapp-profile-buttons-row { flex-direction: column; }
}

/* ══════════════════════════════════════════
   فرم پاپ‌آپ (مودال) ورود/عضویت
══════════════════════════════════════════ */
.wdnapp-popup-overlay {
	display:         none;
	position:        fixed;
	inset:           0;
	z-index:         100000;
	background:      rgba(10, 10, 20, .55);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	align-items:     center;
	justify-content: center;
	padding:         20px;
	box-sizing:      border-box;
}

.wdnapp-popup-overlay.wdnapp-popup-open {
	display: flex;
}

.wdnapp-popup-box {
	position:  relative;
	width:     100%;
	max-width: 420px;
	max-height: 92vh;
	border-radius: var(--wdnapp-radius-sm);
}

.wdnapp-popup-box .wdnapp-card-form {
	box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
}

/* آیکون ضربدر مینیمال بستن پاپ‌آپ — بالا سمت چپ */
.wdnapp-popup-close {
	position:        absolute;
	top:             -14px;
	left:            -14px;
	width:           30px;
	height:          30px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      var(--wdnapp-card-bg);
	border:          1px solid var(--wdnapp-gray-3);
	border-radius:   50%;
	color:           var(--wdnapp-gray-4);
	cursor:          pointer;
	z-index:         3;
	box-shadow:      0 4px 14px rgba(0, 0, 0, .15);
	transition:      background var(--wdnapp-transition), color var(--wdnapp-transition);
}

.wdnapp-popup-close:hover {
	background: var(--wdnapp-gray-2);
	color:      var(--wdnapp-dark);
}

body.wdnapp-popup-lock {
	overflow: hidden;
}

@media (max-width: 480px) {
	.wdnapp-popup-close { top: 6px; left: 6px; }
}