/**
 * OTP sign-in card — shared across desktop (style.css) and mobile
 * (style-mobile.css). Loaded unconditionally by tpl/start_and_header.php
 * so the one-time-code auth screen looks identical on every device and
 * the styling only lives in one place.
 *
 * Responsive without a media query: the card is full-width on small
 * screens and caps at 400px on larger ones via max-width:min(...).
 */

div.login_box.loggedout form.otp_login_form{
	box-sizing:border-box;
	width:100%;
	max-width:min(400px, calc(100vw - 24px));
	margin:0 auto;
	padding:30px 26px 24px 26px;
	text-align:center;
	background:#ffffff;
	border:1px solid #e6ecf3;
	border-radius:18px;
	box-shadow:0 16px 40px rgba(31,58,110,0.14);
	line-height:1.5;
}

/* Brand header */
div.login_box.loggedout form.otp_login_form .otp_brand{
	margin-bottom:22px;
}
div.login_box.loggedout form.otp_login_form .otp_brand_mark{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:56px;
	height:56px;
	margin-bottom:12px;
	border-radius:16px;
	color:#ffffff;
	background:linear-gradient(135deg,#2f6bff 0%,#1e46c8 100%);
	box-shadow:0 8px 18px rgba(35,81,184,0.35);
}
div.login_box.loggedout form.otp_login_form .otp_brand_name{
	font-size:24px;
	font-weight:700;
	letter-spacing:0.5px;
	color:#1a2b4a;
}
div.login_box.loggedout form.otp_login_form .otp_brand_tagline{
	font-size:12px;
	color:#8a97a8;
	margin-top:2px;
}

div.login_box.loggedout form.otp_login_form h2{
	font-size:19px;
	color:#1a2b4a;
	margin:0 0 4px 0;
}
div.login_box.loggedout form.otp_login_form .otp_lead{
	margin:0 0 20px 0;
	font-size:13.5px;
	color:#6b7787;
}
div.login_box.loggedout form.otp_login_form .otp_sent_email{
	font-weight:600;
	color:#1a2b4a;
	word-break:break-all;
}

/* Verify-screen header icon */
div.login_box.loggedout form.otp_login_form .otp_verify_head{
	margin-bottom:8px;
}
div.login_box.loggedout form.otp_login_form .otp_verify_icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:52px;
	height:52px;
	margin-bottom:10px;
	border-radius:50%;
	color:#1e9e5a;
	background:#e7f7ee;
}

/* Fields */
div.login_box.loggedout form.otp_login_form .otp_row{
	padding:0;
	text-align:left;
}
div.login_box.loggedout form.otp_login_form .otp_field{
	margin-bottom:16px;
}
div.login_box.loggedout form.otp_login_form label{
	display:block!important; /* mobile sheet hides loggedout labels; show them here */
	width:auto;
	text-align:left;
	margin:0 0 6px 2px;
	font-size:12.5px;
	font-weight:600;
	color:#3f4f5a;
}
div.login_box.loggedout form.otp_login_form input[type="email"],
div.login_box.loggedout form.otp_login_form input[type="text"]{
	box-sizing:border-box;
	width:100%;
	height:auto;
	padding:12px 14px;
	margin-bottom:0;
	text-align:left;
	font-size:16px; /* >=16px avoids iOS zoom-on-focus */
	color:#1a2b4a;
	border:1px solid #d5dde8;
	border-radius:11px;
	background:#fbfcfe;
	transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
div.login_box.loggedout form.otp_login_form input[type="email"]:focus,
div.login_box.loggedout form.otp_login_form input[type="text"]:focus{
	outline:none;
	background:#ffffff;
	border-color:#2f6bff;
	box-shadow:0 0 0 3px rgba(47,107,255,0.16);
}
div.login_box.loggedout form.otp_login_form input#otp_code{
	text-align:center;
	font-size:26px;
	font-weight:700;
	letter-spacing:0.5em;
	padding-left:0.5em; /* balance trailing letter-spacing so digits look centered */
}

/* Actions */
div.login_box.loggedout form.otp_login_form .otp_actions{
	padding-top:2px;
	text-align:center;
}
div.login_box.loggedout form.otp_login_form .otp_secondary_actions{
	display:flex;
	gap:10px;
	margin-top:12px;
}
div.login_box.loggedout form.otp_login_form .btn{
	box-sizing:border-box;
	display:inline-block;
	width:auto;
	height:auto;
	border:none;
	border-radius:11px;
	font-size:14px;
	font-weight:600;
	cursor:pointer;
	font-family:inherit;
	transition:background .15s ease, color .15s ease, opacity .15s ease;
}
div.login_box.loggedout form.otp_login_form .btn-large{
	width:100%;
	padding:13px 18px;
}
div.login_box.loggedout form.otp_login_form .btn-login{
	color:#ffffff;
	background:linear-gradient(135deg,#2f6bff 0%,#1e46c8 100%);
	box-shadow:0 8px 18px rgba(35,81,184,0.28);
}
div.login_box.loggedout form.otp_login_form .btn-login:hover{
	background:linear-gradient(135deg,#3b78ff 0%,#2450d6 100%);
}
div.login_box.loggedout form.otp_login_form .btn-small{
	flex:1 1 0;
	padding:10px 12px;
	font-size:12.5px;
}
div.login_box.loggedout form.otp_login_form .btn-ghost{
	color:#3157c4;
	background:#eef3ff;
}
div.login_box.loggedout form.otp_login_form .btn-ghost:hover{
	background:#e2ebff;
}
div.login_box.loggedout form.otp_login_form .btn:disabled{
	opacity:0.55;
	cursor:default;
}

/* Feedback */
div.login_box.loggedout form.otp_login_form .otp_feedback{
	min-height:18px;
	margin-top:16px;
	padding:0;
	font-size:12.5px;
	color:#6b7787;
}
div.login_box.loggedout form.otp_login_form .otp_feedback.otp_error,
div.login_box.loggedout form.otp_login_form .otp_feedback.otp_ok,
div.login_box.loggedout form.otp_login_form .otp_feedback.otp_info{
	padding:10px 12px;
	border-radius:10px;
	font-weight:600;
}
div.login_box.loggedout form.otp_login_form .otp_feedback.otp_error{
	color:#a12626;
	background:#fdeded;
	border:1px solid #f6d6d6;
}
div.login_box.loggedout form.otp_login_form .otp_feedback.otp_ok{
	color:#0f6b35;
	background:#e7f7ee;
	border:1px solid #c9ecd6;
}
div.login_box.loggedout form.otp_login_form .otp_feedback.otp_info{
	color:#274b8a;
	background:#eef3ff;
	border:1px solid #d6e2fb;
}

/* Feature list under the card */
div.login_box.loggedout + .otp_features,
.container .otp_features{
	display:inline-block;
	margin:26px auto 0 auto;
	padding:0 8px;
	color:#556;
	text-align:center;
}
.container .otp_features p{
	margin:0 0 8px 0;
	font-weight:600;
	color:#3f4f5a;
}
.container .otp_features ul{
	display:inline-block;
	text-align:left;
	list-style:disc;
	padding-left:18px;
	color:#6b7787;
}