/* Compact guest access menu for mobile headers. */
.obraymaq-user-menu__desktop { display: flex; align-items: center; gap: 10px; }
.obraymaq-user-menu__mobile { display: none; }

@media (max-width: 767px) {
	.obraymaq-user-menu.is-mobile-open { z-index: 11000; }
	.obraymaq-user-menu--guest .obraymaq-user-menu__desktop { display: none; }
	.obraymaq-user-menu--guest .obraymaq-user-menu__mobile { display: block; }

	.obraymaq-mobile-login-trigger {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		min-height: 44px;
		padding: 8px 12px;
		border: 1px solid #dbe3ec;
		border-radius: 12px;
		background: #fff;
		color: var(--om-navy);
		box-shadow: 0 3px 10px rgba(16, 24, 40, .07);
		font-size: 14px;
		font-weight: 750;
		line-height: 1;
	}

	.obraymaq-mobile-login-trigger > .obraymaq-icon:first-child { width: 21px; height: 21px; color: var(--om-primary); }
	.obraymaq-mobile-login-trigger > .obraymaq-icon:last-child { width: 15px; height: 15px; color: #98a2b3; transition: transform .18s ease; }
	.obraymaq-user-menu__mobile[open] > .obraymaq-mobile-login-trigger { border-color: #b2ccff; box-shadow: 0 0 0 3px rgba(11, 79, 156, .1); }
	.obraymaq-user-menu__mobile[open] > .obraymaq-mobile-login-trigger > .obraymaq-icon:last-child { transform: rotate(180deg); }

	.obraymaq-user-menu__backdrop {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 10000;
		width: 100vw;
		height: 100vh;
		margin: 0;
		padding: 0;
		border: 0;
		background: rgba(9, 18, 34, .48);
		backdrop-filter: blur(1.5px);
	}

	.obraymaq-user-menu__mobile[open] > .obraymaq-user-menu__backdrop { display: block; }

	.obraymaq-user-menu--guest .obraymaq-mobile-login-panel {
		display: none;
		position: fixed;
		top: var(--om-user-menu-top, 76px);
		right: var(--om-user-menu-right, 12px);
		left: auto;
		z-index: 10001;
		width: min(390px, calc(100vw - 24px));
		max-width: 390px;
		max-height: calc(100dvh - var(--om-user-menu-top, 76px) - 12px);
		margin: 0;
		padding: 12px;
		overflow-y: auto;
		overscroll-behavior: contain;
		border: 1px solid rgba(16, 24, 40, .08);
		border-radius: 18px;
		background: #fff;
		box-shadow: 0 24px 60px rgba(9, 18, 34, .24);
	}

	.obraymaq-user-menu--guest .obraymaq-user-menu__mobile[open] > .obraymaq-mobile-login-panel { display: block; }

	.obraymaq-mobile-login-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 5px 4px 13px 8px; border-bottom: 1px solid #eaecf0; }
	.obraymaq-mobile-login-panel__head strong,
	.obraymaq-mobile-login-panel__head small { display: block; }
	.obraymaq-mobile-login-panel__head strong { color: var(--om-navy); font-size: 16px; }
	.obraymaq-mobile-login-panel__head small { margin-top: 4px; color: var(--om-muted); font-size: 12px; }

	.obraymaq-mobile-login-panel__close {
		display: grid;
		flex: 0 0 auto;
		width: 38px;
		height: 38px;
		place-items: center;
		padding: 0;
		border: 1px solid #d0d5dd;
		border-radius: 50%;
		background: #fff;
		color: var(--om-ink);
		font-size: 24px;
		line-height: 1;
		cursor: pointer;
	}

	.obraymaq-mobile-login-panel__close:hover,
	.obraymaq-mobile-login-panel__close:focus-visible { border-color: #f36b21; color: #d94e08; outline: 3px solid rgba(243, 107, 33, .16); }

	.obraymaq-mobile-login-option {
		display: grid;
		grid-template-columns: 42px minmax(0, 1fr) 18px;
		align-items: center;
		gap: 11px;
		min-height: 66px;
		margin-top: 7px;
		padding: 10px;
		border: 1px solid transparent;
		border-radius: 12px;
		color: var(--om-ink);
		text-decoration: none;
	}

	.obraymaq-mobile-login-option:hover,
	.obraymaq-mobile-login-option:focus-visible { border-color: #dbe8f5; background: #f4f8fc; color: var(--om-primary); outline: 0; }
	.obraymaq-mobile-login-option .obraymaq-dropdown__icon { width: 42px; height: 42px; }
	.obraymaq-mobile-login-option > span:nth-child(2) { min-width: 0; }
	.obraymaq-mobile-login-option strong,
	.obraymaq-mobile-login-option small { display: block; }
	.obraymaq-mobile-login-option strong { color: var(--om-navy); font-size: 14px; line-height: 1.25; }
	.obraymaq-mobile-login-option small { margin-top: 3px; color: var(--om-muted); font-size: 12px; line-height: 1.25; }
	.obraymaq-mobile-login-option > .obraymaq-icon { width: 17px; color: #98a2b3; }
	.obraymaq-mobile-login-option--primary { margin-top: 10px; border-color: #d8e6f5; background: #f5f9fd; }
	.obraymaq-mobile-login-option--primary .obraymaq-dropdown__icon { background: var(--om-primary); color: #fff; }

	.obraymaq-mobile-login-panel__divider { display: flex; align-items: center; gap: 10px; margin: 12px 4px 5px; color: var(--om-muted); font-size: 11px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
	.obraymaq-mobile-login-panel__divider::after { content: ""; flex: 1; height: 1px; background: #eaecf0; }
}

@media (prefers-reduced-motion: reduce) {
	.obraymaq-mobile-login-trigger > .obraymaq-icon:last-child { transition: none; }
}