/**
 * /expertapp/ — قاب تمام‌صفحه‌ی اکسپرت و دروازه‌ی ورودش.
 * اسکوپ‌شده زیر .xpa-stage؛ هیچ کلاسی از تیلویند سایت لازم ندارد.
 *
 * کاربر واردشده: فقط آی‌فریم تمام‌صفحه، دقیقاً مثل قبل.
 * کاربر واردنشده: یک نوار بالای صفحه + لایه‌ی شفافِ گیرنده‌ی کلیک + مودال ورود.
 */

.bitfa-expertapp-page,
.bitfa-expertapp-page .main-page-wrapper {
	margin: 0;
	padding: 0;
	background: #080b12;
}
.bitfa-expertapp-page {
	overflow: hidden;
}

.xpa-stage {
	--xpa-gold: #f7a01d;
	--xpa-gold-d: #e08b06;
	--xpa-ink: #080b12;
	--xpa-panel: #10151f;
	--xpa-line: rgba(255, 255, 255, .1);
	--xpa-text: #eef1f6;
	--xpa-muted: #98a1b2;
	--xpa-bar-h: 48px;
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	background: var(--xpa-ink);
	overflow: hidden;
}

.xpa-frame-wrap {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}

.xpa-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: var(--xpa-ink);
}

/* ---------- نوار بالا (فقط کاربر واردنشده) ---------- */

/* شناور نیست: ارتفاع می‌گیرد و آی‌فریم را پایین می‌آورد، چون خود اکسپرت در هر دو
   گوشه‌ی بالایش دکمه دارد. */
.xpa-bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	height: var(--xpa-bar-h);
	padding: 0 14px;
	border-bottom: 1px solid var(--xpa-line);
	background: var(--xpa-panel);
	color: var(--xpa-text);
}

.xpa-home {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 7px 12px;
	border-radius: 99px;
	border: 1px solid var(--xpa-line);
	color: var(--xpa-muted);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: color .18s, border-color .18s;
}
.xpa-home:hover { color: var(--xpa-text); border-color: rgba(255, 255, 255, .22); }
.xpa-home svg { transform: scaleX(-1); }

.xpa-note {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	justify-content: center;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--xpa-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.xpa-dot {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--xpa-gold);
	animation: xpa-pulse 2.4s infinite;
}
@keyframes xpa-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(247, 160, 29, .45); }
	70%  { box-shadow: 0 0 0 9px rgba(247, 160, 29, 0); }
	100% { box-shadow: 0 0 0 0 rgba(247, 160, 29, 0); }
}

.xpa-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	height: 34px;
	padding: 0 15px;
	border-radius: 10px;
	background: var(--xpa-gold);
	color: #1a1204;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background .18s;
}
.xpa-cta:hover { background: var(--xpa-gold-d); color: #1a1204; }

/* ---------- لایه‌ی گیرنده‌ی کلیک ---------- */

/* شفاف است: کاربر اکسپرت را می‌بیند، ولی هیچ کلیکی به آی‌فریم نمی‌رسد. */
.xpa-shield {
	position: absolute;
	inset: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.xpa-shield:focus-visible {
	outline: 2px solid var(--xpa-gold);
	outline-offset: -4px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- مودال ---------- */

.xpa-modal {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.xpa-modal[hidden] { display: none; }

.xpa-modal-veil {
	position: absolute;
	inset: 0;
	background: rgba(4, 6, 11, .72);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	animation: xpa-fade .2s ease-out;
}

.xpa-card {
	position: relative;
	width: min(430px, 100%);
	max-height: calc(100dvh - 40px);
	overflow-y: auto;
	padding: 34px 30px 26px;
	border-radius: 22px;
	border: 1px solid var(--xpa-line);
	background: linear-gradient(180deg, #161c28 0%, var(--xpa-panel) 100%);
	color: var(--xpa-text);
	text-align: center;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
	animation: xpa-rise .24s cubic-bezier(.2, .8, .3, 1);
}

.xpa-x {
	position: absolute;
	top: 12px;
	inset-inline-end: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--xpa-muted);
	cursor: pointer;
	transition: color .18s, background .18s;
}
.xpa-x:hover { color: var(--xpa-text); background: rgba(255, 255, 255, .07); }

.xpa-lock {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-bottom: 16px;
	border-radius: 18px;
	border: 1px solid rgba(247, 160, 29, .28);
	background: rgba(247, 160, 29, .12);
	color: var(--xpa-gold);
}

.xpa-title {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.6;
	color: #fff;
}

.xpa-desc {
	margin: 0 0 22px;
	font-size: 13.5px;
	font-weight: 400;
	line-height: 2.1;
	color: var(--xpa-muted);
}

.xpa-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 48px;
	margin-bottom: 10px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: 13px;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s, border-color .18s, color .18s, transform .12s;
}
.xpa-btn:active { transform: translateY(1px); }

.xpa-btn-gold {
	background: var(--xpa-gold);
	color: #1a1204;
}
.xpa-btn-gold:hover { background: var(--xpa-gold-d); color: #1a1204; }

.xpa-btn-ghost {
	background: transparent;
	border-color: var(--xpa-line);
	color: var(--xpa-muted);
}
.xpa-btn-ghost:hover { border-color: rgba(255, 255, 255, .22); color: var(--xpa-text); }

.xpa-more {
	display: inline-block;
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--xpa-muted);
	text-decoration: none;
	border-bottom: 1px dashed rgba(255, 255, 255, .22);
	padding-bottom: 2px;
	transition: color .18s, border-color .18s;
}
.xpa-more:hover { color: var(--xpa-gold); border-color: rgba(247, 160, 29, .5); }

@keyframes xpa-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes xpa-rise {
	from { opacity: 0; transform: translateY(14px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

/* ---------- موبایل ---------- */

@media (max-width: 700px) {
	.xpa-stage { --xpa-bar-h: 44px; }
	.xpa-bar { gap: 8px; padding: 0 10px; }
	.xpa-home span { display: none; }
	.xpa-home { padding: 8px 10px; }
	.xpa-note { font-size: 11.5px; font-weight: 600; }
	.xpa-cta { height: 31px; padding: 0 12px; font-size: 12px; }
	.xpa-cta svg { display: none; }
}

@media (max-width: 480px) {
	.xpa-card { padding: 30px 20px 22px; border-radius: 18px; }
	.xpa-title { font-size: 17px; }
	.xpa-desc { font-size: 12.5px; line-height: 2; }
}

@media (prefers-reduced-motion: reduce) {
	.xpa-modal-veil,
	.xpa-card,
	.xpa-dot { animation: none; }
}