/*
|--------------------------------------------------------------------------
| SplashDigital Auth UI Pro
| Premium Responsive Styles
|--------------------------------------------------------------------------
*/

:root{
	--splash-bg:#0b1120;
	--splash-card:rgba(15,23,42,.82);
	--splash-border:rgba(255,255,255,.08);
	--splash-text:#f8fafc;
	--splash-muted:#94a3b8;
	--splash-accent:#f97316;
	--splash-accent-hover:#ea580c;
	--splash-input:#111827;
	--splash-shadow:0 30px 60px rgba(0,0,0,.35);
	--radius:20px;
}

/*
|--------------------------------------------------------------------------
| Wrapper
|--------------------------------------------------------------------------
*/
#splash-auth-app{
	width:100%;
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
	box-sizing:border-box;
	font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
	color:var(--splash-text);
}

/*
|--------------------------------------------------------------------------
| Card
|--------------------------------------------------------------------------
*/
.splash-card{
	width:100%;
	max-width:480px;
	background:var(--splash-card);
	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);
	border:1px solid var(--splash-border);
	border-radius:var(--radius);
	box-shadow:var(--splash-shadow);
	overflow:hidden;
	animation:splashFade .35s ease;
}

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

/*
|--------------------------------------------------------------------------
| Tabs
|--------------------------------------------------------------------------
*/
.splash-tabs{
	display:grid;
	grid-template-columns:1fr 1fr;
	border-bottom:1px solid var(--splash-border);
	background:rgba(255,255,255,.02);
}

.splash-tab-nav{
	padding:16px;
	border:0;
	background:transparent;
	color:var(--splash-muted);
	font-size:.95rem;
	font-weight:700;
	cursor:pointer;
	transition:.25s ease;
}

.splash-tab-nav:hover{
	color:#fff;
}

.splash-tab-nav.active{
	color:#fff;
	box-shadow:inset 0 -3px 0 var(--splash-accent);
	background:rgba(249,115,22,.08);
}

/*
|--------------------------------------------------------------------------
| Inner Body
|--------------------------------------------------------------------------
*/
.splash-body{
	padding:28px;
}

/*
|--------------------------------------------------------------------------
| Login Switch
|--------------------------------------------------------------------------
*/
.login-switch{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:8px;
	margin-bottom:18px;
}

.login-mode-btn{
	padding:10px;
	border:1px solid var(--splash-border);
	background:rgba(255,255,255,.03);
	color:var(--splash-muted);
	border-radius:12px;
	cursor:pointer;
	font-size:.85rem;
	font-weight:600;
	transition:.25s ease;
}

.login-mode-btn:hover{
	color:#fff;
}

.login-mode-btn.active{
	background:rgba(249,115,22,.14);
	color:#fff;
	border-color:rgba(249,115,22,.4);
}

/*
|--------------------------------------------------------------------------
| Headings
|--------------------------------------------------------------------------
*/
#splash-auth-app h2,
#splash-auth-app h3{
	margin:0 0 12px;
	text-align:center;
	line-height:1.3;
}

#splash-auth-app h2{
	font-size:1.7rem;
}

#splash-auth-app h3{
	font-size:1.2rem;
	font-weight:700;
}

#splash-auth-app p{
	margin:0 0 18px;
	text-align:center;
	color:var(--splash-muted);
	line-height:1.6;
	font-size:.96rem;
}

/*
|--------------------------------------------------------------------------
| Inputs
|--------------------------------------------------------------------------
*/
#splash-auth-app input,
#splash-auth-app textarea,
#splash-auth-app select{
	width:100%;
	padding:14px 15px;
	margin-bottom:14px;
	border-radius:14px;
	border:1px solid var(--splash-border);
	background:var(--splash-input);
	color:#fff;
	font-size:1rem;
	box-sizing:border-box;
	outline:none;
	transition:.2s ease;
}

#splash-auth-app textarea{
	min-height:110px;
	resize:vertical;
}

#splash-auth-app input:focus,
#splash-auth-app textarea:focus{
	border-color:rgba(249,115,22,.55);
	box-shadow:0 0 0 4px rgba(249,115,22,.12);
}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/
.splash-btn{
	width:100%;
	padding:14px 18px;
	border:0;
	border-radius:14px;
	cursor:pointer;
	font-weight:700;
	font-size:1rem;
	color:#fff;
	background:linear-gradient(135deg,var(--splash-accent),var(--splash-accent-hover));
	box-shadow:0 12px 25px rgba(249,115,22,.25);
	transition:.25s ease;
}

.splash-btn:hover{
	transform:translateY(-1px);
	box-shadow:0 16px 28px rgba(249,115,22,.32);
}

.splash-link-btn{
	width:100%;
	margin-top:10px;
	padding:12px;
	background:transparent;
	border:0;
	color:var(--splash-muted);
	cursor:pointer;
	font-size:.95rem;
	text-decoration:underline;
}

.splash-link-btn:hover{
	color:#fff;
}

/*
|--------------------------------------------------------------------------
| OTP
|--------------------------------------------------------------------------
*/
.otp-wrap{
	display:flex;
	justify-content:center;
	gap:10px;
	margin:16px 0 18px;
}

.otp-input{
	width:46px !important;
	height:56px !important;
	margin:0 !important;
	padding:0 !important;
	text-align:center;
	font-size:1.45rem !important;
	font-weight:700;
	border-radius:14px !important;
	color:#fff !important;
}

/*
|--------------------------------------------------------------------------
| Intl Tel Input
|--------------------------------------------------------------------------
*/
.iti{
	width:100%;
	margin-bottom:14px;
}

.iti input{
	padding-left:90px !important;
}

.iti__country-list{
	background:#111827 !important;
	color:#fff !important;
	border:1px solid var(--splash-border) !important;
}

.iti__country:hover{
	background:rgba(249,115,22,.16) !important;
}

/*
|--------------------------------------------------------------------------
| Success State
|--------------------------------------------------------------------------
*/
.success-badge{
	width:72px;
	height:72px;
	border-radius:999px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0 auto 14px;
	background:rgba(249,115,22,.12);
	font-size:2rem;
	color:var(--splash-accent);
}

/*
|--------------------------------------------------------------------------
| Helpers
|--------------------------------------------------------------------------
*/
.splash-note{
	font-size:.88rem;
	color:var(--splash-muted);
	text-align:center;
	margin-top:8px;
}

.splash-divider{
	height:1px;
	background:var(--splash-border);
	margin:18px 0;
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/
@media (max-width:640px){

	#splash-auth-app{
		padding:0;
		align-items:stretch;
	}

	.splash-card{
		max-width:none;
		min-height:100vh;
		border-radius:0;
		border:0;
	}

	.splash-body{
		padding:22px 18px 32px;
	}

	.otp-wrap{
		gap:8px;
	}

	.otp-input{
		width:42px !important;
		height:52px !important;
		font-size:1.2rem !important;
	}
}

/*
|--------------------------------------------------------------------------
| Tiny Phones
|--------------------------------------------------------------------------
*/
@media (max-width:390px){

	.login-switch{
		grid-template-columns:1fr;
	}

	.otp-wrap{
		gap:6px;
	}

	.otp-input{
		width:38px !important;
		height:48px !important;
	}
}