/* ==========================================================================
   CASINO VIP MOBILE AUTH — PERFECT SYMMETRY & CENTERED TEXT INPUTS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Cinzel:wght@700;900&display=swap');

html,
body {
	min-height: 100vh !important;
	height: 100% !important;
	background-color: #06090f !important;
	background-image: 
		radial-gradient(circle at 50% 10%, rgba(212, 175, 55, 0.22) 0%, transparent 60%),
		radial-gradient(circle at 90% 90%, rgba(0, 229, 255, 0.08) 0%, transparent 50%),
		radial-gradient(circle at 10% 90%, rgba(255, 42, 85, 0.06) 0%, transparent 50%),
		linear-gradient(180deg, #090f1a 0%, #030509 100%) !important;
	background-attachment: fixed !important;
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	color: #e2e8f0 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	overflow-x: hidden !important;
}

.by-login-bj {
	opacity: 0.12 !important;
	position: fixed !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background-image: url(/ascn/picture/bj8.jpg) !important;
	background-size: cover !important;
	background-position: center !important;
	z-index: 0 !important;
	pointer-events: none !important;
}

.alert_bj {
	display: none !important;
}

/* Centered Balanced Auth Card */
.bykuang {
	position: relative !important;
	top: auto !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	margin: 20px auto !important;
	z-index: 10 !important;
	background: rgba(14, 22, 35, 0.95) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
	border: 1px solid rgba(212, 175, 55, 0.35) !important;
	border-radius: 20px !important;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(245, 200, 66, 0.25) !important;
	padding: 24px 20px 20px !important;
	width: calc(100% - 32px) !important;
	max-width: 380px !important;
	min-width: 300px !important;
	box-sizing: border-box !important;
}

/* Header Branding */
.mbs-mobile-header {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	text-align: center !important;
	margin-bottom: 16px !important;
	gap: 4px !important;
}

.mbs-m-logo {
	width: 64px !important;
	height: 64px !important;
	object-fit: contain !important;
	border-radius: 50% !important;
	border: 1.5px solid rgba(212, 175, 55, 0.45) !important;
	box-shadow: 0 0 14px rgba(245, 200, 66, 0.6) !important;
	background: rgba(8, 14, 23, 0.7) !important;
	padding: 2px !important;
	margin-bottom: 2px !important;
}

.mbs-m-title {
	font-family: 'Cinzel', serif !important;
	font-size: 15.5px !important;
	font-weight: 900 !important;
	background: linear-gradient(135deg, #fff2a3 0%, #f5c842 50%, #d4af37 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	letter-spacing: 1.2px !important;
	line-height: 1.2 !important;
}

.mbs-m-sub {
	font-size: 9.5px !important;
	color: #94a3b8 !important;
	letter-spacing: 2px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
}

/* Switch Tabs */
.top1 {
	display: flex !important;
	width: 100% !important;
	background: rgba(8, 14, 23, 0.8) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 12px !important;
	padding: 3px !important;
	gap: 4px !important;
	margin: 0 0 16px 0 !important;
	box-sizing: border-box !important;
}

.top1 div {
	flex: 1 !important;
	width: 50% !important;
	text-align: center !important;
	height: 36px !important;
	line-height: 36px !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	color: #8fa0b5 !important;
	cursor: pointer !important;
	border-radius: 9px !important;
	border: none !important;
	transition: all 0.2s ease !important;
}

.top1 div.curr {
	background: linear-gradient(135deg, #fff2a3 0%, #f5c842 50%, #d4af37 100%) !important;
	color: #120c00 !important;
	box-shadow: 0 2px 10px rgba(212, 175, 55, 0.45) !important;
}

/* Swiper Container */
.swiper-container {
	width: 100% !important;
	overflow: hidden !important;
}

.mbs-form-slide-inner {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 0 2px !important;
}

/* Input Rows Container */
.top2 {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
	padding: 0 !important;
	text-align: center !important;
}

/* Input Row with Absolute Left Icon & Centered Input Text */
.mbs-input-row,
.bykuang .top2 div {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	height: 44px !important;
	background: rgba(8, 13, 22, 0.85) !important;
	border: 1px solid rgba(212, 175, 55, 0.25) !important;
	border-radius: 10px !important;
	padding: 0 12px !important;
	box-sizing: border-box !important;
	transition: all 0.2s ease !important;
	margin: 0 !important;
}

.mbs-input-row:focus-within,
.bykuang .top2 div:focus-within {
	border-color: #f5c842 !important;
	box-shadow: 0 0 12px rgba(245, 200, 66, 0.4) !important;
}

.mbs-input-icon,
.bykuang .top2 div i {
	position: absolute !important;
	left: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	font-size: 16px !important;
	color: #f5c842 !important;
	pointer-events: none !important;
	z-index: 2 !important;
	margin: 0 !important;
	padding: 0 !important;
	font-style: normal !important;
	line-height: 1 !important;
}

.mbs-input-row input,
.bykuang .top2 div input {
	height: 100% !important;
	width: 100% !important;
	background: transparent !important;
	border: none !important;
	color: #fff !important;
	font-family: 'Outfit', sans-serif !important;
	font-size: 14px !important;
	outline: none !important;
	padding: 0 36px !important; /* Balanced left & right padding to avoid icon collision */
	margin: 0 !important;
	text-align: center !important; /* Centered Placeholder & Input Text */
	box-sizing: border-box !important;
}

.mbs-input-row input::placeholder,
.bykuang .top2 div input::placeholder {
	color: #64748b !important;
	font-size: 13.5px !important;
	text-align: center !important; /* Centered Placeholder */
}

/* Captcha Row */
.captcha-row {
	padding-right: 6px !important;
}
.captcha-row input {
	padding: 0 100px 0 36px !important;
	text-align: center !important;
}
.captcha-row .captcha-img {
	position: absolute !important;
	right: 6px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	height: 32px !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	z-index: 5 !important;
}

/* Helper Row (Remember & CSKH) */
.top3 {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	font-size: 12px !important;
	color: #94a3b8 !important;
	margin: 10px 0 14px !important;
	padding: 0 2px !important;
}

.top3 a,
.top3 #ascn {
	color: #00e5ff !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	cursor: pointer !important;
}

.top3 .jizhu {
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
	color: #cbd5e1 !important;
	font-size: 12.5px !important;
	cursor: pointer !important;
}

.age-check-wrap {
	margin: 8px 0 12px !important;
	display: flex !important;
	justify-content: center !important;
	text-align: center !important;
}

/* Action Submit Buttons */
.top4, .top5 {
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

.top4 button,
.top5 button {
	width: 100% !important;
	height: 44px !important;
	background: linear-gradient(135deg, #fff2a3 0%, #f5c842 50%, #d4af37 100%) !important;
	color: #1a1200 !important;
	font-weight: 900 !important;
	font-size: 15px !important;
	border-radius: 10px !important;
	border: none !important;
	box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4) !important;
	cursor: pointer !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
	transition: all 0.15s ease !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
}

.top4 button:active,
.top5 button:active {
	transform: scale(0.97) !important;
	filter: brightness(1.1) !important;
}

/* Footer status */
.mbs-m-footer {
	text-align: center !important;
	margin-top: 14px !important;
	padding-top: 10px !important;
	border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
	font-size: 11px !important;
	color: #64748b !important;
}

/* Alert dialog fix */
.hsycms-model-alert {
	background: #0d1522 !important;
	border: 1px solid rgba(212, 175, 55, 0.4) !important;
	color: #fff !important;
	border-radius: 16px !important;
}
.hsycms-model-btn button {
	background: linear-gradient(135deg, #fff2a3 0%, #f5c842 50%, #d4af37 100%) !important;
	color: #1a1200 !important;
	font-weight: 800 !important;
	border-radius: 8px !important;
}