/* ==========================================================================
   Modern Auth UI - used by registration.php and User-Login.php
   Scoped under .mt-auth-* so it never clashes with the existing site CSS.
   ========================================================================== */

.mt-auth-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 16px;
	background: linear-gradient(135deg, #1f2a56 0%, #4a2b7a 45%, #b5352f 100%);
	font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

.mt-auth-card {
	width: 100%;
	background: rgba(255, 255, 255, 0.97);
	border-radius: 18px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	overflow: hidden;
	animation: mtFadeUp .35s ease;
}

.mt-auth-card.mt-auth-wide { max-width: 900px; }
.mt-auth-card.mt-auth-narrow { max-width: 440px; }

@keyframes mtFadeUp {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

.mt-auth-head {
	background: linear-gradient(120deg, #2b3a8f, #7a2e8f);
	color: #fff;
	padding: 26px 32px;
	text-align: center;
}
.mt-auth-head h1 {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 4px;
	letter-spacing: .3px;
}
.mt-auth-head p {
	margin: 0;
	font-size: 13px;
	opacity: .85;
}

.mt-auth-body { padding: 28px 32px 32px; }

/* tabs (used on the login page) */
.mt-tabs {
	display: flex;
	background: #f1f2f8;
	border-radius: 10px;
	padding: 4px;
	margin-bottom: 22px;
}
.mt-tab {
	flex: 1;
	text-align: center;
	padding: 10px 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: #5b5f77;
	border-radius: 8px;
	cursor: pointer;
	user-select: none;
	transition: all .18s ease;
}
.mt-tab.active {
	background: #fff;
	color: #2b3a8f;
	box-shadow: 0 2px 8px rgba(43, 58, 143, 0.18);
}
.mt-tab-panel { display: none; }
.mt-tab-panel.active { display: block; animation: mtFadeUp .25s ease; }

/* form grid */
.mt-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px 20px;
}
.mt-grid .mt-full { grid-column: 1 / -1; }
@media (max-width: 640px) {
	.mt-grid { grid-template-columns: 1fr; }
}

.mt-field { margin-bottom: 0; position: relative; }
.mt-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #343a55;
	margin-bottom: 6px;
}
.mt-field label .req { color: #d9455f; }

.mt-field input[type="text"],
.mt-field input[type="email"],
.mt-field input[type="password"],
.mt-field input[type="date"],
.mt-field input[type="file"],
.mt-field select,
.mt-field textarea {
	width: 100%;
	border: 1.5px solid #e1e3ee;
	border-radius: 9px;
	padding: 10px 12px;
	font-size: 14px;
	background: #fbfbfe;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}
.mt-field textarea { min-height: 70px; resize: vertical; }
.mt-field input:focus,
.mt-field select:focus,
.mt-field textarea:focus {
	outline: none;
	border-color: #6a4bd6;
	box-shadow: 0 0 0 3px rgba(106, 75, 214, 0.15);
	background: #fff;
}
.mt-field .mt-hint {
	font-size: 12px;
	margin-top: 5px;
	min-height: 16px;
}
.mt-hint.ok { color: #1b8a4c; }
.mt-hint.bad { color: #d9455f; }
.mt-hint.checking { color: #8b8fa3; }

.mt-pass-wrap { position: relative; }
.mt-pass-wrap .mt-eye {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	color: #8b8fa3;
	font-size: 14px;
}

.mt-btn {
	width: 100%;
	border: none;
	border-radius: 10px;
	padding: 13px 16px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(120deg, #6a4bd6, #a0349b);
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
	box-shadow: 0 8px 20px rgba(106, 75, 214, 0.3);
}
.mt-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(106, 75, 214, 0.38); }
.mt-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

.mt-link-row { text-align: center; margin-top: 18px; font-size: 13.5px; color: #5b5f77; }
.mt-link-row a { color: #6a4bd6; font-weight: 600; text-decoration: none; }
.mt-link-row a:hover { text-decoration: underline; }

.mt-alert {
	display: none;
	padding: 12px 14px;
	border-radius: 9px;
	font-size: 13.5px;
	margin-bottom: 18px;
}
.mt-alert.mt-show { display: block; animation: mtFadeUp .2s ease; }
.mt-alert.mt-success { background: #e5f7ec; color: #147a41; border: 1px solid #b7ecc9; }
.mt-alert.mt-error { background: #fdecee; color: #b3273f; border: 1px solid #f6c3cb; }

.mt-spinner {
	display: inline-block;
	width: 15px; height: 15px;
	border: 2px solid rgba(255,255,255,.5);
	border-top-color: #fff;
	border-radius: 50%;
	animation: mtSpin .7s linear infinite;
	vertical-align: -2px;
	margin-right: 7px;
}
@keyframes mtSpin { to { transform: rotate(360deg); } }

.mt-success-box {
	text-align: center;
	padding: 10px 0 4px;
}
.mt-success-box .mt-check {
	width: 56px; height: 56px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: #e5f7ec;
	color: #1b8a4c;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
}

/* ---- Step wizard ---- */
.mt-steps { display:flex; justify-content:space-between; margin-bottom:28px; position:relative; gap:4px; }
.mt-steps::before { content:''; position:absolute; top:16px; left:12%; right:12%; height:3px; background:#e1e3ee; z-index:0; }
.mt-step { flex:1; text-align:center; position:relative; z-index:1; }
.mt-step-num { width:34px; height:34px; border-radius:50%; background:#e1e3ee; color:#5b5f77; font-weight:700; font-size:14px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:6px; }
.mt-step.active .mt-step-num, .mt-step.done .mt-step-num { background:linear-gradient(120deg,#6a4bd6,#a0349b); color:#fff; }
.mt-step.done .mt-step-num { background:#1b8a4c; }
.mt-step-label { font-size:11.5px; font-weight:600; color:#8b8fa3; display:block; }
.mt-step.active .mt-step-label { color:#2b3a8f; }
.mt-step.done .mt-step-label { color:#1b8a4c; }
.mt-panel { display:none; }
.mt-panel.active { display:block; animation:mtFadeUp .25s ease; }
.mt-btn-row { display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
.mt-btn-row .mt-btn { flex:1; min-width:120px; }
.mt-btn-outline { background:#fff; color:#6a4bd6; border:1.5px solid #6a4bd6; box-shadow:none; }
.mt-btn-outline:hover { background:#f5f2ff; }
.mt-pay-box { background:#f7f5ff; border:1.5px solid #e0d8f8; border-radius:12px; padding:18px 20px; margin-bottom:18px; }
.mt-pay-box h4 { margin:0 0 12px; font-size:15px; color:#2b3a8f; }
.mt-pay-row { display:flex; justify-content:space-between; padding:6px 0; font-size:13.5px; border-bottom:1px dashed #e1e3ee; }
.mt-pay-row:last-child { border-bottom:none; }
.mt-fee-highlight { font-size:20px; font-weight:700; color:#6a4bd6; margin:8px 0 4px; }
.mt-qr-wrap { text-align:center; margin:14px 0; }
.mt-qr-wrap img { max-width:180px; border-radius:8px; border:1px solid #e1e3ee; }
.mt-note { font-size:12.5px; color:#5b5f77; background:#fff8e6; border:1px solid #f0e0b0; border-radius:8px; padding:10px 12px; margin-top:10px; }
.mt-review-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.mt-review-table th, .mt-review-table td { text-align:left; padding:8px 10px; border-bottom:1px solid #eee; }
.mt-review-table th { color:#5b5f77; font-weight:600; width:40%; }