.np-auth-bsmodal { z-index: 100050; }
.np-auth-bsmodal.modal.fade .modal-dialog { transition: transform .2s ease; }

.np-auth-bsmodal .modal-dialog {
	max-width: 378px;
	margin: 1.75rem auto;
}

.np-auth-bsmodal-content {
	background: #ffffff;
	border: none !important;
	border-radius: 10px !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

.np-auth-bsmodal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 0;
	border-bottom: 1px solid #D9D9D9;
	margin-inline: 15px;
}
.np-auth-bsmodal-title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: #333333;
	line-height: 1.5;
}
.np-auth-bsmodal-close {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	color: #333333;
	padding: 0;
	transition: background-color 0.15s;
}
.np-auth-bsmodal-close:hover { background: #f5f5f5; }
.np-auth-bsmodal--no-close .np-auth-bsmodal-close { display: none; }

.np-auth-bsmodal-body {
	padding: 15px;
}
.np-auth-bsmodal-body .np-auth-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.np-auth-bsmodal-body .np-auth-subtitle {
	margin: 0 0 8px;
	font-size: 12px;
	color: #8b8b8b;
	line-height: 1.8;
}
.np-auth-bsmodal-body .np-auth-subtitle-label { color: #8b8b8b; }
.np-auth-bsmodal-body .np-auth-subtitle-value {
	color: #333333;
	font-weight: 700;
	direction: ltr;
	unicode-bidi: embed;
}

.np-auth-bsmodal-body .np-auth-input {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	background: #f5f5f5 !important;
	border: 1px solid transparent !important;
	border-radius: 7px !important;
	font-size: 12px;
	color: #333333;
	outline: none !important;
	font-family: inherit;
	text-align: right;
}
.np-auth-bsmodal-body .np-auth-input::placeholder { color: #8b8b8b; }
.np-auth-bsmodal-body .np-auth-input:focus {
	background: #ffffff !important;
	border-color: #666666 !important;
}
.np-auth-bsmodal-body .np-auth-input--mobile { direction: ltr; text-align: left; }

.np-auth-bsmodal-body .np-auth-label {
	display: block;
	margin-bottom: 7px;
	font-size: 12px;
	color: #333333;
}

.np-auth-bsmodal-body .np-auth-btn-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 44px;
	border: none;
	border-radius: 7px;
	background: #ff6e00;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	transition: opacity 0.15s, background-color 0.15s;
	margin-top: 5px;
	margin-inline: 0;
}
.np-auth-bsmodal-body .np-auth-btn-primary:hover:not(:disabled) { opacity: 0.95; }
.np-auth-bsmodal-body .np-auth-btn-primary:disabled {
	background: #dddddd;
	color: #8b8b8b;
	cursor: not-allowed;
}

.np-auth-bsmodal-body .np-auth-error {
	margin-top: 5px;
	min-height: 14px;
	font-size: 11px;
	color: #bf1313;
	line-height: 1.7;
}
.np-auth-bsmodal-body .np-auth-error:empty { display: none; }


.np-auth-bsmodal-body .d-none { display: none !important; }

/* Gender chips (replicated to avoid relying on the global file) */
.np-auth-bsmodal-body .np-auth-gender {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.np-auth-bsmodal-body .np-auth-gender-chip {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	background: #f5f5f5;
	border: 1px solid transparent;
	border-radius: 7px;
	cursor: pointer;
	font-size: 13px;
	color: #333333;
	transition: border-color 0.15s, background-color 0.15s;
	margin: 0;
	position: relative;
}
.np-auth-bsmodal-body .np-auth-gender-chip input[type="radio"] {
	position: absolute; opacity: 0; pointer-events: none;
}
.np-auth-bsmodal-body .np-auth-gender-dot {
	display: inline-flex;
	width: 16px; height: 16px;
	border: 1px solid #cccccc;
	border-radius: 4px;
	position: relative;
	flex-shrink: 0;
	transition: border-color 0.15s, background-color 0.15s;
}
.np-auth-bsmodal-body .np-auth-gender-chip:has(input:checked) {
	background: #ffffff;
	border-color: #ff6e00;
}
.np-auth-bsmodal-body .np-auth-gender-chip:has(input:checked) .np-auth-gender-dot {
	background: #ff6e00;
	border-color: #ff6e00;
}

/* OTP row */

.np-auth-bsmodal-body .np-auth-pw-rules {
	list-style: none;
	margin: 0;
	padding: 4px 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 16px;
}
.np-auth-bsmodal-body .np-auth-pw-rule {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: #8b8b8b;
	line-height: 1.5;
}
.np-auth-bsmodal-body .np-auth-pw-rule-dot {
	display: inline-flex;
	width: 12px; height: 12px;
	border: 1.5px solid #cccccc;
	border-radius: 50%;
	flex-shrink: 0;
}
.np-auth-bsmodal-body .np-auth-pw-rule.is-ok { color: #21a32b; }
.np-auth-bsmodal-body .np-auth-pw-rule.is-ok .np-auth-pw-rule-dot {
	border-color: #21a32b;
	background: #21a32b;
	box-shadow: inset 0 0 0 2px #ffffff;
}


.np-auth-bsmodal-body .np-auth-subtitle--otp strong,
.np-auth-bsmodal-body .np-auth-subtitle--otp b {
	color: #333333;
	font-weight: 700;
}

.np-auth-bsmodal-body .np-auth-otp-row-inner { position: relative; }
.np2-info-cell-password{
	flex: 0 50%
}
@media (max-width: 991px) {
	.np-auth-bsmodal-header {
		margin-inline: 16px;
	}
	.np-auth-bsmodal .modal-dialog {
		margin: 0;
		min-height: 100%;
		display: flex;
		align-items: flex-end;
		max-width: none;
	}
	.np-auth-bsmodal-content {
		width: 100%;
		border-radius: 12px 12px 0 0 !important;
	}
	.np-auth-form {
		gap: 15px;
	}
	.np-auth-bsmodal-body .np-auth-btn-primary{
		position: relative;
		margin-top: 35px;
		font-size: 14px;
	}
	.np-auth-bsmodal-body .np-auth-btn-primary::before {
		content: '';
		position: absolute;
		top: -21px;
		left: -16px;
		right: -16px;
		height: 1px;
		background: #DDDDDD;
	}
	.np-auth-bsmodal-title {
		font-size: 13px;
	}
	.np-auth-bsmodal-body { padding: 20px 16px; }
	.np-auth-bsmodal-body .np-auth-otp-cell { width: 40px; height: 46px; font-size: 16px !important; }
}
.modal.fade .modal-dialog {
	transform: translateY(100%);
	transition: transform 0.20s ease;
}
.modal.show .modal-dialog {
	transform: translateY(0);
}

@media (max-width: 575px) {
	.modal.fade .modal-dialog {
		margin: 0;
		min-height: 100%;
		display: flex;
		align-items: flex-end;
		max-width: none;
	}
}

#np-auth-channel-modal {
	transition: opacity 0.20s ease;
}
#np-auth-channel-modal .np-auth-modal-content {
	transform: translateY(100%);
	transition: transform 0.20s ease;
}
#np-auth-channel-modal:not([hidden]) .np-auth-modal-content {
	transform: translateY(0);
}


.modal-dialog,
#np-auth-channel-modal .np-auth-modal-content {
	-webkit-user-select: none;
	user-select: none;
}

@media (max-width: 575px) {
	.modal.fade .modal-dialog .modal-content::before,
	#np-auth-channel-modal .np-auth-modal-content::before {
		content: "";
		display: block;
		width: 36px;
		height: 4px;
		background: #d8d8d8;
		border-radius: 2px;
		margin: 6px auto 0;
	}
	#search-product-modal .modal-dialog .modal-content::before,
	#category-modal-mobile .modal-dialog .modal-content::before,
	#nwp-snapp-installment-modal .modal-dialog .modal-content::before
	{
		display: none;
	}
}

.np-auth-bsmodal-swipeable .np-auth-bsmodal-header {
	cursor: grab;
	touch-action: none;
}
.np-auth-bsmodal-swipeable .np-auth-bsmodal-header:active {
	cursor: grabbing;
}
#np-auth-channel-modal .np-auth-modal-top {
	touch-action: none;
}