/* ==================================================
   HEADER PANELS
   File: assets/css/header-panels.css
   Purpose:
   - Search modal.
   - Header search bar.
   - Header action panel.
   - Desktop header dimension lock.
   - Responsive tablet/mobile behavior.
================================================== */

/* ==================================================
   1. SEARCH OVERLAY / SEARCH MODAL
================================================== */

.ct-panel-overlay {
	background-color: rgba(0, 0, 0, 0.65);
}

#search-modal .ct-panel-inner {
	background-color: #ffffff !important;
	color: #111111 !important;
}

#search-modal input[type="search"],
#search-modal input[type="text"],
#search-modal input[type="email"] {
	background-color: #ffffff !important;
	color: #111111 !important;
	border-color: rgba(0, 0, 0, 0.1) !important;
}

#search-modal input:focus {
	border-color: #b80000 !important;
	box-shadow: 0 0 0 3px rgba(184, 0, 0, 0.15) !important;
}

#search-modal button,
#search-modal .button {
	background-color: #b80000 !important;
	color: #ffffff !important;
}

/* ==================================================
   2. HEADER ICONS / BUTTONS / FOCUS
================================================== */

.ct-header .ct-icon,
.ct-header .ct-icon svg,
.ct-header .ct-icon svg * {
	color: #111111 !important;
	fill: currentColor !important;
	stroke: currentColor !important;
}

.ct-header .ct-tooltip,
.ct-header .icon-label {
	color: #111111 !important;
}

.ct-header button,
.ct-header a[role="button"],
.ct-header [role="button"] {
	transition:
		color 0.18s ease,
		background-color 0.18s ease,
		border-color 0.18s ease;
}

.ct-header [data-id="search"] a,
.ct-header [data-id="search"] button,
.ct-header [data-id="account"] a,
.ct-header [data-id="cart"] .ct-icon-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	background: #ffffff;
}

.ct-header [data-id="search"] svg,
.ct-header [data-id="account"] svg,
.ct-header [data-id="cart"] svg {
	width: 20px;
	height: 20px;
	stroke: #1a1a1a !important;
}

.ct-header [data-id="search"] a:hover svg,
.ct-header [data-id="search"] button:hover svg,
.ct-header [data-id="account"] a:hover svg,
.ct-header [data-id="cart"] .ct-icon-container:hover svg {
	stroke: #b80000 !important;
}

.ct-header .wp-block-button__link,
.ct-header [class*="button"]:not(.menu-toggle):not(.ct-panel-trigger) {
	background-color: #b80000 !important;
	border-color: #8f0000 !important;
	color: #ffffff !important;
}

.blocksy-menu-toggle {
	background-color: #111111 !important;
	color: #ffffff !important;
}

.ct-header .ct-badge {
	min-width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #b80000 !important;
	color: #ffffff;
	font-size: 10px;
	line-height: 16px;
}

.ct-header a:focus,
.ct-header button:focus,
.ct-header [role="button"]:focus {
	outline: 2px solid #b80000;
	outline-offset: 2px;
}

/* ==================================================
   3. DESKTOP DRAWER FIX
================================================== */

@media (min-width: 1000px) {
	html body .ct-drawer-canvas,
	html body .ct-drawer-canvas[data-location],
	html body .ct-panel[data-panel*="mobile"],
	html body .ct-panel[data-panel*="offcanvas"],
	html body .ct-panel[data-behaviour="side"],
	html body .ct-panel-content,
	html body .ct-drawer-inner {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		pointer-events: none !important;
		width: 0 !important;
		height: 0 !important;
		max-width: 0 !important;
		max-height: 0 !important;
		overflow: hidden !important;
	}
}

/* ==================================================
   4. PREMIUM HEADER SEARCH + ACTIONS - BASE
================================================== */

.akj-header-tools-pro {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
}

.akj-header-search-pro {
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: 540px;
	height: 58px;
	border: 1px solid rgba(255, 0, 0, 0.75);
	border-radius: 18px;
	overflow: hidden;
	background: linear-gradient(135deg, #10131b 0%, #171923 100%);
	box-shadow: 0 0 24px rgba(255, 0, 0, 0.16);
}

.akj-header-search-field {
	flex: 1;
	width: 100%;
	min-width: 0;
	height: 100%;
	padding: 0 28px;
	border: 0;
	outline: 0;
	background: transparent;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
	caret-color: #ffffff;
	font-size: 16px;
	font-weight: 500;
}

.akj-header-search-field::placeholder,
.akj-header-search-field::-webkit-input-placeholder,
.akj-header-search-field::-moz-placeholder,
.akj-header-search-field:-ms-input-placeholder,
.akj-header-search-field::-ms-input-placeholder {
	color: #ffffff !important;
	opacity: 1 !important;
}

.akj-header-search-submit {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 96px;
	width: 96px;
	height: 100%;
	padding: 0;
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 0;
	overflow: hidden !important;
	background-color: #d40000 !important;
	background-image: none !important;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
}

.akj-header-search-submit:hover {
	background-color: #ff1a1a !important;
}

.akj-header-search-submit svg,
.akj-header-search-submit span,
.akj-search-svg,
.akj-search-icon {
	display: none !important;
}

.akj-header-search-submit img.akj-search-img {
	display: block !important;
	width: 24px !important;
	height: 24px !important;
	max-width: 24px !important;
	max-height: 24px !important;
	object-fit: contain !important;
	filter: brightness(0) invert(1) !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	pointer-events: none !important;
}

/* Disable CSS fallback magnifier when real image icon is used. */
.akj-header-search-submit::before,
.akj-header-search-submit::after {
	display: none !important;
	content: none !important;
}

.akj-header-actions-pro {
	display: grid;
	grid-template-columns: repeat(3, minmax(120px, 1fr));
	height: 58px;
	min-width: 420px;
	border: 1px solid rgba(255, 0, 0, 0.75);
	border-radius: 18px;
	overflow: hidden;
	background: linear-gradient(135deg, #07080d 0%, #10131b 100%);
	box-shadow: 0 0 24px rgba(255, 0, 0, 0.12);
}

.akj-header-action-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	color: #ffffff;
	text-decoration: none;
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	border-right: 1px solid rgba(255, 255, 255, 0.12);
	transition:
		color 0.2s ease,
		background 0.2s ease;
}

.akj-header-action-item:last-child {
	border-right: 0;
}

.akj-header-action-item:hover {
	color: #ffffff;
	background: rgba(255, 0, 0, 0.18);
}

.akj-header-action-label {
	display: inline-block;
	color: inherit;
	white-space: nowrap;
}

/* ==================================================
   5. DESKTOP HEADER LOCK - HOMEPAGE
   Scope: homepage only
   Purpose:
   - Top Row: 112px
   - Main Row: 70px
   - Header total: 184px
   - Keep homepage width and height stable.
================================================== */

@media (min-width: 1000px) {
	body.home #header,
	body.home .ct-header {
		min-height: 184px !important;
		height: 184px !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body.home #header [data-row="top"],
	body.home .ct-header [data-row="top"] {
		min-height: 112px !important;
		height: 112px !important;
		background:
			radial-gradient(circle at 8% 50%, rgba(224, 0, 0, 0.34), transparent 24%),
			linear-gradient(90deg, #240303 0%, #0a0b10 36%, #05060a 100%) !important;
		border-top: 1px solid rgba(255, 23, 23, 0.42) !important;
		border-bottom: 1px solid rgba(255, 23, 23, 0.42) !important;
		box-shadow:
			inset 0 -1px 0 rgba(255, 255, 255, 0.04),
			0 12px 34px rgba(0, 0, 0, 0.42) !important;
	}

	body.home #header [data-row="top"] .ct-container,
	body.home .ct-header [data-row="top"] .ct-container,
	body.home #header [data-row="top"] .ct-container-fluid,
	body.home .ct-header [data-row="top"] .ct-container-fluid {
		min-height: 112px !important;
		height: 112px !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		background: transparent !important;
	}

	body.home #header [data-row="middle"],
	body.home .ct-header [data-row="middle"],
	body.home #header [data-row="bottom"],
	body.home .ct-header [data-row="bottom"] {
		min-height: 70px !important;
		height: 70px !important;
		background: linear-gradient(180deg, #0f1018 0%, #08090e 100%) !important;
		border-top: 1px solid rgba(255, 0, 0, 0.45) !important;
		border-bottom: 1px solid rgba(255, 0, 0, 0.65) !important;
		box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32) !important;
	}

	body.home #header [data-row="middle"] .ct-container,
	body.home .ct-header [data-row="middle"] .ct-container,
	body.home #header [data-row="bottom"] .ct-container,
	body.home .ct-header [data-row="bottom"] .ct-container,
	body.home #header [data-row="middle"] .ct-container-fluid,
	body.home .ct-header [data-row="middle"] .ct-container-fluid,
	body.home #header [data-row="bottom"] .ct-container-fluid,
	body.home .ct-header [data-row="bottom"] .ct-container-fluid {
		min-height: 70px !important;
		height: 70px !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		background: transparent !important;
	}
}

/* ==================================================
   6. DESKTOP HEADER MIRROR - ALL OTHER PAGES
   Scope: all desktop pages except homepage
   Purpose:
   - Top Row: 112px
   - Main Row: 70px
   - Header total: 184px
   - Mirror homepage header dimensions.
================================================== */

@media (min-width: 1000px) {
	body:not(.home) #header,
	body:not(.home) .ct-header {
		min-height: 184px !important;
		height: 184px !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	body:not(.home) #header [data-row="top"],
	body:not(.home) .ct-header [data-row="top"] {
		min-height: 112px !important;
		height: 112px !important;
		background:
			radial-gradient(circle at 8% 50%, rgba(224, 0, 0, 0.34), transparent 24%),
			linear-gradient(90deg, #240303 0%, #0a0b10 36%, #05060a 100%) !important;
		border-top: 1px solid rgba(255, 23, 23, 0.42) !important;
		border-bottom: 1px solid rgba(255, 23, 23, 0.42) !important;
		box-shadow:
			inset 0 -1px 0 rgba(255, 255, 255, 0.04),
			0 12px 34px rgba(0, 0, 0, 0.42) !important;
	}

	body:not(.home) #header [data-row="top"] .ct-container,
	body:not(.home) .ct-header [data-row="top"] .ct-container,
	body:not(.home) #header [data-row="top"] .ct-container-fluid,
	body:not(.home) .ct-header [data-row="top"] .ct-container-fluid {
		min-height: 112px !important;
		height: 112px !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		background: transparent !important;
	}

	body:not(.home) #header [data-row="middle"],
	body:not(.home) .ct-header [data-row="middle"],
	body:not(.home) #header [data-row="bottom"],
	body:not(.home) .ct-header [data-row="bottom"] {
		min-height: 70px !important;
		height: 70px !important;
		background: linear-gradient(180deg, #0f1018 0%, #08090e 100%) !important;
		border-top: 1px solid rgba(255, 0, 0, 0.45) !important;
		border-bottom: 1px solid rgba(255, 0, 0, 0.65) !important;
		box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32) !important;
	}

	body:not(.home) #header [data-row="middle"] .ct-container,
	body:not(.home) .ct-header [data-row="middle"] .ct-container,
	body:not(.home) #header [data-row="bottom"] .ct-container,
	body:not(.home) .ct-header [data-row="bottom"] .ct-container,
	body:not(.home) #header [data-row="middle"] .ct-container-fluid,
	body:not(.home) .ct-header [data-row="middle"] .ct-container-fluid,
	body:not(.home) #header [data-row="bottom"] .ct-container-fluid,
	body:not(.home) .ct-header [data-row="bottom"] .ct-container-fluid {
		min-height: 70px !important;
		height: 70px !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		background: transparent !important;
	}
}

/* ==================================================
   7. DESKTOP SEARCH + ACTIONS LOCK
   Scope: desktop only
================================================== */

@media (min-width: 1000px) {
	#header .akj-header-tools-pro,
	.ct-header .akj-header-tools-pro {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: 14px !important;
		width: 100% !important;
		max-width: 1240px !important;
		margin-left: auto !important;
		margin-right: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		overflow: visible !important;
		box-sizing: border-box !important;
	}

	#header .akj-header-search-pro,
	.ct-header .akj-header-search-pro {
		flex: 1 1 620px !important;
		width: 620px !important;
		min-width: 520px !important;
		max-width: 720px !important;
		height: 58px !important;
		min-height: 58px !important;
		border-radius: 18px !important;
		background:
			linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0)),
			#111218 !important;
		border: 1px solid rgba(255, 255, 255, 0.16) !important;
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.08),
			0 0 22px rgba(224, 0, 0, 0.18) !important;
	}

	#header .akj-header-search-field,
	.ct-header .akj-header-search-field {
		height: 58px !important;
		min-height: 58px !important;
		padding: 0 32px !important;
		color: #ffffff !important;
		-webkit-text-fill-color: #ffffff !important;
		font-size: 17px !important;
		font-weight: 500 !important;
		line-height: 58px !important;
	}

	#header .akj-header-search-submit,
	.ct-header .akj-header-search-submit {
		flex: 0 0 104px !important;
		width: 104px !important;
		height: 58px !important;
		min-height: 58px !important;
		border-radius: 0 18px 18px 0 !important;
		background:
			linear-gradient(180deg, #ff1616 0%, #d00000 48%, #9b0000 100%) !important;
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.22),
			0 0 24px rgba(224, 0, 0, 0.42) !important;
	}

	#header .akj-header-actions-pro,
	.ct-header .akj-header-actions-pro {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		flex: 0 0 500px !important;
		width: 500px !important;
		min-width: 500px !important;
		max-width: 500px !important;
		height: 58px !important;
		min-height: 58px !important;
		padding: 0 18px !important;
		border: 1px solid rgba(184, 0, 0, 0.78) !important;
		border-radius: 20px !important;
		background:
			radial-gradient(circle at 50% 0%, rgba(255, 23, 23, 0.11), rgba(255, 23, 23, 0) 48%),
			linear-gradient(180deg, rgba(12, 13, 18, 0.98) 0%, rgba(4, 5, 8, 0.98) 100%) !important;
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.07),
			0 0 30px rgba(184, 0, 0, 0.18),
			0 16px 36px rgba(0, 0, 0, 0.34) !important;
	}

	#header .akj-header-action-item,
	.ct-header .akj-header-action-item {
		min-height: 58px !important;
		color: #ffffff !important;
		font-size: 17px !important;
		font-weight: 900 !important;
	}
}

/* ==================================================
   8. MAIN MENU
================================================== */

.ct-header .menu > li > a,
.ct-header [data-id="menu"] .menu > li > a {
	color: #ffffff !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	opacity: 1 !important;
}

.ct-header .menu > li > a:hover,
.ct-header [data-id="menu"] .menu > li > a:hover {
	color: #ff2b2b !important;
}

.ct-header .ct-icon,
.ct-header [data-id="menu"] .ct-icon {
	color: #c00000 !important;
	fill: #c00000 !important;
}

@media (min-width: 1000px) {
	.ct-header [data-id="menu"] .menu {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 42px !important;
		width: 100% !important;
	}

	.ct-header [data-id="menu"] .menu > li > a {
		line-height: 1.15 !important;
		text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65) !important;
	}

	.ct-header [data-id="menu"] .ct-toggle-dropdown-desktop,
	.ct-header [data-id="menu"] .ct-toggle-dropdown-desktop svg,
	.ct-header [data-id="menu"] .menu > li > a svg {
		color: #ff0000 !important;
		fill: #ff0000 !important;
		stroke: #ff0000 !important;
	}
}

/* ==================================================
   9. RESPONSIVE - TABLET
================================================== */

@media (max-width: 1360px) {
	.ct-header [data-id="menu"] .menu {
		gap: 36px !important;
	}

	#header .akj-header-search-pro,
	.ct-header .akj-header-search-pro {
		flex-basis: 540px !important;
		width: 540px !important;
		min-width: 420px !important;
	}

	#header .akj-header-actions-pro,
	.ct-header .akj-header-actions-pro {
		flex-basis: 440px !important;
		width: 440px !important;
		min-width: 440px !important;
		max-width: 440px !important;
	}
}

@media (max-width: 1200px) {
	.ct-header [data-id="menu"] .menu {
		gap: 28px !important;
	}

	.ct-header .menu > li > a,
	.ct-header [data-id="menu"] .menu > li > a {
		font-size: 19px !important;
	}

	#header .akj-header-search-pro,
	.ct-header .akj-header-search-pro {
		flex-basis: 480px !important;
		width: 480px !important;
		min-width: 360px !important;
	}

	#header .akj-header-actions-pro,
	.ct-header .akj-header-actions-pro {
		flex-basis: 390px !important;
		width: 390px !important;
		min-width: 390px !important;
		max-width: 390px !important;
	}

	#header .akj-header-action-item,
	.ct-header .akj-header-action-item {
		font-size: 15px !important;
	}
}

/* ==================================================
   10. RESPONSIVE - MOBILE / SMALL TABLETS
================================================== */

@media (max-width: 999px) {
	#header,
	.ct-header,
	body.home #header,
	body.home .ct-header,
	body:not(.home) #header,
	body:not(.home) .ct-header {
		height: auto !important;
		min-height: auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	#header [data-row="top"],
	.ct-header [data-row="top"],
	#header [data-row="middle"],
	.ct-header [data-row="middle"],
	#header [data-row="bottom"],
	.ct-header [data-row="bottom"],
	#header [data-row="top"] .ct-container,
	.ct-header [data-row="top"] .ct-container,
	#header [data-row="top"] .ct-container-fluid,
	.ct-header [data-row="top"] .ct-container-fluid,
	#header [data-row="middle"] .ct-container,
	.ct-header [data-row="middle"] .ct-container,
	#header [data-row="middle"] .ct-container-fluid,
	.ct-header [data-row="middle"] .ct-container-fluid,
	#header [data-row="bottom"] .ct-container,
	.ct-header [data-row="bottom"] .ct-container,
	#header [data-row="bottom"] .ct-container-fluid,
	.ct-header [data-row="bottom"] .ct-container-fluid {
		height: auto !important;
		min-height: auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	.akj-header-tools-pro,
	#header .akj-header-tools-pro,
	.ct-header .akj-header-tools-pro {
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: center !important;
		gap: 14px !important;
		max-width: 100% !important;
		padding: 12px 16px !important;
	}

	.akj-header-search-pro,
	#header .akj-header-search-pro,
	.ct-header .akj-header-search-pro {
		flex: 1 1 auto !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		height: 54px !important;
		min-height: 54px !important;
	}

	.akj-header-search-field,
	#header .akj-header-search-field,
	.ct-header .akj-header-search-field {
		height: 54px !important;
		min-height: 54px !important;
		line-height: 54px !important;
		font-size: 15px !important;
		padding: 0 18px !important;
	}

	.akj-header-search-submit,
	#header .akj-header-search-submit,
	.ct-header .akj-header-search-submit {
		flex: 0 0 76px !important;
		width: 76px !important;
		height: 54px !important;
		min-height: 54px !important;
	}

	.akj-header-search-submit::before {
		top: 14px !important;
		left: 25px !important;
		width: 19px !important;
		height: 19px !important;
	}

	.akj-header-search-submit::after {
		top: 34px !important;
		left: 43px !important;
		width: 17px !important;
		height: 4px !important;
	}

	.akj-header-actions-pro,
	#header .akj-header-actions-pro,
	.ct-header .akj-header-actions-pro {
		grid-template-columns: repeat(3, 1fr) !important;
		flex: 1 1 auto !important;
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		height: 54px !important;
		min-height: 54px !important;
		padding: 0 8px !important;
	}

	.akj-header-action-item,
	#header .akj-header-action-item,
	.ct-header .akj-header-action-item {
		min-height: 54px !important;
		padding: 0 8px !important;
		font-size: 14px !important;
	}
}

/* ==================================================
   11. RESPONSIVE - SMALL MOBILE
================================================== */

@media (max-width: 767px) {
	.ct-header {
		background:
			linear-gradient(90deg, #240303 0%, #0a0b10 44%, #05060a 100%) !important;
	}

	.ct-header .menu > li > a,
	.ct-header [data-id="menu"] .menu > li > a {
		font-size: 15px !important;
	}

	.blocksy-menu-popup {
		background-color: #0f1018 !important;
	}

	.blocksy-menu-popup-nav a {
		color: #ffffff !important;
	}

	.blocksy-menu-popup-nav a:hover {
		background-color: rgba(184, 0, 0, 0.16);
	}
}