/* ==========================================================
   PREMIUM NAVIGATION CSS
   PART 1 : VARIABLES • BASE • RESET • UTILITIES
========================================================== */

/* ==========================================================
   CSS VARIABLES
========================================================== */

:root{
	--ok-primary:#e10600;
	--ok-primary-hover:#c70000;
	--ok-white:#fff;
	--ok-bg:#fff;
	--ok-bg-alt:#f7f8fa;
	--ok-bg-hover:#f1f3f5;
	--ok-text:#161616;
	--ok-text-light:#6b7280;
	--ok-border:#e5e7eb;
	--ok-success:#22c55e;
	--ok-warning:#f59e0b;
	--ok-radius-xs:8px;
	--ok-radius-sm:12px;
	--ok-radius-md:16px;
	--ok-radius-lg:20px;
	--ok-radius-xl:28px;
	--ok-shadow-xs:0 1px 2px rgba(0,0,0,.05);
	--ok-shadow-sm:0 4px 12px rgba(0,0,0,.08);
	--ok-shadow-md:0 12px 30px rgba(0,0,0,.12);
	--ok-shadow-lg:0 20px 45px rgba(0,0,0,.18);
	--ok-transition:.28s cubic-bezier(.4,0,.2,1);
	--ok-sidebar-width:340px;
	--ok-z-overlay:1090;
	--ok-z-sidebar:1100;
}

/* ==========================================================
   BODY STATE
========================================================== */

body.ok-sidebar-open{
	overflow:hidden;
	touch-action:none;
	overscroll-behavior:none;
}

/* ==========================================================
   SIDEBAR BASE
========================================================== */

.ok-sidebar,
.ok-sidebar *{
	box-sizing:border-box;
}

.ok-sidebar{
	background:var(--ok-bg);
	color:var(--ok-text);
	font:inherit;
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

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

.ok-sidebar a{
	color:inherit;
	text-decoration:none;
	transition:color var(--ok-transition),
		background-color var(--ok-transition),
		border-color var(--ok-transition),
		box-shadow var(--ok-transition),
		transform var(--ok-transition),
		opacity var(--ok-transition);
}

.ok-sidebar a:hover{
	text-decoration:none;
}

/* ==========================================================
   SIDEBAR BUTTONS
========================================================== */

.ok-sidebar button{
	background:none;
	border:0;
	padding:0;
	font:inherit;
	cursor:pointer;
	outline:0;
	-webkit-tap-highlight-color:transparent;
}

/* ==========================================================
   SIDEBAR IMAGES
========================================================== */

.ok-sidebar img{
	display:block;
	max-width:100%;
	height:auto;
	user-select:none;
	-webkit-user-drag:none;
}

/* ==========================================================
   SIDEBAR SVG
========================================================== */

.ok-sidebar svg{
	display:block;
	width:1.25rem;
	height:1.25rem;
	fill:none;
	stroke:currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
	vector-effect:non-scaling-stroke;
	flex-shrink:0;
}

/* ==========================================================
   SIDEBAR FORM ELEMENTS
========================================================== */

.ok-sidebar input,
.ok-sidebar textarea,
.ok-sidebar select{
	font:inherit;
	background:none;
	border:0;
	outline:0;
	appearance:none;
	-webkit-appearance:none;
	-webkit-tap-highlight-color:transparent;
}

/* ==========================================================
   SIDEBAR LISTS
========================================================== */

.ok-sidebar ul,
.ok-sidebar ol{
	margin:0;
	padding:0;
	list-style:none;
}

/* ==========================================================
   SIDEBAR FOCUS
========================================================== */

.ok-sidebar :focus{
	outline:none;
}

.ok-sidebar :focus-visible{
	outline:2px solid var(--ok-primary);
	outline-offset:3px;
	border-radius:8px;
}

/* ==========================================================
   SIDEBAR SELECTION
========================================================== */

.ok-sidebar ::selection{
	background:var(--ok-primary);
	color:#fff;
}

/* ==========================================================
   SIDEBAR SCROLLBAR
========================================================== */

.ok-sidebar-inner{
	scrollbar-width:thin;
	scrollbar-color:#d1d5db #f3f4f6;
	scroll-behavior:smooth;
	overscroll-behavior:contain;
	scrollbar-gutter:stable;
}

.ok-sidebar-inner::-webkit-scrollbar{
	width:6px;
}

.ok-sidebar-inner::-webkit-scrollbar-track{
	background:#f3f4f6;
}

.ok-sidebar-inner::-webkit-scrollbar-thumb{
	background:#d1d5db;
	border-radius:999px;
}

.ok-sidebar-inner::-webkit-scrollbar-thumb:hover{
	background:#9ca3af;
}

/* ==========================================================
   UTILITIES
========================================================== */

.ok-hidden{
	display:none!important;
}

.ok-visually-hidden{
	position:absolute!important;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

.ok-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	line-height:1;
	flex-shrink:0;
}

.ok-divider{
	width:100%;
	height:1px;
	background:var(--ok-border);
}

/* ==========================================================
   PAGE LOADED
========================================================== */

body.ok-page-loaded .ok-sidebar,
body.ok-page-loaded .ok-sidebar-overlay,
body.ok-page-loaded .ok-action-card,
body.ok-page-loaded .ok-category-card,
body.ok-page-loaded .ok-tag,
body.ok-page-loaded .ok-section-content{
	transition:background-color var(--ok-transition),
		color var(--ok-transition),
		border-color var(--ok-transition),
		box-shadow var(--ok-transition),
		transform var(--ok-transition),
		opacity var(--ok-transition);
}

/* ==========================================================
   PART 2 : SIDEBAR • OVERLAY • HEADER
========================================================== */

/* ==========================================================
   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 var(--ok-transition),
		visibility var(--ok-transition);
	z-index:var(--ok-z-overlay);
}

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

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

.ok-sidebar{
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	width:var(--ok-sidebar-width);
	max-width:92%;
	height:100vh;
	display:flex;
	flex-direction:column;
	background:var(--ok-bg);
	box-shadow:var(--ok-shadow-lg);
	transform:translateX(-100%);
	transition:transform .38s cubic-bezier(.4,0,.2,1);
	overflow:hidden;
	z-index:var(--ok-z-sidebar);
}

.ok-sidebar.is-open{
	transform:translateX(0);
}

/* ==========================================================
   SIDEBAR INNER
========================================================== */

.ok-sidebar-inner{
	flex:1;
	display:flex;
	flex-direction:column;
	padding:20px;
	overflow-x:hidden;
	overflow-y:auto;
}

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

.ok-sidebar-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding-bottom:20px;
	margin-bottom:24px;
	border-bottom:1px solid var(--ok-border);
	flex-shrink:0;
}

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

.ok-sidebar-logo{
	display:flex;
	align-items:center;
	flex:1;
	min-width:0;
}

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

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

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

.ok-sidebar-close{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	flex-shrink:0;
	border-radius:50%;
	background:var(--ok-bg-alt);
	color:var(--ok-text);
	transition:background-color var(--ok-transition),
		color var(--ok-transition),
		transform var(--ok-transition);
}

.ok-sidebar-close:hover{
	background:var(--ok-primary);
	color:#fff;
	transform:rotate(90deg);
}

.ok-sidebar-close:focus-visible{
	background:var(--ok-primary);
	color:#fff;
}

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

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

@media (max-width:480px){

	.ok-sidebar{
		width:88%;
		max-width:none;
	}

	.ok-sidebar-inner{
		padding:18px;
	}

	.ok-sidebar-logo .custom-logo{
		height:40px;
	}

}

/* ==========================================================
   PART 3 : SIDEBAR SEARCH
========================================================== */

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

.ok-sidebar-search{
	margin:24px 0 30px;
	flex-shrink:0;
}

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

.ok-sidebar .ok-sidebar-search-form{
	display:block;
	width:100%;
	margin:0;
	padding:0;
	border:0;
	background:none;
	box-shadow:none;
}

/* ==========================================================
   SEARCH WRAPPER
========================================================== */

.ok-sidebar .ok-sidebar-search-wrapper{
	position:relative;
	display:block;
	width:100%;
}

/* ==========================================================
   SEARCH ICON
========================================================== */

.ok-sidebar .ok-sidebar-search-icon{
	position:absolute;
	top:50%;
	left:18px;
	display:flex;
	align-items:center;
	justify-content:center;
	width:20px;
	height:20px;
	color:var(--ok-text-light);
	transform:translateY(-50%);
	pointer-events:none;
	z-index:2;
}

.ok-sidebar .ok-sidebar-search-icon svg{
	display:block;
	width:18px;
	height:18px;
}

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

.ok-sidebar .ok-sidebar-search-input{
	display:block;
	width:100%;
	height:54px;
	margin:0;
	padding:0 18px 0 52px;
	border:1px solid var(--ok-border);
	border-radius:999px;
	background:var(--ok-bg-alt);
	color:var(--ok-text);
	font:inherit;
	font-size:.95rem;
	font-weight:500;
	line-height:54px;
	box-shadow:none;
	outline:none;
	appearance:none;
	-webkit-appearance:none;
	transition:background-color .25s,
		border-color .25s,
		box-shadow .25s,
		color .25s;
}

/* ==========================================================
   PLACEHOLDER
========================================================== */

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

/* ==========================================================
   FOCUS
========================================================== */

.ok-sidebar .ok-sidebar-search-input:focus,
.ok-sidebar .ok-sidebar-search-input:focus-visible{
	background:#fff;
	border-color:var(--ok-primary);
	box-shadow:0 0 0 4px rgba(225,6,0,.08);
	outline:none;
}

/* ==========================================================
   REMOVE SEARCH DECORATION
========================================================== */

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

.ok-sidebar .ok-sidebar-search-input::-ms-clear,
.ok-sidebar .ok-sidebar-search-input::-ms-reveal{
	display:none;
	width:0;
	height:0;
}

/* ==========================================================
   AUTOFILL
========================================================== */

.ok-sidebar .ok-sidebar-search-input:-webkit-autofill,
.ok-sidebar .ok-sidebar-search-input:-webkit-autofill:hover,
.ok-sidebar .ok-sidebar-search-input:-webkit-autofill:focus{
	-webkit-box-shadow:0 0 0 1000px var(--ok-bg-alt) inset;
	-webkit-text-fill-color:var(--ok-text);
	transition:background-color 9999s ease-in-out 0s;
}

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

@media (max-width:480px){

	.ok-sidebar .ok-sidebar-search-input{
		height:54px;
		padding-left:60px;
		font-size:15px;
		line-height:54px;
	}

}

/* ==========================================================
   PART 4 : QUICK ACTIONS • PRIMARY NAVIGATION
========================================================== */

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

.ok-quick-actions{
	margin-bottom:28px;
	flex-shrink:0;
}

.ok-action-slider{
	display:grid;
	gap:12px;
}

.ok-action-card{
	position:relative;
	display:flex;
	align-items:center;
	gap:14px;
	padding:14px 16px;
	border:1px solid var(--ok-border);
	border-radius:18px;
	background:var(--ok-bg-alt);
	overflow:hidden;
	transition:background-color var(--ok-transition),
		border-color var(--ok-transition),
		box-shadow var(--ok-transition),
		transform var(--ok-transition);
}

.ok-action-card:hover{
	background:#fff;
	border-color:rgba(225,6,0,.18);
	box-shadow:var(--ok-shadow-sm);
	transform:translateY(-2px);
}

.ok-action-card.is-active{
	background:rgba(225,6,0,.08);
	border-color:var(--ok-primary);
	box-shadow:0 10px 25px rgba(225,6,0,.12);
}

.ok-action-card::after{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:4px;
	height:100%;
	background:var(--ok-primary);
	transform:scaleY(0);
	transform-origin:center;
	transition:transform .3s ease;
}

.ok-action-card:hover::after,
.ok-action-card.is-active::after{
	transform:scaleY(1);
}

/* ==========================================================
   ACTION ICON
========================================================== */

.ok-action-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:46px;
	height:46px;
	flex-shrink:0;
	border:1px solid var(--ok-border);
	border-radius:14px;
	background:#fff;
	transition:background-color var(--ok-transition),
		border-color var(--ok-transition),
		color var(--ok-transition),
		transform var(--ok-transition);
}

.ok-action-card:hover .ok-action-icon,
.ok-action-card.is-active .ok-action-icon{
	background:var(--ok-primary);
	border-color:var(--ok-primary);
	color:#fff;
	transform:scale(1.05);
}

.ok-action-icon svg{
	width:20px;
	height:20px;
}

/* ==========================================================
   ACTION CONTENT
========================================================== */

.ok-action-content{
	flex:1;
	min-width:0;
}

.ok-action-content strong{
	display:block;
	font-size:.96rem;
	font-weight:700;
	color:var(--ok-text);
}

.ok-action-content small{
	display:block;
	margin-top:3px;
	font-size:.78rem;
	color:var(--ok-text-light);
}

/* ==========================================================
   ACTION ARROW
========================================================== */

.ok-action-arrow{
	display:flex;
	align-items:center;
	justify-content:center;
	color:#9ca3af;
	flex-shrink:0;
	transition:color var(--ok-transition),
		transform var(--ok-transition);
}

.ok-action-card:hover .ok-action-arrow{
	color:var(--ok-primary);
	transform:translateX(4px);
}

/* ==========================================================
   PRIMARY NAVIGATION
========================================================== */

.ok-sidebar-navigation{
	margin-bottom:28px;
	flex-shrink:0;
}

.ok-sidebar-navigation ul{
	margin:0;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:8px;
	list-style:none;
}

.ok-sidebar-navigation li{
	margin:0;
	padding:0;
	list-style:none;
}

.ok-sidebar-navigation li.menu-item{
	width:100%;
}

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

.ok-sidebar-navigation a{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	width:100%;
	padding:13px 16px;
	border-radius:16px;
	color:var(--ok-text);
	font-size:.94rem;
	font-weight:600;
	line-height:1.45;
	transition:background-color var(--ok-transition),
		color var(--ok-transition),
		padding-left var(--ok-transition);
}

.ok-sidebar-navigation a:hover{
	background:var(--ok-bg-alt);
	color:var(--ok-primary);
	padding-left:22px;
}

/* ==========================================================
   ACTIVE MENU
========================================================== */

.ok-sidebar-navigation .current-menu-item>a,
.ok-sidebar-navigation .current-menu-ancestor>a,
.ok-sidebar-navigation .current_page_item>a{
	background:rgba(225,6,0,.08);
	color:var(--ok-primary);
	font-weight:700;
}

.ok-sidebar-navigation .current-menu-item>a::before,
.ok-sidebar-navigation .current-menu-ancestor>a::before,
.ok-sidebar-navigation .current_page_item>a::before{
	content:"";
	position:absolute;
	left:0;
	top:10px;
	bottom:10px;
	width:4px;
	border-radius:10px;
	background:var(--ok-primary);
}

/* ==========================================================
   SUB MENU
========================================================== */

.ok-sidebar-navigation .sub-menu{
	margin:8px 0 0 16px;
	padding:0 0 0 14px;
	border-left:2px solid var(--ok-border);
	display:flex;
	flex-direction:column;
	gap:6px;
}

.ok-sidebar-navigation .sub-menu li{
	margin:0;
	padding:0;
}

.ok-sidebar-navigation .sub-menu a{
	padding:10px 14px;
	border-radius:12px;
	font-size:.9rem;
	font-weight:500;
	color:var(--ok-text-light);
}

.ok-sidebar-navigation .sub-menu a:hover{
	background:var(--ok-bg-alt);
	color:var(--ok-primary);
	padding-left:18px;
}

/* ==========================================================
   RIPPLE SUPPORT
========================================================== */

.ok-action-card,
.ok-sidebar-navigation a{
	position:relative;
	overflow:hidden;
}

.ok-ripple{
	position:absolute;
	border-radius:50%;
	transform:scale(0);
	background:rgba(255,255,255,.35);
	pointer-events:none;
	animation:okRipple .6s linear;
}

@keyframes okRipple{
	to{
		transform:scale(4);
		opacity:0;
	}
}

/* ==========================================================
   PART 5 : ACCORDION • CATEGORIES • VIEW ALL
========================================================== */

/* ==========================================================
   SIDEBAR SECTION
========================================================== */

.ok-sidebar-section{
	margin:30px 0;
	flex-shrink:0;
}

.ok-sidebar-section:first-child{
	margin-top:0;
}

.ok-sidebar-section:last-child{
	margin-bottom:0;
}

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

.ok-sidebar-heading,
.ok-section-toggle{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	width:100%;
	margin:0;
	padding:0;
	border:0;
	background:none;
	text-align:left;
	cursor:pointer;
}

.ok-sidebar-heading{
	cursor:default;
}

/* ==========================================================
   SECTION TITLE
========================================================== */

.ok-sidebar-section-title{
	display:flex;
	align-items:center;
	gap:10px;
	flex:1;
	min-width:0;
	font-size:1rem;
	font-weight:700;
	line-height:1.35;
	color:var(--ok-text);
}

.ok-sidebar-section-title svg{
	width:18px;
	height:18px;
	color:var(--ok-primary);
	flex-shrink:0;
}

/* ==========================================================
   CHEVRON
========================================================== */

.ok-section-chevron{
	display:flex;
	align-items:center;
	justify-content:center;
	width:22px;
	height:22px;
	color:var(--ok-text-light);
	flex-shrink:0;
	transition:transform .3s ease,
		color .3s ease;
}

.ok-section-chevron svg{
	width:18px;
	height:18px;
}

.ok-section-toggle.is-open .ok-section-chevron{
	color:var(--ok-primary);
	transform:rotate(180deg);
}

/* ==========================================================
   ACCORDION CONTENT
========================================================== */

.ok-section-content{
	margin-top:18px;
	max-height:0;
	overflow:hidden;
	transition:max-height .35s ease;
}

.ok-section-content>*+*{
	margin-top:12px;
}

/* ==========================================================
   CATEGORY CARD
========================================================== */

.ok-category-card{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	width:100%;
	padding:14px 16px;
	border:1px solid var(--ok-border);
	border-radius:16px;
	background:var(--ok-bg-alt);
	transition:background-color var(--ok-transition),
		border-color var(--ok-transition),
		box-shadow var(--ok-transition),
		transform var(--ok-transition);
}

.ok-category-card::before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	width:4px;
	background:var(--ok-primary);
	transform:scaleY(0);
	transform-origin:center;
	transition:transform .3s ease;
}

.ok-category-card:hover{
	background:#fff;
	border-color:rgba(225,6,0,.18);
	box-shadow:var(--ok-shadow-sm);
	transform:translateX(4px);
}

.ok-category-card:hover::before,
.ok-category-card.is-active::before{
	transform:scaleY(1);
}

.ok-category-card.is-active{
	background:rgba(225,6,0,.08);
	border-color:var(--ok-primary);
	box-shadow:0 10px 24px rgba(225,6,0,.12);
}

/* ==========================================================
   CATEGORY LEFT
========================================================== */

.ok-category-left{
	display:flex;
	align-items:center;
	gap:12px;
	flex:1;
	min-width:0;
}

/* ==========================================================
   CATEGORY ICON
========================================================== */

.ok-category-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	flex-shrink:0;
	border:1px solid var(--ok-border);
	border-radius:12px;
	background:#fff;
	transition:background-color var(--ok-transition),
		border-color var(--ok-transition),
		color var(--ok-transition),
		transform var(--ok-transition);
}

.ok-category-icon svg{
	width:18px;
	height:18px;
}

.ok-category-card:hover .ok-category-icon,
.ok-category-card.is-active .ok-category-icon{
	background:var(--ok-primary);
	border-color:var(--ok-primary);
	color:#fff;
	transform:scale(1.05);
}

/* ==========================================================
   CATEGORY NAME
========================================================== */

.ok-category-name{
	flex:1;
	min-width:0;
	font-size:.95rem;
	font-weight:600;
	color:var(--ok-text);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

/* ==========================================================
   CATEGORY RIGHT
========================================================== */

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

/* ==========================================================
   CATEGORY COUNT
========================================================== */

.ok-category-count{
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:32px;
	height:28px;
	padding:0 10px;
	border:1px solid var(--ok-border);
	border-radius:999px;
	background:#fff;
	font-size:.78rem;
	font-weight:700;
	color:var(--ok-text-light);
	transition:background-color var(--ok-transition),
		border-color var(--ok-transition),
		color var(--ok-transition);
}

.ok-category-card:hover .ok-category-count,
.ok-category-card.is-active .ok-category-count{
	background:var(--ok-primary);
	border-color:var(--ok-primary);
	color:#fff;
}

/* ==========================================================
   CATEGORY ARROW
========================================================== */

.ok-category-arrow{
	display:flex;
	align-items:center;
	justify-content:center;
	color:#9ca3af;
	transition:color var(--ok-transition),
		transform var(--ok-transition);
}

.ok-category-arrow svg{
	width:17px;
	height:17px;
}

.ok-category-card:hover .ok-category-arrow{
	color:var(--ok-primary);
	transform:translateX(4px);
}

/* ==========================================================
   VIEW ALL CARD
========================================================== */

.ok-view-all-card{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:14px;
	width:100%;
	padding:14px 16px;
	border:1px dashed var(--ok-border);
	border-radius:16px;
	background:#fff;
	transition:background-color var(--ok-transition),
		border-color var(--ok-transition),
		color var(--ok-transition),
		box-shadow var(--ok-transition),
		transform var(--ok-transition);
}

.ok-view-all-content{
	flex:1;
	min-width:0;
}

.ok-view-all-content strong{
	display:block;
	font-size:.94rem;
	font-weight:700;
}

.ok-view-all-content small{
	display:block;
	margin-top:3px;
	font-size:.78rem;
	color:var(--ok-text-light);
}

.ok-view-all-arrow{
	display:flex;
	align-items:center;
	justify-content:center;
	transition:transform .3s ease;
}

.ok-view-all-card:hover{
	background:var(--ok-primary);
	border-color:var(--ok-primary);
	color:#fff;
	box-shadow:0 10px 24px rgba(225,6,0,.18);
	transform:translateY(-2px);
}

.ok-view-all-card:hover .ok-view-all-content small{
	color:#fff;
}

.ok-view-all-card:hover .ok-view-all-arrow{
	transform:translateX(5px);
}

/* ==========================================================
   PART 6 : TRENDING TAGS • LEGAL • SOCIAL • FOOTER
========================================================== */

/* ==========================================================
   TRENDING TAGS
========================================================== */

.ok-tag-cloud{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	margin-top:16px;
}

.ok-tag{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:10px 16px;
	border:1px solid var(--ok-border);
	border-radius:999px;
	background:var(--ok-bg-alt);
	color:var(--ok-text);
	font-size:.84rem;
	font-weight:600;
	line-height:1;
	transition:background-color var(--ok-transition),
		border-color var(--ok-transition),
		color var(--ok-transition),
		box-shadow var(--ok-transition),
		transform var(--ok-transition);
}

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

/* ==========================================================
   LEGAL MENU
========================================================== */

.ok-legal-nav{
	margin-top:16px;
}

.ok-legal-nav ul{
	display:flex;
	flex-direction:column;
	gap:8px;
	margin:0;
	padding:0;
	list-style:none;
}

.ok-legal-nav li{
	margin:0;
	padding:0;
	list-style:none;
}

.ok-legal-nav a{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:13px 15px;
	border-radius:14px;
	color:var(--ok-text);
	font-size:.92rem;
	font-weight:600;
	transition:background-color var(--ok-transition),
		color var(--ok-transition),
		padding-left var(--ok-transition);
}

.ok-legal-nav a:hover{
	background:var(--ok-bg-alt);
	color:var(--ok-primary);
	padding-left:20px;
}

.ok-legal-nav svg{
	width:17px;
	height:17px;
	color:#9ca3af;
	transition:color var(--ok-transition),
		transform var(--ok-transition);
}

.ok-legal-nav a:hover svg{
	color:var(--ok-primary);
	transform:translateX(4px);
}

/* ==========================================================
   SOCIAL
========================================================== */

.ok-social-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:12px;
	margin-top:18px;
}

.ok-social-grid a{
	display:flex;
	align-items:center;
	justify-content:center;
	height:52px;
	border:1px solid var(--ok-border);
	border-radius:16px;
	background:var(--ok-bg-alt);
	color:var(--ok-text);
	transition:background-color var(--ok-transition),
		border-color var(--ok-transition),
		color var(--ok-transition),
		box-shadow var(--ok-transition),
		transform var(--ok-transition);
}

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

.ok-social-grid svg{
	width:22px;
	height:22px;
}

/* ==========================================================
   SIDEBAR FOOTER
========================================================== */

.ok-sidebar-footer{
	margin-top:auto;
	padding-top:22px;
	padding-bottom:8px;
	border-top:1px solid var(--ok-border);
	text-align:center;
	flex-shrink:0;
}

/* ==========================================================
   FOOTER BRAND
========================================================== */

.ok-footer-brand{
	display:flex;
	align-items:center;
	justify-content:center;
	margin-bottom:14px;
}

.ok-footer-brand img{
	display:block;
	width:auto;
	height:38px;
}

/* ==========================================================
   FOOTER TAGLINE
========================================================== */

.ok-footer-tagline{
	margin:0;
	font-size:.82rem;
	line-height:1.7;
	color:var(--ok-text-light);
}

/* ==========================================================
   FOOTER META
========================================================== */

.ok-footer-meta{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:10px;
	margin-top:14px;
	font-size:.78rem;
	color:#9ca3af;
}

.ok-footer-meta .ok-divider{
	width:4px;
	height:4px;
	border-radius:50%;
	background:#6b7280;
	flex-shrink:0;
}

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

@media (max-width:480px){

	.ok-social-grid{
		gap:10px;
	}

	.ok-social-grid a{
		height:48px;
		border-radius:14px;
	}

	.ok-sidebar-footer{
		padding-bottom:18px;
	}

	.ok-footer-meta{
		flex-direction:column;
		gap:6px;
	}

	.ok-footer-meta .ok-divider{
		display:none;
	}

}

/* ==========================================================
   PART 7 : ANIMATIONS • ACCESSIBILITY • RESPONSIVE • DARK MODE
========================================================== */

/* ==========================================================
   SECTION ENTRANCE
========================================================== */

.ok-sidebar-section{
	animation:okSidebarFade .45s ease both;
}

.ok-sidebar-section:nth-of-type(2){
	animation-delay:.05s;
}

.ok-sidebar-section:nth-of-type(3){
	animation-delay:.1s;
}

.ok-sidebar-section:nth-of-type(4){
	animation-delay:.15s;
}

.ok-sidebar-section:nth-of-type(5){
	animation-delay:.2s;
}

.ok-sidebar-section:nth-of-type(6){
	animation-delay:.25s;
}

@keyframes okSidebarFade{
	from{
		opacity:0;
		transform:translateY(12px);
	}
	to{
		opacity:1;
		transform:translateY(0);
	}
}

/* ==========================================================
   SIDEBAR FADE
========================================================== */

.ok-page-loaded .ok-sidebar{
	animation:okSidebarLoaded .35s ease;
}

@keyframes okSidebarLoaded{
	from{
		opacity:0;
	}
	to{
		opacity:1;
	}
}

/* ==========================================================
   RIPPLE
========================================================== */

.ok-ripple{
	position:absolute;
	border-radius:50%;
	transform:scale(0);
	background:rgba(255,255,255,.35);
	pointer-events:none;
	animation:okRipple .6s linear;
}

@keyframes okRipple{
	to{
		transform:scale(4);
		opacity:0;
	}
}

/* ==========================================================
   MICRO INTERACTIONS
========================================================== */

.ok-action-card,
.ok-category-card,
.ok-view-all-card,
.ok-tag,
.ok-social-grid a{
	will-change:transform;
}

.ok-action-card:hover{
	transform:translateY(-2px);
}

.ok-category-card:hover{
	transform:translateX(4px);
}

.ok-view-all-card:hover{
	transform:translateY(-2px);
}

.ok-tag:hover{
	transform:translateY(-2px);
}

.ok-social-grid a:hover{
	transform:translateY(-3px);
}

/* ==========================================================
   ACTIVE STATE
========================================================== */

.ok-action-card:active,
.ok-category-card:active,
.ok-view-all-card:active,
.ok-tag:active,
.ok-social-grid a:active{
	transform:scale(.97);
}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

.ok-sidebar a:focus-visible,
.ok-sidebar button:focus-visible,
.ok-sidebar input:focus-visible{
	outline:2px solid var(--ok-primary);
	outline-offset:3px;
}

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

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

	.ok-sidebar *,
	.ok-sidebar *::before,
	.ok-sidebar *::after{
		animation:none!important;
		transition:none!important;
		scroll-behavior:auto!important;
	}

}

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

@media (prefers-contrast:more){

	.ok-sidebar .ok-action-card,
	.ok-sidebar .ok-category-card,
	.ok-sidebar .ok-tag,
	.ok-sidebar .ok-sidebar-search-input{
		border-width:2px;
	}

}

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

@media (min-width:1200px){

	.ok-sidebar{
		width:360px;
	}

	.ok-sidebar-inner{
		padding-inline:24px;
	}

}

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

@media (max-width:1024px){

	:root{
		--ok-sidebar-width:340px;
	}

	.ok-action-card,
	.ok-category-card{
		padding:13px 15px;
	}

}

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

@media (max-width:768px){

	:root{
		--ok-sidebar-width:320px;
	}

	.ok-action-card,
	.ok-category-card{
		border-radius:16px;
	}

	.ok-action-icon,
	.ok-category-icon{
		width:42px;
		height:42px;
	}

}

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

@media (max-width:480px){

	:root{
		--ok-sidebar-width:88%;
	}

	.ok-sidebar-inner{
		padding:18px;
	}

	.ok-action-content strong,
	.ok-category-name{
		font-size:.92rem;
	}

	.ok-action-content small{
		font-size:.76rem;
	}

	.ok-sidebar-search-input{
		height:48px;
		font-size:.9rem;
	}

	.ok-social-grid{
		grid-template-columns:repeat(4,1fr);
		gap:10px;
	}

}

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

@media (min-width:1600px){

	.ok-sidebar{
		width:380px;
	}

}

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

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

	.ok-sidebar{
		--ok-bg:#111827;
		--ok-bg-alt:#1f2937;
		--ok-bg-hover:#2b3648;
		--ok-text:#f8fafc;
		--ok-text-light:#cbd5e1;
		--ok-border:#374151;
		background:var(--ok-bg);
	}

	.ok-sidebar .ok-sidebar-search-input,
	.ok-sidebar .ok-action-icon,
	.ok-sidebar .ok-category-icon,
	.ok-sidebar .ok-category-count{
		background:#1f2937;
		border-color:#374151;
		color:var(--ok-text);
	}

}

/* ==========================================================
   PRINT
========================================================== */

@media print{

	.ok-sidebar,
	.ok-sidebar-overlay{
		display:none!important;
	}

}

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

.ok-sidebar{
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
}

.ok-action-card,
.ok-category-card{
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
}

/* ==========================================================
   OPTIONAL UTILITY ANIMATIONS
========================================================== */

.ok-fade-in{
	animation:okFadeIn .35s ease both;
}

.ok-slide-up{
	animation:okSlideUp .35s ease both;
}

.ok-scale-in{
	animation:okScaleIn .3s ease both;
}

@keyframes okFadeIn{
	from{
		opacity:0;
	}
	to{
		opacity:1;
	}
}

@keyframes okSlideUp{
	from{
		opacity:0;
		transform:translateY(16px);
	}
	to{
		opacity:1;
		transform:translateY(0);
	}
}

@keyframes okScaleIn{
	from{
		opacity:0;
		transform:scale(.95);
	}
	to{
		opacity:1;
		transform:scale(1);
	}
}

/* ==========================================================
   PART 8 : FINAL CLEANUP
========================================================== */

/* ==========================================================
   SMOOTH RENDERING
========================================================== */

.ok-sidebar,
.ok-sidebar *{
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

/* ==========================================================
   BOX SIZING
========================================================== */

.ok-sidebar *,
.ok-sidebar *::before,
.ok-sidebar *::after{
	box-sizing:border-box;
}

/* ==========================================================
   FLEX FIX
========================================================== */

.ok-sidebar-header,
.ok-sidebar-search,
.ok-quick-actions,
.ok-sidebar-navigation,
.ok-sidebar-section,
.ok-sidebar-footer{
	flex-shrink:0;
}

/* ==========================================================
   SVG FIX
========================================================== */

.ok-sidebar svg{
	flex-shrink:0;
	pointer-events:none;
}

/* ==========================================================
   IMAGE FIX
========================================================== */

.ok-sidebar img{
	max-width:100%;
	height:auto;
	display:block;
}

/* ==========================================================
   LINK RESET
========================================================== */

.ok-sidebar a{
	text-decoration:none;
}

.ok-sidebar a:hover{
	text-decoration:none;
}

/* ==========================================================
   BUTTON RESET
========================================================== */

.ok-sidebar button{
	font:inherit;
	background:none;
	border:0;
	cursor:pointer;
}

/* ==========================================================
   INPUT FIX
========================================================== */

.ok-sidebar input{
	font:inherit;
}

.ok-sidebar input::-moz-focus-inner{
	border:0;
}

/* ==========================================================
   SCROLL FIX
========================================================== */

.ok-sidebar-inner{
	-webkit-overflow-scrolling:touch;
}

/* ==========================================================
   SAFETY
========================================================== */

.ok-sidebar,
.ok-sidebar-overlay{
	isolation:isolate;
}