/**
 * mod_mani_login_register — complete rebuild (2026 redesign)
 *
 * This is now the ONLY stylesheet the module loads. style-ltr.css and
 * style-rtl.css are no longer enqueued, so there is nothing left for these
 * rules to collide with — no !important needed anywhere in this file.
 * Written with CSS logical properties so one file serves both RTL and LTR.
 */

/* ---------- Header trigger icon (desktop/mobile) ---------- */
.mani_popuploginsms .desktop_btn { display: inline-flex; }
.mani_popuploginsms .mobile_btn { display: none; }
@media (max-width: 991.98px) {
	.mani_popuploginsms .desktop_btn { display: none; }
	.mani_popuploginsms .mobile_btn { display: inline-flex; }
}
.mani_popuploginsms .usriconlogdin {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: 38px;
	height: 38px;
	justify-content: center;
	position: relative;
	text-decoration: none;
	transition: background-color .15s ease;
}
.mani_popuploginsms .usriconlogdin:hover { background-color: rgba(255,255,255,0.12); }
.mani_popuploginsms .usriconlogdin i { font-size: 18px; }
.mani_popuploginsms .usriconlogdin.via_text { width: auto; padding-inline: 12px; border-radius: 20px; }
.mani_popuploginsms .login-big-text { display: flex; flex-direction: column; line-height: 1.2; font-size: 11px; text-align: start; }
.mani_popuploginsms .mobile_text { font-size: 12px; margin-inline-start: 4px; }
.mani_popuploginsms .login-tooltip {
	position: absolute; bottom: -30px; inset-inline-start: 50%; transform: translateX(-50%);
	background: #1a1a1a; color: #fff; font-size: 11px; padding: 4px 10px; border-radius: 6px;
	white-space: nowrap; transition: opacity .3s ease, visibility .3s ease;
}

/* ---------- Modal frame ---------- */
.ml-modal .modal-content { border-radius: 16px; overflow: hidden; border: none; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
.ml-modal.ml-modal-wide .modal-dialog { max-width: 600px; }
.ml-modal.ml-modal-narrow .modal-dialog { max-width: 360px; }

#div-forms { position: relative; --ml-pattern: url(../img/bg.png); }
#div-forms > form { width: 100%; }

.modal_pop_content {
	position: relative;
	padding: 18px 24px 22px;
	background-image: var(--ml-pattern);
	background-repeat: repeat;
	background-position: 0 260px;
}

/* Header row: close button + title, guaranteed same row, guaranteed alignment */
.ml-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
}
.ml-close {
	position: relative; /* no longer absolutely positioned — it's a normal flex item now, so it can never drift */
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: #f1f1f1;
	background-size: 12px;
	opacity: 1;
	margin: 0;
}
.ml-close:hover { background-color: #e2e2e2; }
.ml-header-spacer { flex: 0 0 28px; }
.ml-header .title {
	flex: 1 1 auto;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	color: #1a1a1a;
}
.subtitle { font-size: 12.5px; color: #718096; text-align: center; margin: 0 0 18px; font-weight: normal; }

.form_box { display: flex; flex-direction: column; gap: 12px; }
.ml-field-row { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 992px) {
	.ml-modal-wide .ml-field-row { flex-direction: row; }
	.ml-modal-wide .ml-field-row > .form-group { flex: 1 1 0; min-width: 0; }
}
#mobile_content, #email_content { display: none; }
.form_box .form-group { margin: 0; }
.form_box .form-control-label { font-size: 12.5px; color: #495057; margin-bottom: 5px; display: block; }
.form_box .input-group-text { background: #f8f9fa; border-inline-end: none; }
.form_box .input-group > .form-control { border-inline-start: none; }
.ml-field-icon { color: #adb5bd; font-size: 14px; }
.ml-toggle-eye {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	flex: 0 0 auto;
	color: #adb5bd;
	cursor: pointer;
	border: 1px solid #dee2e6;
	border-inline-start: none;
	border-start-end-radius: 8px;
	border-end-end-radius: 8px;
}
.ml-toggle-eye:hover { color: #495057; }
.ml-field-hint { font-size: 11px; color: #adb5bd; font-weight: normal; }
.ml-submit-btn:disabled { opacity: 0.85; cursor: default; }
.ml-btn-dots { display: inline-flex; align-items: center; gap: 4px; height: 1em; }
.ml-btn-dots span {
	width: 6px; height: 6px; border-radius: 50%; background: currentColor;
	display: inline-block; animation: ml-dot-bounce 1.1s infinite ease-in-out both;
}
.ml-btn-dots span:nth-child(1) { animation-delay: -0.24s; }
.ml-btn-dots span:nth-child(2) { animation-delay: -0.12s; }
@keyframes ml-dot-bounce {
	0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
	40% { transform: scale(1); opacity: 1; }
}

.waiting { font-size: 12.5px; color: #718096; padding: 6px 0; text-align: center; }
.mt { margin-top: 4px; }

/* ---------- Toggle (mobile / email tabs) ---------- */
.ml-toggle-label { font-size: 12.5px; color: #718096; margin: 0 0 8px; }
.wrapper { display: flex; gap: 8px; margin-bottom: 18px; }
.wrapper input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.wrapper .option {
	flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 6px;
	padding: 10px 14px; border: 1.5px solid #dee2e6; border-radius: 8px; cursor: pointer;
	font-size: 13px; font-weight: 500; color: #495057; transition: all .15s ease;
}
.wrapper .option .ml-check-on { display: none; }
.wrapper .option .ml-check-off { color: #adb5bd; font-size: 16px; }
#mobile:checked ~ .mobile .ml-check-on,
#email:checked ~ .email .ml-check-on { display: inline; font-size: 16px; }
#mobile:checked ~ .mobile .ml-check-off,
#email:checked ~ .email .ml-check-off { display: none; }

/* ---------- Image side panel ---------- */
.ml-modal .image {
	flex: 0 0 auto;
	width: 300px;
	background-size: cover;
	background-position: center;
	position: relative;
}
.ml-modal .shape { position: absolute; inset-block-start: 0; inset-inline-start: -1px; color: rgba(255,255,255,0.15); width: 60px; height: 100%; }
@media (max-width: 991.98px) {
	.ml-modal .image { display: none; }
}

/* ---------- Welcome modal ---------- */
.welcome-modal .modal-content { border-radius: 16px; border: none; }
.welcome-modal .bi-check2-circle { font-size: 48px; color: #198754; margin-bottom: 10px; display: block; }

/* ---------- Buttons / links ---------- */
.ml-submit-btn { height: 40px; font-size: 13.5px; letter-spacing: 0.2px; border-radius: 8px; }
.ml-inline-link, .ml-back-link {
	font-size: 12.5px; font-weight: 500; text-decoration: none;
	display: inline-flex; align-items: center; gap: 4px;
	background: none; border: none; padding: 0; color: #0d6efd;
}
.ml-inline-link .bi, .ml-back-link .bi { font-size: 13px; }

/* ---------- OTP verification code — six separate boxes ---------- */
.ml-otp-row { display: flex; justify-content: space-between; gap: 6px; direction: ltr; margin-bottom: 4px; }
.ml-otp-box {
	width: 100%; max-width: 44px; height: 46px;
	text-align: center; font-size: 18px; font-weight: 600; padding: 0;
	border: 1px solid #dee2e6; border-radius: 8px;
}
.ml-otp-box:focus { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 2px rgba(13,110,253,0.15); }

.ml-resend-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 6px; }
.ml-timer { display: inline-flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 600; color: #495057; font-variant-numeric: tabular-nums; }
.ml-resend-btn { width: 100%; border-radius: 8px; }

/* ---------- Alerts (compact) ---------- */
.mani_popuploginsms .alert { font-size: 12.5px; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; }