/* ==========================================================
   HEADER
   PART 1 : RESET • STICKY HEADER • LOGO • ACTIONS
========================================================== */

/* =========================================
   HIDE DEFAULT ASTRA HEADER
========================================= */

.ast-builder-header,
.ast-primary-header-bar,
.ast-above-header-wrap,
.ast-below-header-wrap,
.site-header{
	display:none !important;
}

/* =========================================
   STICKY HEADER
========================================= */

.ok-header{
	position:sticky;
	top:0;
	left:0;
	right:0;
	z-index:1000;
	background:linear-gradient(180deg,#071426 0%,#0d2341 100%);
	border-bottom:1px solid rgba(255,255,255,.08);
	box-shadow:
		0 10px 35px rgba(0,0,0,.18),
		0 1px 0 rgba(255,255,255,.04);
	backdrop-filter:blur(16px);
	-webkit-backdrop-filter:blur(16px);
	transition:
		background .30s ease,
		box-shadow .30s ease,
		border-color .30s ease;
}

/* =========================================
   HEADER INNER
========================================= */

.ok-header-inner{
	width:100%;
	max-width:1320px;
	margin-inline:auto;
	min-height:72px;
	padding:0 24px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:18px;
}

/* =========================================
   LOGO
========================================= */

.ok-header-logo{
	display:flex;
	align-items:center;
	flex:1;
	min-width:0;
	text-decoration:none;
	color:#fff;
}

.ok-header .custom-logo-link{
	display:flex;
	align-items:center;
	line-height:1;
}

.ok-header .custom-logo{
	display:block;
	width:auto;
	max-width:220px;
	max-height:44px;
	object-fit:contain;
}

/* =========================================
   ACTIONS
========================================= */

.ok-header-actions{
	display:flex;
	align-items:center;
	gap:10px;
	flex-shrink:0;
}

/* =========================================
   TOGGLE + ACTION BUTTONS
========================================= */

.ok-header-toggle,
.ok-header-search-btn,
.ok-header-bell{
	display:flex;
	align-items:center;
	justify-content:center;
	width:46px;
	height:46px;
	padding:0;
	border:none;
	border-radius:14px;
	background:rgba(255,255,255,.06);
	color:#ffffff;
	cursor:pointer;
	flex-shrink:0;
	transition:
		background .25s ease,
		color .25s ease,
		transform .25s ease,
		box-shadow .25s ease;
}

.ok-header-toggle:hover,
.ok-header-search-btn:hover,
.ok-header-bell:hover{
	background:var(--ok-primary,#e10600);
	color:#fff;
	transform:translateY(-2px);
	box-shadow:0 12px 28px rgba(225,6,0,.28);
}

.ok-header-toggle:focus-visible,
.ok-header-search-btn:focus-visible,
.ok-header-bell:focus-visible{
	outline:none;
	background:var(--ok-primary,#e10600);
	box-shadow:
		0 0 0 3px rgba(225,6,0,.18),
		0 12px 28px rgba(225,6,0,.24);
}

.ok-header-toggle svg,
.ok-header-search-btn svg,
.ok-header-bell svg{
	width:21px;
	height:21px;
	fill:currentColor;
	stroke:none;
}

/* =========================================
   LINKS
========================================= */

.ok-header a{
	color:inherit;
	text-decoration:none;
}

.ok-header a:hover{
	color:inherit;
}

/* =========================================
   TABLET
========================================= */

@media (max-width:991px){

	.ok-header-inner{
		min-height:66px;
		padding:0 20px;
	}

	.ok-header-space{
		height:66px;
	}

	.ok-header .custom-logo{
		max-width:185px;
		max-height:40px;
	}

}

/* =========================================
   MOBILE
========================================= */

@media (max-width:767px){

	.ok-header-inner{
		min-height:60px;
		padding:0 16px;
		gap:12px;
	}

	.ok-header-space{
		height:60px;
	}

	.ok-header .custom-logo{
		max-width:155px;
		max-height:34px;
	}

	.ok-header-toggle,
	.ok-header-search-btn,
	.ok-header-bell{
		width:40px;
		height:40px;
		border-radius:12px;
	}

	.ok-header-toggle svg,
	.ok-header-search-btn svg,
	.ok-header-bell svg{
		width:19px;
		height:19px;
	}

}

/* ==========================================================
   HEADER
   PART 2 : SEARCH OVERLAY • SEARCH PANEL • SEARCH FORM
========================================================== */

/* =========================================
   SEARCH OVERLAY
========================================= */

.ok-search-overlay{
	position:fixed;
	inset:0;
	background:rgba(15,23,42,.52);
	backdrop-filter:blur(6px);
	-webkit-backdrop-filter:blur(6px);
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:
		opacity .30s ease,
		visibility .30s ease;
	z-index:9995;
}

.ok-search-overlay.active{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}

/* =========================================
   SEARCH PANEL
========================================= */

.ok-search-wrap{
	position:fixed;
	top:68px;
	left:0;
	right:0;
	z-index:1001;
	padding:0;
	opacity:0;
	visibility:hidden;
	transform:translateY(-18px);
	transition:
		transform .30s ease,
		opacity .30s ease,
		visibility .30s ease;
	pointer-events:none;
}

.ok-search-wrap.active{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
	pointer-events:auto;
}

/* =========================================
   SEARCH CONTAINER
========================================= */

.ok-search-inner{
	width:100%;
	max-width:1320px;
	margin:0 auto;
	padding:20px 24px;
}

.ok-search-form{
	display:flex;
	align-items:center;
	gap:14px;
	padding:14px;
	background:#ffffff;
	border:1px solid rgba(0,0,0,.06);
	border-radius:22px;
	box-shadow:
		0 24px 60px rgba(15,23,42,.16),
		0 8px 24px rgba(15,23,42,.08);
}

/* =========================================
   SEARCH INPUT
========================================= */

.ok-search-input{
	flex:1;
	width:100%;
	height:58px;
	padding:0 22px;
	border:none;
	border-radius:16px;
	background:#f8fafc;
	color:#111827;
	font-size:16px;
	font-weight:500;
	font-family:inherit;
	outline:none;
	transition:
		background .25s ease,
		box-shadow .25s ease;
}

.ok-search-input::placeholder{
	color:#94a3b8;
	font-weight:500;
}

.ok-search-input:focus{
	background:#ffffff;
	box-shadow:0 0 0 2px rgba(225,6,0,.12);
}

/* =========================================
   SEARCH BUTTON
========================================= */

.ok-search-submit{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	width:58px;
	height:58px;
	border:none;
	border-radius:16px;
	background:var(--ok-primary,#e10600);
	color:#ffffff;
	cursor:pointer;
	transition:
		transform .25s ease,
		box-shadow .25s ease,
		background .25s ease;
}

.ok-search-submit:hover{
	transform:translateY(-2px);
	box-shadow:0 14px 30px rgba(225,6,0,.28);
}

.ok-search-submit:focus-visible{
	outline:none;
	box-shadow:
		0 0 0 3px rgba(225,6,0,.18),
		0 14px 30px rgba(225,6,0,.28);
}

.ok-search-submit svg{
	width:22px;
	height:22px;
	fill:currentColor;
}

/* =========================================
   SCREEN READER
========================================= */

.screen-reader-text{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

/* =========================================
   TABLET
========================================= */

@media (max-width:991px){

	.ok-search-wrap{
		top:66px;
	}

	.ok-search-inner{
		padding:18px 20px;
	}

	.ok-search-form{
		padding:12px;
		border-radius:20px;
	}

	.ok-search-input{
		height:54px;
		font-size:15px;
	}

	.ok-search-submit{
		width:54px;
		height:54px;
	}

}

/* =========================================
   MOBILE
========================================= */

@media (max-width:767px){

	.ok-search-wrap{
		top:60px;
	}

	.ok-search-inner{
		padding:16px;
	}

	.ok-search-form{
		gap:10px;
		padding:10px;
		border-radius:18px;
	}

	.ok-search-input{
		height:48px;
		padding:0 16px;
		font-size:14px;
		border-radius:12px;
	}

	.ok-search-submit{
		width:48px;
		height:48px;
		border-radius:12px;
	}

	.ok-search-submit svg{
		width:20px;
		height:20px;
	}

}

/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width:420px){

	.ok-search-inner{
		padding:14px;
	}

	.ok-search-form{
		padding:8px;
		gap:8px;
	}

	.ok-search-input{
		padding:0 14px;
		font-size:13px;
	}

}