/**
 * Mobile Menu Overlay Styles v4.4.1
 * FIX: Desktop hide + search/hamburger handlers
 */

/* ── DESKTOP HIDE (>768px) ── */
@media (min-width: 769px) {
	.mobile-menu-overlay,
	#mobileSearchOverlay {
		display: none !important;
	}
}

/**
 * Mobile Menu Overlay Styles v4.4.0
 * Glass design z subtelnym efektem i firmowymi kolorami
 */

:root {
	--menu-bg: #2B1108;
	--menu-text-primary: #E8D5C4;
	--menu-text-secondary: #A89085;
	--menu-icon-stroke: #E8D5C4;
	--menu-divider: rgba(255, 255, 255, 0.1);
	--menu-hover-bg: rgba(255, 255, 255, 0.05);
	--menu-active-bg: rgba(255, 255, 255, 0.08);
	--menu-accent: #EA580C;
	--menu-focus-outline: #EA580C;
	--menu-font-size: clamp(18px, 4vw, 20px);
	--transition-fast: 200ms;
	--transition-normal: 300ms;
	--easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
	/* Overlay Container */
	.mobile-menu-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99999;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transition: visibility 0s linear var(--transition-normal), opacity var(--transition-normal) var(--easing-standard);
	}
	
	.mobile-menu-overlay.is-open {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transition-delay: 0s;
	}
	
	/* Backdrop */
	.menu-backdrop {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		pointer-events: none; /* Domyślnie nieaktywny */
		transition: opacity 0.3s ease, pointer-events 0s 0.4s; /* Aktywuje się po 400ms */
		opacity: 0;
		transition: opacity var(--transition-normal) var(--easing-standard);
	}
	
	.mobile-menu-overlay.is-open .menu-backdrop {
		opacity: 1;
		pointer-events: all; /* Aktywny gdy menu otwarte */
	}
	
	/* Menu Panel */
	.menu-panel {
		position: absolute;
		top: 0;
		right: 0;
		width: 85%;
		max-width: 380px;
		height: 100%;
		background: var(--menu-bg);
		transform: translateX(100%);
		transition: transform var(--transition-normal) var(--easing-standard);
		display: flex;
		flex-direction: column;
		padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	}
	
	.mobile-menu-overlay.is-open .menu-panel {
		transform: translateX(0);
	}
	
	/* Close Button - BEZ ZMIAN */
	.menu-close {
		position: absolute;
		top: 20px;
		left: 20px;
		width: 44px;
		height: 44px;
		background: transparent;
		border: 2px solid var(--menu-icon-stroke);
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--menu-icon-stroke);
		cursor: pointer;
		padding: 0;
		z-index: 10;
		transition: background var(--transition-fast) var(--easing-standard);
	}
	
	.menu-close:hover {
		background: var(--menu-hover-bg);
	}
	
	.menu-close:active {
		background: var(--menu-active-bg);
	}
	
	/* Logo - BEZ ZMIAN */
	.menu-logo {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30px 20px 20px;
		margin-top: 50px;
	}
	
	.menu-logo .logo-mobile {
		height: 120px;
		width: auto;
		max-width: 250px;
	}
	
	/* Menu List & Items */
	.menu-content {
		flex: 1;
		overflow-y: auto;
		margin-top: 20px;
		-webkit-overflow-scrolling: touch;
		display: flex;
		flex-direction: column;
	}
	
	.menu-content::-webkit-scrollbar {
		width: 4px;
	}
	
	.menu-content::-webkit-scrollbar-track {
		background: transparent;
	}
	
	.menu-content::-webkit-scrollbar-thumb {
		background: var(--menu-divider);
		border-radius: 2px;
	}
	
	/* CRITICAL: Reset li:before z / dla WSZYSTKICH li w mobile menu */
	.mobile-menu-overlay .mobile-menu-list,
	.mobile-menu-overlay .mobile-menu-list li,
	.mobile-menu-overlay .mobile-menu-list ul,
	.mobile-menu-overlay .dropdown-menu,
	.mobile-menu-overlay .dropdown-menu li,
	.mobile-menu-overlay .dropdown-menu ul,
	.mobile-menu-overlay .dropdown-menu ul li,
	.mobile-menu-overlay .mobile-submenu,
	.mobile-menu-overlay .mobile-submenu li {
		list-style: none !important;
		position: relative;
	}
	
	.mobile-menu-overlay .mobile-menu-list li:before,
	.mobile-menu-overlay .mobile-menu-list ul li:before,
	.mobile-menu-overlay .dropdown-menu li:before,
	.mobile-menu-overlay .dropdown-menu ul li:before,
	.mobile-menu-overlay .mobile-submenu li:before {
		content: none !important;
		display: none !important;
	}
	
	/* Main Menu List */
	.mobile-menu-list {
		padding: 0 20px;
		margin: 0;
		flex: 1;
	}
	
	/* Menu Items - zmniejszony padding */
	.mobile-menu-list > li.menu-item {
		border-bottom: 1px solid var(--menu-divider);
		margin: 0;
		padding: 0;
	}
	
	.mobile-menu-list > li.menu-item:first-child {
		border-top: 1px solid var(--menu-divider);
	}
	
	/* Menu Links - zmniejszony padding do py-3 */
	.mobile-menu-list > li.menu-item > a {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		padding: 12px 20px !important;
		min-height: 48px;
		color: var(--menu-text-primary) !important;
		font-size: var(--menu-font-size) !important;
		line-height: 1.2 !important;
		text-transform: uppercase !important;
		text-decoration: none !important;
		letter-spacing: 0.05em;
		transition: all 100ms var(--easing-standard);
		background: transparent;
	}
	
	.mobile-menu-list > li.menu-item > a:hover {
		color: var(--menu-accent) !important;
		background: transparent !important;
	}
	
	.mobile-menu-list > li.menu-item > a:active {
		background: var(--menu-active-bg) !important;
	}
	
	.mobile-menu-list > li.menu-item.current-menu-item > a,
	.mobile-menu-list > li.menu-item.active > a {
		color: var(--menu-accent) !important;
	}
	
	/* Chevron dla WSZYSTKICH pozycji menu - dodawany przez JS */
	.menu-chevron {
		width: 20px;
		height: 20px;
		margin-left: auto;
		flex-shrink: 0;
		opacity: 0.6;
		transition: transform var(--transition-fast) var(--easing-standard), opacity var(--transition-fast);
	}
	
	.menu-chevron path {
		stroke: currentColor;
	}
	
	/* Chevron obraca się TYLKO dla otwartego submenu */
	.mobile-menu-list > li.menu-item.open > a .menu-chevron,
	.mobile-menu-list > li.menu-item.open-responsive > a .menu-chevron {
		transform: rotate(90deg);
		opacity: 1;
	}
	
	/* Highlight chevron on hover */
	.mobile-menu-list > li.menu-item > a:hover .menu-chevron {
		opacity: 1;
	}
	
	/* Submenu Items Highlight */
	.mobile-menu-list > li.menu-item.submenu-open > a {
		background-color: rgb(171 239 255 / 20%) !important;
		box-shadow: 0 0 0 4px rgb(171 239 255 / 20%);
	}
	
	/* Dropdown Menu (submenu) - wspiera <div> i <ul> */
	/* Kontener submenu - może być <div class="dropdown-menu"> lub <ul class="mobile-submenu"> */
	.mobile-menu-list .dropdown-menu,
	.mobile-menu-list .mobile-submenu {
		list-style: none !important;
		padding: 0 !important;
		margin: 0 !important;
		background: rgba(0, 0, 0, 0.15);
		display: none !important;
		position: static !important;
		float: none !important;
		border: none !important;
		box-shadow: none !important;
	}
	
	/* <ul> wewnątrz <div class="dropdown-menu"> */
	.mobile-menu-list .dropdown-menu > ul {
		list-style: none !important;
		padding: 0 !important;
		margin: 0 !important;
		background: transparent !important;
	}
	
	/* Pokaż submenu gdy parent ma klasę .open lub .open-responsive */
	.mobile-menu-list li.menu-item.open > .dropdown-menu,
	.mobile-menu-list li.menu-item.open-responsive > .dropdown-menu,
	.mobile-menu-list li.dropdown.open > .dropdown-menu,
	.mobile-menu-list li.dropdown.open-responsive > .dropdown-menu,
	.mobile-menu-list li.purple.open > .dropdown-menu,
	.mobile-menu-list li.purple.open-responsive > .dropdown-menu,
	.mobile-menu-list li.menu-item.open > .mobile-submenu,
	.mobile-menu-list li.menu-item.open-responsive > .mobile-submenu {
		display: block !important;
	}
	
	/* Submenu Links - dla <ul> bezpośrednio lub <ul> wewnątrz <div> */
	.mobile-menu-list .dropdown-menu li.menu-item a,
	.mobile-menu-list .dropdown-menu ul li.menu-item a,
	.mobile-menu-list .dropdown-menu > ul > li a,
	.mobile-menu-list .mobile-submenu li.menu-item a {
		padding: 12px 20px 12px 44px !important;
		font-size: 16px !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		color: var(--menu-text-secondary) !important;
		display: block !important;
		text-decoration: none !important;
		transition: all var(--transition-fast);
	}
	
	.mobile-menu-list .dropdown-menu li.menu-item a:hover,
	.mobile-menu-list .dropdown-menu ul li.menu-item a:hover,
	.mobile-menu-list .dropdown-menu > ul > li a:hover,
	.mobile-menu-list .mobile-submenu li.menu-item a:hover {
		color: var(--menu-text-primary) !important;
		background: var(--menu-hover-bg) !important;
	}
	
	/* Hide dropdown widgets in mobile */
	.mobile-menu-overlay .dropdown-special-offers,
	.mobile-menu-overlay .offers-grid {
		display: none !important;
	}
	
	/* Footer labels - NOWE */
	.menu-footer-labels {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px 12px;
		margin-top: auto;
	}
	
	.menu-footer-labels span {
		font-size: 10px;
		color: rgba(255, 255, 255, 0.4);
		text-transform: uppercase;
		letter-spacing: 0.1em;
		font-weight: 400;
	}
	
	/* Phone Button Container */
	.mobile-menu-list > li.menu-item.phone-cta {
		border-bottom: none !important;
		border-top: none !important;
		margin-top: 0;
		padding: 0 20px 20px !important;
	}
	
	/* Phone Button - frosted glass + wielowarstwowy radial gradient */
	.phone-button {
		display: flex;
		align-items: center;
		position: relative;
		width: 100%;
		padding: 16px 20px;
		background: 
			radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.12) 0%, transparent 40%),
			radial-gradient(circle at 80% 80%, rgba(234, 88, 12, 0.08) 0%, transparent 50%),
			radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 40%),
			radial-gradient(ellipse at 50% 100%, rgba(234, 88, 12, 0.03) 0%, transparent 60%),
			rgba(255, 255, 255, 0.04);
		backdrop-filter: blur(24px) saturate(150%);
		-webkit-backdrop-filter: blur(24px) saturate(150%);
		border: 1px solid rgba(255, 255, 255, 0.12);
		border-top-color: rgba(255, 255, 255, 0.2);
		border-bottom-color: rgba(255, 255, 255, 0.05);
		border-radius: 16px;
		color: #FFFFFF !important;
		text-decoration: none !important;
		box-shadow: 
			0 4px 24px -1px rgba(0, 0, 0, 0.2),
			0 2px 8px rgba(0, 0, 0, 0.1),
			inset 0 1px 0 rgba(255, 255, 255, 0.15),
			inset 0 -1px 0 rgba(0, 0, 0, 0.1);
		transition: all var(--transition-fast) cubic-bezier(0.4, 0, 0.2, 1);
		animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
		overflow: hidden;
	}
	
	@keyframes pulse-ring {
		0% { transform: scale(0.98); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4), 0 4px 24px -1px rgba(0, 0, 0, 0.2); }
		70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(249, 115, 22, 0), 0 4px 24px -1px rgba(0, 0, 0, 0.2); }
		100% { transform: scale(0.98); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0), 0 4px 24px -1px rgba(0, 0, 0, 0.2); }
	}
	
	.phone-button:hover {
		background: 
			radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.18) 0%, transparent 40%),
			radial-gradient(circle at 80% 80%, rgba(234, 88, 12, 0.12) 0%, transparent 50%),
			radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.09) 0%, transparent 40%),
			radial-gradient(ellipse at 50% 100%, rgba(234, 88, 12, 0.05) 0%, transparent 60%),
			rgba(255, 255, 255, 0.07);
		border-top-color: rgba(255, 255, 255, 0.25);
		border-color: rgba(255, 255, 255, 0.18);
		transform: translateY(-1px);
		box-shadow: 
			0 6px 28px -1px rgba(0, 0, 0, 0.25),
			0 4px 12px rgba(0, 0, 0, 0.15),
			inset 0 1px 0 rgba(255, 255, 255, 0.2),
			inset 0 -1px 0 rgba(0, 0, 0, 0.1);
	}
	
	.phone-button:active {
		transform: translateY(0) scale(0.98);
	}
	
	/* Icon Wrapper - gradient */
	.phone-icon-wrapper {
		flex-shrink: 0;
		width: 44px;
		height: 44px;
		margin-right: 16px;
		border-radius: 12px;
		background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
		transition: transform var(--transition-fast) var(--easing-standard);
	}
	
	.phone-button:hover .phone-icon-wrapper {
		transform: scale(1.05);
	}
	
	.phone-icon-wrapper svg {
		width: 20px;
		height: 20px;
		color: #FFFFFF;
	}
	
	.phone-text-wrapper {
		display: flex;
		flex-direction: column;
		text-align: left;
		flex: 1;
	}
	
	.phone-label {
		font-size: 10px;
		text-transform: uppercase;
		letter-spacing: 0.15em;
		color: var(--menu-accent);
		font-weight: 700;
		margin-bottom: 2px;
		opacity: 1;
	}
	
	.phone-number {
		font-size: 18px;
		font-weight: 700;
		color: #FFFFFF;
		line-height: 1.2;
		letter-spacing: -0.02em;
	}
	
	.phone-arrow {
		margin-left: auto;
		color: rgba(255, 255, 255, 0.2);
		transition: all var(--transition-fast) var(--easing-standard);
		flex-shrink: 0;
	}
	
	.phone-button:hover .phone-arrow {
		color: var(--menu-accent);
		transform: translateX(2px);
	}
	
	.phone-arrow svg {
		width: 18px;
		height: 18px;
	}
}

body.menu-open {
	overflow: hidden !important;
	position: fixed !important;
	width: 100% !important;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
	.menu-panel,
	.menu-backdrop,
	.menu-close,
	.mobile-menu-list > li.menu-item > a,
	.phone-button {
		transition: none !important;
		animation: none !important;
	}
}

@media (prefers-contrast: high) {
	.menu-close,
	.mobile-menu-list > li.menu-item > a,
	.phone-button {
		outline: 2px solid currentColor;
	}
}