/* ==========================================================
   PART 1B : HEADER
========================================================== */

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

.ok-site-header{
	position:sticky;
	inset:0 0 auto;
	width:100%;
	height:var(--ok-header-height);
	background:rgba(255,255,255,.94);
	backdrop-filter:blur(16px);
	-webkit-backdrop-filter:blur(16px);
	border-bottom:1px solid rgba(229,231,235,.9);
	z-index:var(--ok-z-header);
	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 30px rgba(0,0,0,.08);
}

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

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

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

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

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

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

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

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

.ok-site-logo img,
.custom-logo{
	display:block;
	width:auto;
	height:42px;
	max-width:220px;
	border-radius:10px;
	object-fit:contain;
}

.ok-text-logo{
	font-size:1.35rem;
	font-weight:800;
	letter-spacing:-.02em;
	color:var(--ok-text);
	transition:color var(--ok-transition);
}

.ok-site-logo{
	transition:transform var(--ok-transition),opacity var(--ok-transition);
}

.ok-site-logo:hover{
	transform:scale(1.03);
}

/* ==========================
   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;
	border-radius:50%;
	color:var(--ok-text);
	background:transparent;
	flex-shrink:0;
	transition:
		background-color var(--ok-transition),
		color var(--ok-transition),
		transform var(--ok-transition);
}

.ok-menu-toggle:hover,
.ok-header-action:hover,
.ok-search-toggle:hover,
.ok-bell-toggle:hover{
	background:var(--ok-bg-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(.96);
}

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

/* ==========================
   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);
}

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

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

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

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

.ok-search-overlay.is-open .ok-search-container{
	transform:translateY(0);
}

.ok-search-close{
	position:absolute;
	top:12px;
	right:12px;
	display:flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	border:0;
	border-radius:50%;
	background:var(--ok-bg-alt);
	color:var(--ok-text);
	cursor:pointer;
	transition:all .25s ease;
}

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

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

/* ==================================================
   OVERLAY 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:14px;
	background:var(--ok-bg-alt);
	transition:border-color .25s,box-shadow .25s,background .25s;
}

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

.ok-overlay-search-input{
	flex:1;
	min-width:0;
	height:44px;
	padding:0 8px;
	border:0;
	outline:none;
	background:transparent;
	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);
}

.ok-overlay-search-button{
	display:flex;
	align-items:center;
	justify-content:center;
	width:44px;
	height:44px;
	border:0;
	border-radius:12px;
	background:var(--ok-primary);
	color:#fff;
	cursor:pointer;
	flex-shrink:0;
	transition:background .25s,transform .2s;
}

.ok-overlay-search-button:hover{
	background:var(--ok-primary-hover);
}

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

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

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

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

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

.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:8px 13px;
	border:1px solid var(--ok-border);
	border-radius:999px;
	background:var(--ok-bg-alt);
	color:#4b5563;
	font-size:.85rem;
	font-weight:500;
	text-decoration:none;
	transition:all .25s ease;
}

.ok-overlay-search-tags a:hover{
	background:var(--ok-primary);
	border-color:var(--ok-primary);
	color:#fff;
}

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

@media (max-width:480px){

	.ok-search-overlay{
		padding:76px 12px 20px;
	}

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

	.ok-overlay-search-input{
		font-size:.92rem;
	}

}

/* ==========================================================
   PART 1C : MENU TOGGLE • HEADER ACTIONS • OVERLAY
========================================================== */

/* ==========================
   MENU TOGGLE
========================== */

.ok-menu-toggle{
	position:relative;
	overflow:hidden;
	flex-shrink:0;
}

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

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

.ok-menu-toggle svg{
	transition:transform .35s ease,color .3s ease;
}

.ok-menu-toggle:hover svg,
.ok-menu-toggle[aria-expanded="true"] svg{
	color:var(--ok-primary);
	transform:rotate(90deg);
}

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

.ok-header-action,
.ok-search-toggle,
.ok-bell-toggle{
	position:relative;
	overflow:hidden;
	flex-shrink:0;
}

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

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

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

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

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

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

.ok-badge{
	transition:
		transform .25s ease,
		box-shadow .25s ease;
}

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

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

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

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

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

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

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

	.ok-sidebar{
		padding-left:env(safe-area-inset-left);
		padding-right:env(safe-area-inset-right);
		padding-bottom:env(safe-area-inset-bottom);
	}

}

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

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

	html{
		scroll-behavior:auto;
	}

	.ok-menu-toggle,
	.ok-header-action,
	.ok-search-toggle,
	.ok-bell-toggle,
	.ok-sidebar-overlay,
	.ok-badge{
		transition:none!important;
	}

	.ok-menu-toggle::before,
	.ok-header-action::before,
	.ok-search-toggle::before,
	.ok-bell-toggle::before{
		transition:none!important;
	}

}

/* ==========================================
   ACCOUNT / PROFILE DROPDOWN
========================================== */

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

.ok-account-toggle{
	width:42px;
	height:42px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	border:0;
	background:transparent;
	color:#111;
	cursor:pointer;
	border-radius:50%;
}

.ok-account-toggle svg{
	width:24px;
	height:24px;
	display:block;
}

.ok-account-toggle:hover{
	background:#f2f2f2;
}

.ok-account-dropdown{
	position:absolute;
	top:calc(100% + 12px);
	right:0;
	z-index:99999;
	width:210px;
	padding:10px;
	background:#fff;
	border:1px solid rgba(0,0,0,.10);
	border-radius:14px;
	box-shadow:0 12px 30px rgba(0,0,0,.16);
	display:none;
}

.ok-account-dropdown.is-open{
	display:block;
}

.ok-account-dropdown a{
	display:block;
	padding:11px 12px;
	color:#222;
	font-size:14px;
	font-weight:600;
	line-height:1.3;
	text-decoration:none;
	border-radius:9px;
}

.ok-account-dropdown a:hover{
	background:#f5f5f5;
	color:#e10600;
}

.ok-account-user{
	padding:8px 12px 12px;
	margin-bottom:5px;
	border-bottom:1px solid #eee;
	color:#111;
	font-size:14px;
	font-weight:700;
	line-height:1.35;
}

.ok-account-logout{
	margin-top:5px;
	border-top:1px solid #eee;
	color:#d60000 !important;
}

@media (max-width:660px){

	.ok-account-dropdown{
		top:calc(100% + 10px);
		right:-8px;
		width:200px;
	}

	.ok-account-toggle{
		width:38px;
		height:38px;
	}
}