/* ==========================================================
   HEADER
   PART 1 : HEADER • LAYOUT • LOGO • ACTIONS
========================================================== */

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

.ok-site-header{
	position:sticky;
	top:0;
	left:0;
	width:100%;
	height:63px;
	background:rgba(255,255,255,.94);
	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);
	border-bottom:1px solid rgba(229,231,235,.9);
	z-index:1000;
	transition:
		background-color var(--ok-transition),
		border-color var(--ok-transition),
		box-shadow var(--ok-transition);
}

.ok-site-header.is-scrolled{
	background:rgba(255,255,255,.98);
	border-color:var(--ok-border);
	box-shadow:0 10px 28px rgba(15,23,42,.08);
}

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

.ok-header-inner{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	width:100%;
	max-width:1280px;
	height:100%;
	margin-inline:auto;
	padding-inline:24px;
}

/* =========================================
   HEADER SIDES
========================================= */

.ok-header-left,
.ok-header-right{
	display:flex;
	align-items:center;
	flex:1;
	min-width:0;
}

.ok-header-left{
	justify-content:flex-start;
}

.ok-header-right{
	justify-content:flex-end;
	gap:8px;
}

/* =========================================
   HEADER CENTER
========================================= */

.ok-header-center{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	display:flex;
	align-items:center;
	justify-content:center;
	pointer-events:none;
	z-index:5;
}

.ok-header-center a,
.ok-site-logo,
.ok-text-logo{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	pointer-events:auto;
}

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

.ok-header-center .custom-logo-link{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	line-height:0;
	flex-shrink:0;
	transition:
		transform var(--ok-transition),
		opacity var(--ok-transition);
}

.ok-header-center .custom-logo-link:hover{
	transform:scale(1.03);
}

.ok-header-center .custom-logo{
	display:block;
	width:auto;
	height:44px;
	max-width:200px;
	max-height:44px;
	object-fit:contain;
	border-radius:10px;
}

.ok-text-logo{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-size:1.35rem;
	font-weight:800;
	line-height:1;
	letter-spacing:-.02em;
	color:var(--ok-text);
	white-space:nowrap;
	text-decoration:none;
	transition:color var(--ok-transition);
}

/* =========================================
   HEADER BUTTONS
========================================= */

.ok-menu-toggle,
.ok-header-action,
.ok-search-toggle,
.ok-bell-toggle{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	padding:0;
	border:0;
	border-radius:50%;
	background:transparent;
	color:var(--ok-text);
	cursor:pointer;
	flex-shrink:0;
	overflow:hidden;
	-webkit-tap-highlight-color:transparent;
	transition:
		background-color var(--ok-transition),
		color var(--ok-transition),
		transform var(--ok-transition);
}

.ok-menu-toggle::before,
.ok-header-action::before,
.ok-search-toggle::before,
.ok-bell-toggle::before{
	content:"";
	position:absolute;
	inset:0;
	border-radius:inherit;
	background:rgba(225,6,0,.08);
	transform:scale(0);
	transition:transform .3s ease;
}

.ok-menu-toggle:hover::before,
.ok-header-action:hover::before,
.ok-search-toggle:hover::before,
.ok-bell-toggle:hover::before,
.ok-menu-toggle[aria-expanded="true"]::before{
	transform:scale(1);
}

.ok-menu-toggle:hover,
.ok-header-action:hover,
.ok-search-toggle:hover,
.ok-bell-toggle:hover{
	color:var(--ok-primary);
	transform:translateY(-1px);
}

.ok-menu-toggle:active,
.ok-header-action:active,
.ok-search-toggle:active,
.ok-bell-toggle:active{
	transform:scale(.95);
}

.ok-menu-toggle svg,
.ok-header-action svg,
.ok-search-toggle svg,
.ok-bell-toggle svg{
	width:22px;
	height:22px;
	transition:
		color .3s ease,
		transform .3s ease;
}

.ok-menu-toggle:hover svg{
	transform:rotate(90deg);
}

.ok-header-action:hover svg,
.ok-search-toggle:hover svg,
.ok-bell-toggle:hover svg{
	transform:scale(1.08);
}

/* =========================================
   BADGE
========================================= */

.ok-badge{
	position:absolute;
	top:6px;
	right:6px;
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:16px;
	height:16px;
	padding:0 4px;
	border-radius:999px;
	background:var(--ok-primary);
	color:#fff;
	font-size:10px;
	font-weight:700;
	line-height:1;
	box-shadow:0 2px 8px rgba(225,6,0,.35);
	transition:
		transform .25s ease,
		box-shadow .25s ease;
}

.ok-bell-toggle:hover .ok-badge{
	transform:scale(1.08);
	box-shadow:0 8px 18px rgba(225,6,0,.25);
}

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

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

.ok-search-overlay{
	position:fixed;
	inset:0;
	display:flex;
	align-items:flex-start;
	justify-content:center;
	padding:88px 20px 24px;
	background:rgba(15,23,42,.55);
	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:
		opacity .3s ease,
		visibility .3s ease;
	z-index:9999;
}

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

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

.ok-search-container{
	position:relative;
	width:min(100%,640px);
	background:var(--ok-bg);
	border:1px solid var(--ok-border);
	border-radius:22px;
	padding:24px;
	box-shadow:0 24px 60px rgba(15,23,42,.22);
	transform:translateY(-20px) scale(.98);
	opacity:0;
	transition:
		transform .3s ease,
		opacity .3s ease;
}

.ok-search-overlay.is-open .ok-search-container{
	transform:none;
	opacity:1;
}

/* =========================================
   CLOSE BUTTON
========================================= */

.ok-search-close{
	position:absolute;
	top:14px;
	right:14px;
	display:flex;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	padding:0;
	border:0;
	border-radius:50%;
	background:var(--ok-bg-alt);
	color:var(--ok-text);
	cursor:pointer;
	transition:
		background var(--ok-transition),
		color var(--ok-transition),
		transform var(--ok-transition);
}

.ok-search-close:hover{
	background:rgba(225,6,0,.08);
	color:var(--ok-primary);
	transform:rotate(90deg);
}

.ok-search-close:active{
	transform:scale(.94);
}

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

/* =========================================
   SEARCH FORM
========================================= */

.ok-overlay-search-form{
	margin:0;
}

.ok-overlay-search-wrapper{
	display:flex;
	align-items:center;
	gap:10px;
	padding:8px;
	border:1px solid var(--ok-border);
	border-radius:16px;
	background:var(--ok-bg-alt);
	transition:
		border-color var(--ok-transition),
		background var(--ok-transition),
		box-shadow var(--ok-transition);
}

.ok-overlay-search-wrapper:focus-within{
	background:#fff;
	border-color:var(--ok-primary);
	box-shadow:0 0 0 4px rgba(225,6,0,.08);
}

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

.ok-overlay-search-input{
	flex:1;
	min-width:0;
	height:46px;
	padding:0 8px;
	background:transparent;
	border:0;
	outline:none;
	color:var(--ok-text);
	font-size:1rem;
	font-weight:500;
	appearance:none;
	-webkit-appearance:none;
}

.ok-overlay-search-input::placeholder{
	color:var(--ok-text-light);
	opacity:1;
}

.ok-overlay-search-input::-webkit-search-decoration,
.ok-overlay-search-input::-webkit-search-cancel-button,
.ok-overlay-search-input::-webkit-search-results-button,
.ok-overlay-search-input::-webkit-search-results-decoration{
	display:none;
}

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

.ok-overlay-search-button{
	display:flex;
	align-items:center;
	justify-content:center;
	width:46px;
	height:46px;
	padding:0;
	border:0;
	border-radius:14px;
	background:var(--ok-primary);
	color:#fff;
	cursor:pointer;
	flex-shrink:0;
	transition:
		background var(--ok-transition),
		transform var(--ok-transition),
		box-shadow var(--ok-transition);
}

.ok-overlay-search-button:hover{
	background:var(--ok-primary-hover);
	box-shadow:0 10px 24px rgba(225,6,0,.22);
}

.ok-overlay-search-button:active{
	transform:scale(.95);
}

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

/* =========================================
   SEARCH SUGGESTIONS
========================================= */

.ok-overlay-search-suggestions{
	margin-top:22px;
}

.ok-overlay-search-title{
	display:block;
	margin-bottom:12px;
	font-size:.82rem;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--ok-text-light);
}

.ok-overlay-search-tags{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}

.ok-overlay-search-tags a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:9px 15px;
	border:1px solid var(--ok-border);
	border-radius:999px;
	background:var(--ok-bg-alt);
	color:var(--ok-text);
	font-size:.84rem;
	font-weight:600;
	transition:
		background var(--ok-transition),
		border-color var(--ok-transition),
		color var(--ok-transition),
		transform var(--ok-transition),
		box-shadow var(--ok-transition);
}

.ok-overlay-search-tags a:hover{
	background:var(--ok-primary);
	border-color:var(--ok-primary);
	color:#fff;
	transform:translateY(-2px);
	box-shadow:0 10px 22px rgba(225,6,0,.18);
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width:768px){

	.ok-search-overlay{
		padding:78px 16px 20px;
	}

	.ok-search-container{
		padding:22px;
		border-radius:20px;
	}

}

@media (max-width:480px){

	.ok-search-overlay{
		padding:72px 12px 16px;
		align-items:flex-start;
	}

	.ok-search-container{
		padding:18px;
		border-radius:18px;
	}

	.ok-search-close{
		width:38px;
		height:38px;
	}

	.ok-overlay-search-wrapper{
		padding:6px;
	}

	.ok-overlay-search-input{
		height:42px;
		font-size:.94rem;
	}

	.ok-overlay-search-button{
		width:42px;
		height:42px;
	}

	.ok-overlay-search-tags{
		gap:8px;
	}

	.ok-overlay-search-tags a{
		font-size:.8rem;
		padding:8px 13px;
	}

}

/* ==========================================================
   HEADER
   PART 3 : SIDEBAR OVERLAY • ACCOUNT • SAFE AREA • ACCESSIBILITY
========================================================== */

/* =========================================
   SIDEBAR OVERLAY
========================================= */

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

.ok-sidebar-overlay.is-visible{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}

/* ==========================================
   ACCOUNT MENU
========================================== */

.ok-account-menu{
	position:relative;
	display:flex;
	align-items:center;
	flex-shrink:0;
}

.ok-account-toggle{
	display:flex;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	padding:0;
	border:0;
	border-radius:50%;
	background:transparent;
	color:var(--ok-text);
	cursor:pointer;
	overflow:hidden;
	transition:
		background var(--ok-transition),
		color var(--ok-transition),
		transform var(--ok-transition);
}

.ok-account-toggle::before{
	content:"";
	position:absolute;
	inset:0;
	border-radius:50%;
	background:rgba(225,6,0,.08);
	transform:scale(0);
	transition:transform .3s ease;
}

.ok-account-toggle:hover::before{
	transform:scale(1);
}

.ok-account-toggle:hover{
	color:var(--ok-primary);
	transform:translateY(-1px);
}

.ok-account-toggle:active{
	transform:scale(.96);
}

.ok-account-toggle svg{
	width:22px;
	height:22px;
	position:relative;
	z-index:1;
	transition:transform .3s ease;
}

.ok-account-toggle:hover svg{
	transform:scale(1.08);
}

.ok-account-dropdown{
	position:absolute;
	top:calc(100% + 12px);
	right:0;
	width:220px;
	padding:10px;
	background:var(--ok-bg);
	border:1px solid var(--ok-border);
	border-radius:18px;
	box-shadow:var(--ok-shadow-md);
	display:none;
	z-index:1200;
}

.ok-account-dropdown.is-open{
	display:block;
	animation:okDropdown .25s ease;
}

.ok-account-user{
	padding:10px 12px 14px;
	margin-bottom:6px;
	border-bottom:1px solid var(--ok-border);
	font-size:.92rem;
	font-weight:700;
	color:var(--ok-text);
	line-height:1.4;
}

.ok-account-dropdown a{
	display:flex;
	align-items:center;
	padding:12px 14px;
	border-radius:12px;
	color:var(--ok-text);
	font-size:.9rem;
	font-weight:600;
	transition:
		background var(--ok-transition),
		color var(--ok-transition),
		padding-left var(--ok-transition);
}

.ok-account-dropdown a:hover{
	background:var(--ok-bg-alt);
	color:var(--ok-primary);
	padding-left:18px;
}

.ok-account-logout{
	margin-top:6px;
	padding-top:12px;
	border-top:1px solid var(--ok-border);
	color:var(--ok-primary)!important;
}

@keyframes okDropdown{

	from{
		opacity:0;
		transform:translateY(-8px);
	}

	to{
		opacity:1;
		transform:none;
	}

}

/* ==========================================
   SAFE AREA SUPPORT
========================================== */

@supports(padding:max(0px)){

	.ok-site-header{
		padding-top:env(safe-area-inset-top);
	}

	.ok-header-inner{
		padding-left:max(18px,env(safe-area-inset-left));
		padding-right:max(18px,env(safe-area-inset-right));
	}

}

/* ==========================================
   LARGE DESKTOP
========================================== */

@media (min-width:1400px){

	.ok-header-inner{
		max-width:1380px;
		padding-inline:32px;
	}

	.custom-logo{
	height:48px;
	max-width:210px;
    }

}

/* ==========================================
   DESKTOP
========================================== */

@media (max-width:1199px){

	.ok-header-inner{
		padding-inline:22px;
	}

	.custom-logo{
	height:42px;
	max-width:180px;
    }

}

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

@media (max-width:991px){

	.ok-header-inner{
		padding-inline:18px;
	}

	.ok-header-right{
		gap:6px;
	}

	.custom-logo{
	height:38px;
	max-width:160px;
    }

	.ok-menu-toggle,
	.ok-search-toggle,
	.ok-bell-toggle,
	.ok-header-action,
	.ok-account-toggle{
		width:40px;
		height:40px;
	}

}

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

@media (max-width:768px){

	.ok-header-inner{
		padding-inline:16px;
	}

	.ok-header-right{
		gap:4px;
	}

	.custom-logo{
	height:30px;
	max-width:130px;
    }

	.ok-header-center{
		max-width:50%;
	}

	.ok-account-dropdown{
		width:200px;
	}

}

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

@media (max-width:480px){

	.ok-header-inner{
		padding-inline:12px;
	}

	.custom-logo{
	height:28px;
	max-width:120px;
    }

	.ok-menu-toggle,
	.ok-search-toggle,
	.ok-bell-toggle,
	.ok-header-action,
	.ok-account-toggle{
		width:38px;
		height:38px;
	}

	.ok-menu-toggle svg,
	.ok-search-toggle svg,
	.ok-bell-toggle svg,
	.ok-header-action svg,
	.ok-account-toggle svg{
		width:20px;
		height:20px;
	}

	.ok-account-dropdown{
		width:190px;
		right:-4px;
	}

}

/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion:reduce){

	.ok-site-header,
	.ok-menu-toggle,
	.ok-search-toggle,
	.ok-bell-toggle,
	.ok-header-action,
	.ok-account-toggle,
	.ok-account-dropdown,
	.ok-search-overlay,
	.ok-search-container{
		transition:none!important;
		animation:none!important;
	}

}

/* ==========================================
   HIGH CONTRAST
========================================== */

@media (prefers-contrast:more){

	.ok-site-header,
	.ok-search-container,
	.ok-account-dropdown{
		border-width:2px;
	}

}

/* =========================================
   PERFORMANCE
========================================= */

.ok-account-toggle,
.ok-account-dropdown{
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	transform:translateZ(0);
}

/* =========================================
   DARK MODE
========================================= */

@media (prefers-color-scheme:dark){

	.ok-site-header{
		background:rgba(17,24,39,.95);
		border-color:#374151;
	}

	.ok-account-dropdown{
		background:#111827;
		border-color:#374151;
	}

	.ok-account-dropdown a:hover{
		background:#1f2937;
	}

}