/* Login page — phone/email tabs + country-code picker.
   Layered on top of main.css, reusing its gradient (#21d4fd -> #b721ff),
   card, and underline-input language instead of introducing a new style. */

/* ---------------------------------------------------------------- */
/* Tabs */

.login-tabs {
	position: relative;
	display: flex;
	border-bottom: 1px solid #e6e6e6;
	margin-bottom: 30px;
}

.login-tab {
	flex: 1;
	background: none;
	border: none;
	padding: 0 0 14px 0;
	font-family: Poppins-Medium, "BoonHome";
	font-size: 15px;
	color: #999999;
	cursor: pointer;
	transition: color 0.3s;
}

.login-tab:focus {
	outline: none;
}

.login-tab.active {
	color: #333333;
}

/* Driven purely by CSS (the .login-tabs[data-active] attribute Blade
   renders from $activeTab) — no JS position math needed since both
   tabs are always equal width (flex: 1). */
.login-tab-indicator {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 50%;
	height: 2px;
	background: linear-gradient(to right, #21d4fd, #b721ff);
	transition: transform 0.3s ease;
	transform: translateX(0%);
}

.login-tabs[data-active="email"] .login-tab-indicator {
	transform: translateX(100%);
}

.login-error {
	display: block;
	color: #e6465b;
	font-family: Poppins-Regular, "BoonHome";
	font-size: 12px;
	margin-top: -22px;
	margin-bottom: 22px;
}

.wrap-input100:has(+ .login-error) {
	margin-bottom: 6px;
}

.input100.is-invalid {
	color: #e6465b;
}

/* ---------------------------------------------------------------- */
/* Phone + country-code group */

.login-phone-group {
	display: flex;
	align-items: center;
}

.login-country-select {
	flex: 0 0 auto;
	border-right: 1px solid #e6e6e6;
	margin-right: 12px;
	padding-right: 8px;
}

.login-phone-input {
	flex: 1 1 auto;
}

/* select2 sizes its container from the native <select>'s rendered width
   (driven by its longest option, e.g. "Bosnia and Herzegovina"), which
   would otherwise swallow the whole flex row and squeeze the phone
   input to nothing — pin it instead. */
.login-country-select .select2-container {
	width: 96px !important;
}

.login-country-select .select2-selection--single {
	height: 45px !important;
	border: none !important;
	background: transparent !important;
	display: flex;
	align-items: center;
	padding: 0;
}

.login-country-select .select2-selection__rendered {
	padding: 0 !important;
	line-height: 45px !important;
	color: #555555 !important;
	font-family: Poppins-Regular, "BoonHome";
	font-size: 15px;
}

.login-country-select .select2-selection__arrow {
	height: 45px !important;
	right: -6px !important;
}

.login-country-select .select2-selection__arrow b {
	border-color: #999 transparent transparent transparent !important;
}

/* Select2 renders the dropdown at document root (not nested under
   .login-country-select), so it needs its own, wider rule — country
   names would otherwise be clipped to the ~92px trigger width. This
   login page only ever has one select2 widget, so targeting the
   generic classes is safe. */
.select2-dropdown {
	min-width: 280px !important;
	max-width: 90vw;
	font-family: Poppins-Regular, "BoonHome";
	font-size: 14px;
}

.select2-dropdown .select2-search__field {
	font-family: Poppins-Regular, "BoonHome";
	border: 1px solid #e6e6e6;
	border-radius: 4px;
	padding: 6px 8px;
}

.select2-results__option--highlighted {
	background: linear-gradient(to right, #21d4fd, #b721ff) !important;
}

/* ---------------------------------------------------------------- */
/* Responsive */

@media (max-width: 576px) {
	.login-tab {
		font-size: 13px;
	}

	.login-country-select .select2-container {
		width: 78px !important;
	}

	.select2-dropdown {
		min-width: 240px !important;
	}
}