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

/* =========================================================
   Mobile OTP box – Poppins only, perfectly aligned inputs
   ========================================================= */

/* ---- Poppins everywhere inside the widget ---- */
.motp-wrap,
.motp-wrap *,
.motp-box,
.motp-box *,
.motp-box input,
.motp-box button,
.motp-box select,
.motp-box textarea{
	font-family:'Poppins',sans-serif!important;
}

/* ---- Layout ---- */
.motp-wrap{display:flex;align-items:center;justify-content:center;width:100%;min-height:420px;margin:0 auto;padding:24px 12px;box-sizing:border-box}
.motp-box,.motp-box *{box-sizing:border-box}
.motp-box{width:100%;max-width:450px;margin:0 auto;padding:28px 26px;background:#fff;border:1px solid #e3e6ea;border-radius:14px;box-shadow:0 6px 24px rgba(16,24,40,.07);text-align:left}
.motp-box .motp-head{text-align:center;margin:0 0 22px}
.motp-box .motp-title{margin:0 0 6px;padding:0;font-size:1.2rem;line-height:1.35;font-weight:700;color:#111}
.motp-box .motp-sub{margin:0;padding:0;font-size:.875rem;line-height:1.55;font-weight:400;color:#667085}
.motp-box .motp-step{display:block}
.motp-box .motp-step[hidden]{display:none!important}
.motp-box .motp-label{display:block;margin:0 0 8px;padding:0;font-size:.875rem;font-weight:600;line-height:1.3;color:#222}
.motp-box .motp-sent{margin:0 0 16px;padding:0;text-align:center;font-size:.875rem;line-height:1.5;color:#667085}
.motp-box .motp-sent strong{color:#111;font-weight:600}

/* =========================================================
   PHONE FIELD  →  [ flag +91 ▾ | number input ]
   One flex row, everything vertically centred.
   ========================================================= */
.motp-box .motp-field{
	position:relative;
	display:flex;
	flex-wrap:nowrap;
	align-items:center;           /* centres both children vertically */
	height:50px;
	margin:0 0 14px;
	padding:0;
	background:#fff;
	border:1.5px solid #d0d5dd;
	border-radius:10px;
	overflow:visible;
	transition:border-color .15s,box-shadow .15s;
}
.motp-box .motp-field:focus-within{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.15)}

/* country selector */
.motp-box .motp-cc-wrap{position:relative;flex:0 0 auto;display:flex;align-items:stretch;align-self:stretch}
.motp-box .motp-cc{
	display:flex;align-items:center;gap:8px;
	height:100%;margin:0;padding:0 12px 0 14px;
	background:#f7f8fa!important;color:#111!important;
	border:0!important;border-right:1.5px solid #d0d5dd!important;
	border-radius:8px 0 0 8px!important;box-shadow:none!important;
	font-size:.95rem;font-weight:600;line-height:1;text-transform:none;letter-spacing:0;
	cursor:pointer;
}
.motp-box .motp-cc:hover{background:#eef0f3!important}
.motp-box .motp-caret{width:10px;height:10px;opacity:.6;flex:0 0 auto}
.motp-box .motp-flag{display:block;width:26px;height:17px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.12);flex:0 0 auto}

/* <p> wrapper around the number input: margin 0, padding 0, inline-flex row.
   Theme p{margin-bottom:..} rules are overridden with !important. */
.motp-box .motp-field p,
.motp-box .motp-field > p.motp-input-wrap,
.motp-wrap .motp-box .motp-field p.motp-input-wrap{
	display:flex!important;
	align-items:center!important;
	flex:1 1 auto!important;
	align-self:stretch!important;
	width:auto!important;
	min-width:0!important;
	height:100%!important;
	margin:0!important;
	padding:0!important;
	border:0!important;
	background:transparent!important;
	box-shadow:none!important;
	font-size:1rem!important;
	line-height:1!important;
	text-align:left!important;
	cursor:text;
}
.motp-box .motp-field br{display:none!important}

/* number input: width 70%, vertically centred, left aligned */
.motp-box .motp-field p input.motp-mobile,
.motp-box .motp-field input.motp-mobile,
.motp-wrap .motp-box .motp-field input[type="tel"]{
	-webkit-appearance:none!important;
	appearance:none!important;
	display:block!important;
	flex:0 0 auto!important;
	width:70%!important;
	min-width:0!important;
	max-width:none!important;
	height:100%!important;
	min-height:0!important;
	margin:0!important;
	padding:0 14px!important;
	background:transparent!important;
	border:0!important;
	border-radius:0!important;
	box-shadow:none!important;
	outline:0!important;
	transform:none!important;
	position:static!important;
	float:none!important;
	vertical-align:middle!important;
	font-size:1rem!important;
	font-weight:500!important;
	line-height:1.2!important;
	letter-spacing:.03em!important;
	text-align:left!important;
	text-indent:0!important;
	color:#111!important;
}
.motp-box .motp-field input.motp-mobile:-webkit-autofill{
	-webkit-box-shadow:0 0 0 100px #fff inset!important;
	box-shadow:0 0 0 100px #fff inset!important;
	-webkit-text-fill-color:#111!important;
}
.motp-box .motp-field input.motp-mobile::placeholder,
.motp-box input.motp-otp::placeholder{color:#98a2b3;opacity:1;font-weight:400}

/* ---- Country list ---- */
.motp-box .motp-cc-list{position:absolute;z-index:99999;top:calc(100% + 6px);left:-1.5px;width:290px;max-width:calc(100vw - 48px);max-height:250px;overflow-y:auto;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid #e3e6ea;border-radius:10px;box-shadow:0 10px 30px rgba(16,24,40,.18)}
.motp-box .motp-cc-list[hidden]{display:none!important}
.motp-box .motp-cc-list li{display:flex;align-items:center;gap:10px;margin:0;padding:9px 10px;border-radius:7px;font-size:.875rem;line-height:1.3;color:#111;cursor:pointer;list-style:none}
.motp-box .motp-cc-list li:hover,
.motp-box .motp-cc-list li[aria-selected="true"]{background:#eef4ff}
.motp-box .motp-cc-list .motp-cc-name{flex:1 1 auto}
.motp-box .motp-cc-list .motp-cc-d{color:#667085;font-variant-numeric:tabular-nums}

/* =========================================================
   OTP INPUT – centred digits, same vertical rules
   ========================================================= */
.motp-box input.motp-otp{
	-webkit-appearance:none!important;
	appearance:none!important;
	display:block!important;
	width:100%!important;
	max-width:none!important;
	height:54px!important;
	min-height:0!important;
	margin:0 0 14px!important;
	padding:0 14px!important;
	background:#fff;
	border:1.5px solid #d0d5dd;
	border-radius:10px;
	box-shadow:none;
	font-size:1.4rem!important;
	font-weight:600!important;
	line-height:1.2!important;
	letter-spacing:.45em;
	text-align:center!important;
	text-indent:.45em;              /* balances trailing letter-spacing so digits sit truly centred */
	color:#111;
}
.motp-box input.motp-otp:focus{outline:0;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.15)}

/* ---- Buttons (theme colours kept, size/alignment/font fixed) ---- */
.motp-box .motp-btn{
	display:flex;align-items:center;justify-content:center;
	width:100%;min-height:50px;margin:0;padding:0 18px;
	text-align:center;font-size:.95rem;font-weight:600;line-height:1.2;
	letter-spacing:.01em;text-transform:none;cursor:pointer;
}
.motp-box .motp-btn:disabled{opacity:.65;cursor:default}
.motp-box .motp-links{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 0}
.motp-box .motp-links button{margin:0;padding:0;background:none!important;border:0!important;box-shadow:none!important;color:#2563eb!important;font-size:.875rem;font-weight:600;line-height:1.3;text-decoration:none;text-transform:none;cursor:pointer}
.motp-box .motp-links button:hover:not(:disabled){text-decoration:underline}
.motp-box .motp-links button:disabled{color:#98a2b3!important;cursor:default}

/* ---- Messages ---- */
.motp-box .motp-msg{margin:14px 0 0;min-height:0;font-size:.85rem;line-height:1.5;text-align:center}
.motp-box .motp-msg:empty{display:none}
.motp-box .motp-msg.motp-error{color:#b42318}
.motp-box .motp-msg.motp-ok{color:#067647}

/* ---- Mobile ---- */
@media (max-width:480px){
	.motp-wrap{padding:16px 10px}
	.motp-box{padding:22px 16px;border-radius:12px}
	.motp-box .motp-field{height:48px}
	.motp-box .motp-cc{padding:0 10px 0 12px}
}
p {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  margin: 0 0 0px !important;
}