/* ============================================================
   TM Gate | گذرگاه مجازی — مودال ورود
   طراحی مدرن، مینیمال، برند (مشکی + طلایی #FFD700)
   ============================================================ */

.tmgate-modal-overlay {
	font-family: 'Vazirmatn', 'IRANSans', Tahoma, sans-serif;
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: rgba(8, 8, 10, 0.72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: grid;
	place-items: center;
	padding: 20px;
	animation: tmgateFade .22s ease;
}
.tmgate-modal-overlay[hidden] { display: none; }

.tmgate-modal {
	position: relative;
	width: 100%;
	max-width: 400px;
	background: #121214;
	border: 1px solid #2a2a2c;
	border-radius: 20px;
	box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,215,0,.12);
	overflow: hidden;
	animation: tmgatePop .28s cubic-bezier(.16,1,.3,1);
}

/* هدر مودال با لوگوی برند */
.tmgate-modal-body { padding: 0; }
.tmgate-modal-body .tmgate-form {
	max-width: none;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
}

/* نوار برند بالا */
.tmgate-modal::before {
	content: '';
	display: block;
	height: 6px;
	background: linear-gradient(90deg, #FFD700, #ffe14d);
}

.tmgate-modal-close {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	width: 34px;
	height: 34px;
	border: 1px solid #2a2a2c;
	background: #1b1b1e;
	color: #aaa;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: all .18s ease;
}
.tmgate-modal-close:hover { color: #FFD700; border-color: #FFD700; background: #202024; }

/* فرم داخل مودال — کمی اصلاح برای هماهنگی */
.tmgate-modal-body .tmgate-hint,
.tmgate-modal-body .tmgate-field input,
.tmgate-modal-body .tmgate-btn,
.tmgate-modal-body .tmgate-link { margin-inline: 0; }
.tmgate-modal-body .tmgate-form { padding: 28px 26px 26px; }

@keyframes tmgateFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tmgatePop { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- فرم (سازگار با مودال و شورت‌کد) ---------- */
.tmgate-form {
	max-width: 420px;
	margin: 0 auto;
	background: #121214;
	border: 1px solid #2a2a2c;
	border-radius: 20px;
	padding: 30px 28px;
	font-family: inherit;
	direction: rtl;
	text-align: right;
	color: #fff;
}
.tmgate-form-header {
	text-align: center;
	margin-bottom: 22px;
}
.tmgate-logo {
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	display: grid;
	place-items: center;
	background: #0f0f0f;
	border: 2px solid #FFD700;
	border-radius: 14px;
	color: #FFD700;
	font-weight: 800;
	font-size: 20px;
}
.tmgate-form-header h3 {
	margin: 0;
	font-size: 20px;
	color: #fff;
}
.tmgate-form-header p {
	margin: 6px 0 0;
	font-size: 13px;
	color: #9ca3af;
}

.tmgate-field { margin-bottom: 14px; }
.tmgate-field input {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid #3a3a3d;
	border-radius: 12px;
	font-size: 15px;
	box-sizing: border-box;
	background: #1b1b1e;
	color: #fff;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.tmgate-field input::placeholder { color: #6b7280; }
.tmgate-field input:focus {
	outline: none;
	border-color: #FFD700;
	box-shadow: 0 0 0 3px rgba(255,215,0,.15);
}
.tmgate-btn {
	width: 100%;
	padding: 14px;
	border: 0;
	border-radius: 12px;
	background: #FFD700;
	color: #0a0a0a;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: all .18s ease;
}
.tmgate-btn:hover { background: #ffe14d; transform: translateY(-1px); }
.tmgate-btn:active { transform: translateY(0); }
.tmgate-btn[disabled] { opacity: .6; cursor: not-allowed; }
.tmgate-link {
	background: none;
	border: 0;
	color: #FFD700;
	cursor: pointer;
	margin-top: 12px;
	font-size: 13px;
	text-decoration: underline;
}
.tmgate-msg {
	margin-top: 12px;
	padding: 11px 14px;
	border-radius: 10px;
	font-size: 13px;
	display: none;
	line-height: 1.7;
}
.tmgate-msg[data-type="error"] { background: #2a1010; color: #ffb3b3; border: 1px solid #7f1d1d; }
.tmgate-msg[data-type="success"] { background: #0d2a14; color: #7ee2a0; border: 1px solid #166534; }
.tmgate-hint { font-size: 13px; color: #c9c9c9; margin-bottom: 14px; }
.tmgate-already { padding: 16px; background: #1b1b1e; border: 1px solid #2a2a2c; border-radius: 12px; text-align: center; color: #fff; }
.tmgate-already a { color: #FFD700; }