/* ===== پاپ‌آپ بازی جایزه — همه‌ی رنگ‌ها از متغیرهای سراسری آنید استور (class-design-tokens.php)
   خونده می‌شن تا خودکار با تم روشن/تیره و رنگ برند سایت هماهنگ بمونه؛ اگه آنید استور نصب/فعال
   نباشه، مقادیر fallback (بعد از کاما) استفاده می‌شن. طبق قانون پروژه، همه‌ی این کلاس‌ها با
   پیشوند anied-popup- مخصوص همین قابلیتن — هیچ‌کدوم رو با تب/کارت دیگه‌ای مشترک نمی‌کنیم.
   نکته: چون این پاپ‌آپ داخل wp_footer و مستقل از قالب/المنتور رندر می‌شه، ممکنه استایل‌های
   سراسری المنتور (روی تگ‌های عمومی مثل button، input، p، h2 و ...) این کلاس‌ها رو اورراید کنن؛
   به همین خاطر روی ویژگی‌های ساختاری/بصری کلیدی !important گذاشته شده. */

.anied-popup-backdrop{
	/* پیش‌فرض همیشه مخفیه — فقط با اضافه‌شدن کلاس is-open (توسط popup.js) نمایش داده می‌شه.
	   ⚠️ عمداً display:none گذاشته شده نه flex: اگه اینجا flex !important می‌ذاشتیم، همیشه
	   روی صفحه می‌موند (نه صبر می‌کرد تا تایمر، نه با دکمه‌ی بستن جمع می‌شد) — چون !important
	   تو استایل، حتی از style.display دستی جاوااسکریپت هم قوی‌تره. این باگ همون چیزیه که با
	   تصویر گزارش دادید؛ با این تغییر برطرف می‌شه. */
	position:fixed !important; inset:0 !important; z-index:99999 !important;
	margin:0 !important; padding:0 !important;
	width:100% !important; height:100% !important;
	background:rgba(0,0,0,.45) !important;
	display:none !important; align-items:center !important; justify-content:center !important;
	direction:rtl !important;
	font-family:var(--popup-font, var(--anied-font, 'Vazirmatn, Tahoma, sans-serif')) !important;
	box-sizing:border-box !important;
}
.anied-popup-backdrop.is-open{ display:flex !important; }

.anied-popup-modal{
	direction:rtl !important;
	position:relative !important;
	width:360px !important; max-width:92vw !important;
	background:var(--anied-surface-1, #fff) !important;
	border-radius:22px !important;
	box-shadow:0 20px 60px rgba(0,0,0,.3) !important;
	padding:18px 0 0 !important; margin:0 !important;
	box-sizing:border-box !important;
	transform:translateY(0);
	transition:transform .18s ease-out;
}
.anied-popup-drag{
	position:absolute !important; top:8px !important; left:50% !important; transform:translateX(-50%);
	width:42px !important; height:5px !important; border-radius:4px !important;
	background:var(--anied-border, rgba(20,18,16,.15)) !important;
	cursor:grab; touch-action:none;
}
.anied-popup-drag:active{ cursor:grabbing; }

.anied-popup-head{
	display:flex !important; align-items:flex-start !important; justify-content:space-between !important;
	padding:20px 18px 4px !important; margin:0 !important;
}
.anied-popup-head-txt{ text-align:right !important; }
.anied-popup-head-txt h2{ margin:0 !important; font-size:17px !important; font-weight:800 !important; color:var(--anied-text, #141210) !important; line-height:1.6 !important; }
.anied-popup-head-txt p{ margin:4px 0 0 !important; font-size:12.5px !important; color:var(--anied-text-muted, #6b6660) !important; line-height:1.8 !important; }
.anied-popup-close{
	width:28px !important; height:28px !important; border-radius:50% !important; border:none !important; flex:0 0 auto !important;
	background:var(--anied-surface-2, #ececea) !important; color:var(--anied-text-muted, #6b6660) !important;
	font-size:14px !important; cursor:pointer !important; display:flex !important; align-items:center !important; justify-content:center !important;
	box-shadow:none !important; margin:0 !important; padding:0 !important;
}

.anied-popup-body{ padding:14px 18px 24px !important; margin:0 !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:14px !important; }

.anied-popup-game-wrap{ position:relative; }
.anied-popup-grid{ display:flex !important; gap:10px !important; direction:ltr !important; margin:0 !important; padding:0 !important; }
.anied-popup-col{ display:flex !important; flex-direction:column !important; gap:8px !important; margin:0 !important; padding:0 !important; }
.anied-popup-card{
	width:92px; height:92px; border-radius:14px !important; cursor:pointer !important;
	position:relative; transform-style:preserve-3d; transition:transform .5s, opacity .3s;
	margin:0 !important;
}
.anied-popup-card .face{
	position:absolute; inset:0; display:flex !important; align-items:center !important; justify-content:center !important;
	backface-visibility:hidden; border-radius:14px !important; font-size:32px !important;
	margin:0 !important;
}
.anied-popup-card .back{ background:var(--anied-surface-2, #ececea) !important; color:var(--anied-text-muted, #6b6660) !important; font-size:18px !important; border:1px solid var(--anied-border, rgba(20,18,16,.1)) !important; }
.anied-popup-card .front{ background:var(--anied-brand-dim, rgba(0,162,255,.12)) !important; transform:rotateY(180deg); border:2px solid var(--anied-border, rgba(20,18,16,.1)) !important; }
.anied-popup-card.flipped{ transform:rotateY(180deg); }
.anied-popup-card.win .front{ border-color:var(--anied-brand, #00A2FF) !important; box-shadow:inset 0 0 0 2px var(--anied-brand, #00A2FF); }
.anied-popup-card.locked:not(.flipped){ opacity:.35; pointer-events:none !important; }

.anied-popup-confetti{ position:absolute; inset:0; pointer-events:none; overflow:visible; }
.anied-popup-confetti-piece{ position:absolute; top:50%; left:50%; font-size:20px !important; opacity:0; margin:0 !important; }
.anied-popup-confetti-piece.go{ animation:anied-popup-burst 1.1s ease-out forwards; }
@keyframes anied-popup-burst{
	0%{ opacity:1; transform:translate(-50%,-50%) scale(.4) rotate(0deg); }
	70%{ opacity:1; }
	100%{ opacity:0; transform:translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); }
}

.anied-popup-cta{
	width:100% !important; background:var(--anied-brand, #00A2FF) !important; color:#fff !important; border:none !important; padding:14px !important;
	border-radius:14px !important; font-size:15px !important; font-weight:700 !important; cursor:pointer !important; font-family:inherit !important;
	box-shadow:0 8px 20px rgba(0,162,255,.3) !important; transition:transform .15s; margin:0 !important; text-transform:none !important; letter-spacing:normal !important;
}
.anied-popup-cta:active{ transform:scale(.97); }
.anied-popup-cta:hover, .anied-popup-cta:focus{ color:#fff !important; background:var(--anied-brand, #00A2FF) !important; }
.anied-popup-ghost{
	width:100% !important; background:transparent !important; color:var(--anied-text-muted, #6b6660) !important; border:none !important; padding:10px !important;
	font-size:13.5px !important; cursor:pointer !important; font-family:inherit !important; text-decoration:underline !important; margin:0 !important; box-shadow:none !important;
}

.anied-popup-phone-form{ width:100% !important; display:flex !important; flex-direction:column !important; gap:10px !important; margin-top:2px !important; }
.anied-popup-phone-input{
	width:100% !important; padding:13px 16px !important; border-radius:12px !important; border:1.5px solid var(--anied-border, rgba(20,18,16,.15)) !important;
	font-size:15px !important; text-align:center !important; direction:ltr !important; font-family:inherit !important; outline:none !important;
	background:var(--anied-surface-0, #f5f5f4) !important; color:var(--anied-text, #141210) !important; box-sizing:border-box !important; margin:0 !important; height:auto !important;
}
.anied-popup-phone-input:focus{ border-color:var(--anied-brand, #00A2FF) !important; box-shadow:none !important; }
.anied-popup-msg{ font-size:12px !important; text-align:center !important; min-height:16px; color:var(--anied-text-muted, #6b6660) !important; margin:0 !important; }
.anied-popup-msg.err{ color:#e33 !important; }
.anied-popup-msg.ok{ color:#1a9e56 !important; }

.anied-popup-confirm{
	position:absolute !important; inset:0 !important; background:rgba(0,0,0,.5) !important; border-radius:22px !important;
	display:flex !important; align-items:center !important; justify-content:center !important;
	direction:rtl !important;
	opacity:0 !important; pointer-events:none !important; transition:opacity .2s;
	margin:0 !important; padding:0 !important;
}
.anied-popup-confirm.show{ opacity:1 !important; pointer-events:auto !important; }
.anied-popup-confirm-card{
	background:var(--anied-surface-1, #fff) !important; border-radius:16px !important; padding:22px 20px !important; width:82% !important;
	text-align:center !important; transform:scale(.9); transition:transform .2s; margin:0 !important; box-shadow:none !important;
}
.anied-popup-confirm.show .anied-popup-confirm-card{ transform:scale(1); }
.anied-popup-confirm-main{ margin:0 0 6px !important; font-size:15px !important; color:var(--anied-text, #141210) !important; font-weight:800 !important; line-height:1.8 !important; }
.anied-popup-confirm-sub{ margin:0 0 18px !important; font-size:12px !important; color:var(--anied-text-muted, #6b6660) !important; font-weight:400 !important; line-height:1.8 !important; }

/* دو صفحه‌ی داخل پاپ‌آپ (بازی/جایزه) — کلاس‌محور به‌جای اتکا به style.display خام، تا با همون
   منطق بالا (تم/المنتور که ممکنه display رو اورراید کنه) مشکل نداشته باشن. popup.js با
   افزودن/حذف کلاس anied-popup-screen-active جابه‌جاشون می‌کنه. */
#anied-popup-screen-game, #anied-popup-screen-prize{ display:none !important; }
#anied-popup-screen-game.anied-popup-screen-active, #anied-popup-screen-prize.anied-popup-screen-active{ display:block !important; }

@media (max-width:400px){
	.anied-popup-card{ width:26vw !important; height:26vw !important; }
}