/* Header 4 login / register popover: iOS 26 glass sheet (desktop popover, mobile bottom sheet). */
.halim-header-4 .h4-auth-wrap { display: inline-block; position: relative; }
.halim-header-4 .h4-auth-wrap.is-open .h4-btn { color: #fff; background: #3a3a3a; }
.h4-auth {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1060;
	width: 420px;
	max-width: calc(100% - 32px);
	padding: 26px 26px 22px;
	color: #f5f5f7;
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Montserrat", sans-serif;
	text-align: left;
	background: rgba(44, 44, 46, .82);
	border-radius: 24px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 .5px rgba(255, 255, 255, .08), 0 24px 60px rgba(0, 0, 0, .55);
	-webkit-backdrop-filter: blur(30px) saturate(150%);
	backdrop-filter: blur(30px) saturate(150%);
	opacity: 0;
	transform: translate(-50%, -50%) scale(.94);
	transform-origin: center;
	transition: opacity .2s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
}
.h4-auth.is-in { opacity: 1; transform: translate(-50%, -50%); }
.h4-auth[hidden] { display: none; }
.h4-auth-grabber { display: none; }
.h4-auth-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 30px;
	height: 30px;
	padding: 0;
	color: rgba(235, 235, 245, .7);
	font-size: 19px;
	line-height: 30px;
	background: rgba(255, 255, 255, .12);
	border: 0;
	border-radius: 50%;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
	cursor: pointer;
}
.h4-auth-close:hover { color: #fff; background: rgba(255, 255, 255, .2); }

/* Segmented control */
.h4-auth-seg {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: 0 44px 20px 0;
	padding: 3px;
	background: rgba(255, 255, 255, .1);
	border-radius: 999px;
	box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .08);
}
.h4-auth-seg.is-hidden { display: none; }
.h4-auth-seg-thumb {
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 3px;
	width: calc(50% - 3px);
	background: rgba(255, 255, 255, .22);
	border-radius: 999px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 8px rgba(0, 0, 0, .3);
	transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.h4-auth-seg[data-active="1"] .h4-auth-seg-thumb { transform: translateX(100%); }
.h4-auth-seg [role="tab"] {
	position: relative;
	z-index: 1;
	height: 34px;
	padding: 0;
	color: rgba(235, 235, 245, .6);
	font-size: 14px;
	font-weight: 600;
	background: none;
	border: 0;
	cursor: pointer;
	transition: color .2s ease;
}
.h4-auth-seg [role="tab"].is-active { color: #fff; }

/* Panels */
.h4-auth-panel { display: none; margin: 0; }
.h4-auth-panel.is-active { display: block; }
.h4-auth-title { margin: 4px 0 16px; padding-right: 36px; color: #f5f5f7; font-size: 23px; font-weight: 700; letter-spacing: -.3px; }
.h4-auth-note { margin: 0 0 14px; color: rgba(235, 235, 245, .55); font-size: 13.5px; line-height: 1.45; }
.h4-auth-submit + .h4-auth-note { margin: 14px 0 0; text-align: center; }
.h4-auth-group { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.h4-auth-group input {
	display: block;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 18px;
	color: #f5f5f7;
	font-size: 16px;
	background: rgba(255, 255, 255, .08);
	border: 0;
	border-radius: 999px;
	outline: 0;
	box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .06);
	-webkit-appearance: none;
	transition: background-color .15s ease, box-shadow .15s ease;
}
.h4-auth-group input::placeholder { color: rgba(235, 235, 245, .35); }
.h4-auth-group input:focus,
.h4-auth-group input:focus-visible { background: rgba(255, 255, 255, .13); border: 0; outline: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .1); }
.h4-auth-group input:-webkit-autofill { -webkit-text-fill-color: #f5f5f7; -webkit-box-shadow: 0 0 0 1000px #3a3a3c inset; }
.h4-auth-captcha { display: flex; justify-content: center; margin-bottom: 10px; }
.h4-auth-status { margin: 0 0 8px; color: rgba(235, 235, 245, .6); font-size: 13px; line-height: 1.4; }
.h4-auth-status:empty { display: none; }
.h4-auth-status.is-error { color: #ff6961; }
.h4-auth-status.is-ok { color: #30d158; }
.h4-auth-submit {
	position: relative;
	display: block;
	width: 100%;
	height: 50px;
	padding: 0;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	background: linear-gradient(135deg, #25aae1 0%, #043ea5 100%);
	border: 0;
	border-radius: 999px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 6px 18px rgba(4, 62, 165, .35);
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}
.h4-auth-submit:hover { filter: brightness(1.08); }
.h4-auth-submit:active { transform: scale(.985); }
.h4-auth-submit:disabled { opacity: .6; cursor: default; }
.h4-auth-panel.is-busy .h4-auth-submit { color: transparent; }
.h4-auth-panel.is-busy .h4-auth-submit::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: h4-spin .7s linear infinite; }
@keyframes h4-spin { to { transform: rotate(360deg); } }
.h4-auth-link { display: block; width: 100%; margin-top: 12px; padding: 4px 0 0; color: rgba(235, 235, 245, .7); font-size: 14px; font-weight: 500; text-align: center; background: none; border: 0; cursor: pointer; }
.h4-auth-link:hover { color: #fff; text-decoration: underline; }
.h4-auth-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1059; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .25s ease; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.h4-auth-backdrop.is-in { opacity: 1; pointer-events: auto; }

/* Mobile: bottom sheet */
@media (max-width: 767px) {
	.halim-header-4 .h4-auth-wrap { position: static; }
	.h4-auth {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		max-width: none;
		max-height: 92vh;
		padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
		overflow-y: auto;
		border-radius: 26px 26px 0 0;
		transform: translateY(100%);
		transform-origin: bottom center;
		transition: opacity .2s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
	}
	.h4-auth.is-in { transform: none; }
	.h4-auth-grabber { display: block; width: 36px; height: 5px; margin: 0 auto 14px; background: rgba(255, 255, 255, .3); border-radius: 3px; }
	.h4-auth-close { top: 18px; }
	.h4-auth-title { font-size: 22px; }
}
@media (prefers-reduced-transparency: reduce) {
	.h4-auth { background: #2c2c2e; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
