/**
 * Crystal mobile drawer: frosted panel, crescent header, flat items.
 * Loaded only when masplus_mobile_menu_style = crystal.
 */

@media (max-width: 860px) {
	body.mp-mobile-menu-crystal .mp-menu-btn {
		transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
	}

	body.mp-mobile-menu-crystal .mp-menu-btn:hover,
	body.mp-mobile-menu-crystal .mp-menu-btn:focus-visible {
		transform: scale(1.05);
		border-color: color-mix(in srgb, var(--mp-primary) 40%, var(--mp-border));
		box-shadow: 0 8px 20px color-mix(in srgb, var(--mp-primary) 16%, transparent);
	}

	body.mp-mobile-menu-crystal .mp-drawer-backdrop {
		background: color-mix(in srgb, var(--mp-secondary) 16%, rgba(0, 0, 0, 0.08));
		-webkit-backdrop-filter: blur(22px) saturate(1.25);
		backdrop-filter: blur(22px) saturate(1.25);
		transition: opacity 0.45s ease, visibility 0.45s ease;
	}

	body.mp-mobile-menu-crystal .mp-drawer {
		inset: 0 0 0 auto;
		width: min(360px, 88vw);
		overflow: hidden;
		background: color-mix(in srgb, var(--mp-surface, var(--mp-white)) 38%, transparent);
		border: 0;
		border-radius: 28px 0 0 28px;
		box-shadow: -18px 0 48px color-mix(in srgb, var(--mp-secondary) 22%, transparent);
		-webkit-backdrop-filter: blur(40px) saturate(1.55);
		backdrop-filter: blur(40px) saturate(1.55);
		transform: translateX(110%);
		opacity: 1;
		visibility: hidden;
		pointer-events: none;
		transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.52s;
	}

	body.mp-mobile-menu-crystal .mp-drawer.is-open {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
	}

	body.mp-mobile-menu-crystal .mp-drawer.is-open.is-closing {
		transform: translateX(110%);
		pointer-events: none;
	}

	body.mp-mobile-menu-crystal .mp-drawer__head {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 10px;
		padding: 22px 20px 46px;
		border-bottom: 0;
		text-align: center;
		background: var(--mp-secondary);
		color: var(--mp-on-secondary, #fff);
		overflow: visible;
	}

	body.mp-mobile-menu-crystal .mp-drawer__head::after {
		content: "";
		position: absolute;
		left: -12%;
		right: -12%;
		bottom: -34px;
		height: 68px;
		background: var(--mp-secondary);
		border-radius: 0 0 50% 50%;
		pointer-events: none;
	}

	body.mp-mobile-menu-crystal .mp-drawer__close {
		position: absolute;
		top: 14px;
		inset-inline-end: 14px;
		inset-inline-start: auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		border: 0;
		border-radius: 999px;
		background: color-mix(in srgb, #fff 14%, transparent);
		color: var(--mp-on-secondary, #fff);
		z-index: 3;
		transition: background 0.2s ease, transform 0.2s ease;
	}

	body.mp-mobile-menu-crystal .mp-drawer__close:hover,
	body.mp-mobile-menu-crystal .mp-drawer__close:focus-visible {
		background: color-mix(in srgb, #fff 26%, transparent);
		transform: scale(1.06);
		color: var(--mp-on-secondary, #fff);
	}

	body.mp-mobile-menu-crystal .mp-drawer__brand {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		max-width: calc(100% - 24px);
		margin-top: 8px;
		padding: 0;
		background: none;
		border: 0;
		color: var(--mp-on-secondary, #fff);
		text-decoration: none;
	}

	body.mp-mobile-menu-crystal .mp-drawer__brand:hover,
	body.mp-mobile-menu-crystal .mp-drawer__brand:focus-visible {
		background: none;
		transform: none;
		color: var(--mp-on-secondary, #fff);
		opacity: 0.88;
	}

	body.mp-mobile-menu-crystal .mp-drawer__logo {
		display: block;
		overflow: visible;
		line-height: 0;
		max-width: 100%;
	}

	body.mp-mobile-menu-crystal .mp-drawer__logo-img,
	body.mp-mobile-menu-crystal .mp-drawer__logo img,
	body.mp-mobile-menu-crystal .mp-drawer__logo .custom-logo,
	body.mp-mobile-menu-crystal .mp-drawer__logo .custom-logo-link img {
		display: block;
		height: auto !important;
		width: auto !important;
		max-height: 56px !important;
		max-width: min(220px, 72vw) !important;
		margin: 0 auto !important;
		object-fit: contain;
		object-position: center;
	}

	body.mp-mobile-menu-crystal .mp-drawer__name {
		font-size: 1.15rem;
		font-weight: 800;
		color: var(--mp-on-secondary, #fff);
		white-space: normal;
		text-align: center;
	}

	body.mp-mobile-menu-crystal .mp-drawer__body {
		position: relative;
		z-index: 1;
		flex: 1 1 auto;
		padding: 42px 16px 28px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	body.mp-mobile-menu-crystal .mp-mobile-menu {
		display: flex;
		flex-direction: column;
		gap: 4px;
		max-width: none;
		margin: 0;
	}

	body.mp-mobile-menu-crystal .mp-mobile-menu > li {
		border-top: 0;
		opacity: 0;
		transform: translateX(22px);
	}

	body.mp-mobile-menu-crystal .mp-drawer.is-open:not(.is-closing) .mp-mobile-menu > li {
		animation: mp-crystal-item-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
	}

	body.mp-mobile-menu-crystal .mp-drawer.is-open:not(.is-closing) .mp-mobile-menu > li:nth-child(1) { animation-delay: 0.08s; }
	body.mp-mobile-menu-crystal .mp-drawer.is-open:not(.is-closing) .mp-mobile-menu > li:nth-child(2) { animation-delay: 0.12s; }
	body.mp-mobile-menu-crystal .mp-drawer.is-open:not(.is-closing) .mp-mobile-menu > li:nth-child(3) { animation-delay: 0.16s; }
	body.mp-mobile-menu-crystal .mp-drawer.is-open:not(.is-closing) .mp-mobile-menu > li:nth-child(4) { animation-delay: 0.2s; }
	body.mp-mobile-menu-crystal .mp-drawer.is-open:not(.is-closing) .mp-mobile-menu > li:nth-child(5) { animation-delay: 0.24s; }
	body.mp-mobile-menu-crystal .mp-drawer.is-open:not(.is-closing) .mp-mobile-menu > li:nth-child(6) { animation-delay: 0.28s; }
	body.mp-mobile-menu-crystal .mp-drawer.is-open:not(.is-closing) .mp-mobile-menu > li:nth-child(7) { animation-delay: 0.32s; }
	body.mp-mobile-menu-crystal .mp-drawer.is-open:not(.is-closing) .mp-mobile-menu > li:nth-child(8) { animation-delay: 0.36s; }
	body.mp-mobile-menu-crystal .mp-drawer.is-open:not(.is-closing) .mp-mobile-menu > li:nth-child(n + 9) { animation-delay: 0.4s; }

	body.mp-mobile-menu-crystal .mp-mobile-menu a {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 12px 14px;
		border: 0;
		border-radius: 999px;
		background: transparent;
		box-shadow: none;
		color: var(--mp-heading, var(--mp-secondary));
		font-weight: 700;
		transition: background 0.2s ease, color 0.2s ease;
	}

	body.mp-mobile-menu-crystal .mp-mobile-menu a:hover,
	body.mp-mobile-menu-crystal .mp-mobile-menu a:focus-visible,
	body.mp-mobile-menu-crystal .mp-mobile-menu .current-menu-item > a {
		background: color-mix(in srgb, var(--mp-primary) 12%, var(--mp-bg, #f4f5f7));
		border: 0;
		box-shadow: none;
		color: var(--mp-primary);
		transform: none;
	}

	body.mp-mobile-menu-crystal .mp-sub-toggle {
		width: 40px;
		height: 40px;
		margin: 0;
		border: 0;
		border-radius: 999px;
		background: transparent;
		color: var(--mp-muted);
		transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
	}

	body.mp-mobile-menu-crystal .mp-sub-toggle:hover,
	body.mp-mobile-menu-crystal .mp-sub-toggle:focus-visible {
		background: color-mix(in srgb, var(--mp-primary) 10%, transparent);
		color: var(--mp-primary);
		transform: none;
	}

	body.mp-mobile-menu-crystal .mp-mobile-menu .sub-menu {
		margin: 0;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-sizing: border-box;
	}

	body.mp-mobile-menu-crystal .mp-mobile-menu .sub-menu a {
		padding: 10px 14px;
		padding-inline-start: 28px;
		font-size: 0.92rem;
		font-weight: 500;
		color: var(--mp-muted);
	}

	body.mp-mobile-menu-crystal .mp-mobile-menu .sub-menu a:hover,
	body.mp-mobile-menu-crystal .mp-mobile-menu .sub-menu a:focus-visible,
	body.mp-mobile-menu-crystal .mp-mobile-menu .sub-menu .current-menu-item > a {
		background: color-mix(in srgb, var(--mp-primary) 10%, transparent);
		color: var(--mp-primary);
	}

	body.mp-mobile-menu-crystal .mp-mobile-menu .sub-menu .sub-menu {
		margin: 0;
		margin-inline-start: 12px;
		padding: 0;
		background: transparent;
	}

	body.admin-bar.mp-mobile-menu-crystal .mp-drawer {
		top: 46px;
	}
}

@keyframes mp-crystal-item-in {
	from {
		opacity: 0;
		transform: translateX(22px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
	body.mp-mobile-menu-crystal .mp-drawer,
	body.mp-mobile-menu-crystal .mp-drawer-backdrop,
	body.mp-mobile-menu-crystal .mp-menu-btn,
	body.mp-mobile-menu-crystal .mp-mobile-menu a,
	body.mp-mobile-menu-crystal .mp-sub-toggle {
		transition-duration: 0.01ms !important;
		animation: none !important;
	}

	body.mp-mobile-menu-crystal .mp-drawer {
		transform: translateX(110%);
	}

	body.mp-mobile-menu-crystal .mp-drawer.is-open {
		transform: translateX(0);
	}

	body.mp-mobile-menu-crystal .mp-mobile-menu > li,
	body.mp-mobile-menu-crystal .mp-drawer.is-open:not(.is-closing) .mp-mobile-menu > li {
		opacity: 1;
		transform: none;
		animation: none;
	}
}