/* ==========================================================
   ONLINE KHABRI – PREMIUM FOOTER
   PART 1 : FOOTER • CONTAINER • BRAND • SEARCH
========================================================== */

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

.ok-footer{
	position:relative;
	overflow:hidden;
	width:100%;
	margin:0;
	padding:44px 24px 28px;
	box-sizing:border-box;
	background:
		radial-gradient(circle at top right,rgba(225,6,0,.10),transparent 34%),
		radial-gradient(circle at bottom left,rgba(255,255,255,.03),transparent 42%),
		linear-gradient(180deg,#1b1b1b 0%,#141414 55%,#101010 100%);
	border-top:4px solid var(--ok-primary);
	color:rgba(255,255,255,.82);
	isolation:isolate;
}

.ok-footer::before{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 36%);
	pointer-events:none;
}

.ok-footer::after{
	content:"";
	position:absolute;
	top:-170px;
	right:-130px;
	width:420px;
	height:420px;
	border-radius:50%;
	background:radial-gradient(circle,rgba(225,6,0,.16),transparent 72%);
	filter:blur(22px);
	pointer-events:none;
}

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

.ok-footer-container{
	position:relative;
	z-index:2;
	max-width:1280px;
	margin:0 auto;
	display:grid;
	grid-template-columns:1.35fr 1fr 1fr 1fr 1fr;
	gap:54px;
	align-items:flex-start;
}

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

.ok-footer-brand{
	display:flex;
	flex-direction:column;
	min-width:0;
}

.ok-footer-logo-wrap{
	display:flex;
	align-items:center;
	justify-content:center;
	margin-bottom:22px;
	flex-shrink:0;
	border-radius:16px;
}

.ok-footer-brand-logo{
	display:block;
	width:120px!important;
	height:auto!important;
	object-fit:contain;
	border-radius:10px;
	transition:transform .35s ease,filter .35s ease;
}

.ok-footer-brand:hover .ok-footer-brand-logo{
	transform:translateY(-4px) scale(1.03);
	filter:drop-shadow(0 10px 24px rgba(225,6,0,.22));
}

.ok-footer-brand-title{
	margin:0;
	color:#fff;
	font-size:32px;
	font-weight:700;
	line-height:1.2;
	letter-spacing:-.4px;
}

.ok-footer-brand-tagline{
	margin:12px 0 0;
	max-width:290px;
	color:rgba(255,255,255,.64);
	font-size:15px;
	font-weight:500;
	line-height:1.8;
}

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

.ok-footer-search-form{
	width:100%;
	margin-top:30px;
}

.ok-footer-search-wrap{
	position:relative;
	width:100%;
}

.ok-footer-search-input{
	width:100%;
	height:58px;
	padding:0 68px 0 20px;
	border:1px solid rgba(255,255,255,.08);
	border-radius:18px;
	outline:none;
	background:#fff;
	color:#111;
	font-size:15px;
	font-weight:500;
	appearance:none;
	-webkit-appearance:none;
	box-shadow:0 14px 34px rgba(0,0,0,.20);
	transition:
		border-color .25s ease,
		box-shadow .25s ease,
		transform .25s ease;
}

.ok-footer-search-input:hover{
	transform:translateY(-2px);
}

.ok-footer-search-input:focus,
.ok-footer-search-input:focus-visible{
	border-color:rgba(225,6,0,.32);
	box-shadow:
		0 0 0 4px rgba(225,6,0,.12),
		0 16px 36px rgba(0,0,0,.24);
}

.ok-footer-search-input::placeholder{
	color:#9b9b9b;
	opacity:1;
}

.ok-footer-search-btn{
	position:absolute;
	top:50%;
	right:8px;
	width:44px;
	height:44px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:0;
	border-radius:14px;
	background:var(--ok-primary);
	color:#fff;
	cursor:pointer;
	transform:translateY(-50%);
	transition:
		background .25s ease,
		transform .25s ease,
		box-shadow .25s ease;
}

.ok-footer-search-btn:hover{
	background:var(--ok-primary-hover);
	transform:translateY(-50%) scale(1.05);
	box-shadow:0 10px 24px rgba(225,6,0,.28);
}

.ok-footer-search-btn:active{
	transform:translateY(-50%) scale(.95);
}

.ok-footer-search-btn svg{
	width:18px;
	height:18px;
	display:block;
}

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

/* ==========================================================
   ONLINE KHABRI – PREMIUM FOOTER
   PART 2 : COLUMNS • TITLES • LINKS
========================================================== */

/* ==========================
   COLUMNS
========================== */

.ok-footer-col{
	display:flex;
	flex-direction:column;
	min-width:0;
}

/* ==========================
   TITLES
========================== */

.ok-footer-title{
	display:flex;
	align-items:center;
	gap:10px;
	margin:0;
	padding:0;
	color:#fff;
	font-size:17px;
	font-weight:700;
	line-height:1.3;
	letter-spacing:-.2px;
}

.ok-title-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:22px;
	height:22px;
	color:var(--ok-primary);
	flex-shrink:0;
}

.ok-title-icon svg{
	display:block;
	width:20px;
	height:20px;
	stroke-width:2.2;
}

.ok-footer-divider{
	width:46px;
	height:4px;
	margin:14px 0 24px;
	border-radius:50px;
	background:var(--ok-primary);
}

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

.ok-footer-nav{
	display:flex;
	flex-direction:column;
	gap:4px;
}

.ok-footer-nav a{
	position:relative;
	display:inline-flex;
	align-items:center;
	width:fit-content;
	padding:9px 0;
	color:rgba(255,255,255,.76);
	text-decoration:none;
	font-size:15px;
	font-weight:500;
	line-height:1.6;
	transition:
		color .25s ease,
		transform .25s ease;
}

.ok-footer-nav a::before{
	content:"";
	width:0;
	height:2px;
	margin-right:0;
	border-radius:20px;
	background:var(--ok-primary);
	transition:
		width .25s ease,
		margin-right .25s ease;
}

.ok-footer-nav a:hover{
	color:#fff;
	transform:translateX(6px);
}

.ok-footer-nav a:hover::before{
	width:14px;
	margin-right:10px;
}

.ok-footer-nav a:focus-visible{
	outline:none;
	color:#fff;
	transform:translateX(6px);
}

.ok-footer-nav a:focus-visible::before{
	width:14px;
	margin-right:10px;
}

.ok-footer-nav a:last-child{
	margin-bottom:0;
}

/* ==========================================================
   ONLINE KHABRI – PREMIUM FOOTER
   PART 3 : SOCIAL • FOOTER BOTTOM • RESPONSIVE
========================================================== */

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

.ok-footer-socials{
	display:flex;
	flex-wrap:nowrap;
	gap:12px;
	margin-top:2px;
}

.ok-footer-socials a{
	display:flex;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	border:1px solid rgba(255,255,255,.10);
	border-radius:14px;
	background:rgba(255,255,255,.05);
	color:#fff;
	text-decoration:none;
	backdrop-filter:blur(10px);
	transition:
		background .28s ease,
		border-color .28s ease,
		color .28s ease,
		transform .28s ease,
		box-shadow .28s ease;
}

.ok-footer-socials a svg{
	width:20px;
	height:20px;
	display:block;
	stroke-width:2;
}

.ok-footer-socials a:hover{
	background:var(--ok-primary);
	border-color:var(--ok-primary);
	color:#fff;
	transform:translateY(-4px);
	box-shadow:0 12px 28px rgba(225,6,0,.28);
}

.ok-footer-socials a:focus-visible{
	outline:none;
	background:var(--ok-primary);
	border-color:var(--ok-primary);
	transform:translateY(-4px);
}

/* ==========================
   FOOTER BOTTOM
========================== */

.ok-footer-bottom{
	position:relative;
	z-index:2;
	width:100%;
	margin:72px 0 0;
	padding:26px 0 0;
	border-top:1px solid rgba(255,255,255,.08);
	text-align:center;
}

.ok-footer-copyright{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	flex-wrap:wrap;
	margin:0;
	color:rgba(255,255,255,.72);
	font-size:14px;
	font-weight:500;
	line-height:1.8;
	letter-spacing:.2px;
}

.ok-footer-copy-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	width:18px;
	height:18px;
	color:var(--ok-primary);
}

.ok-footer-copy-icon svg{
	width:100%;
	height:100%;
}

.ok-footer-tagline{
	margin:6px 0 0;
	color:rgba(255,255,255,.46);
	font-size:13px;
	font-weight:500;
	line-height:1.7;
}

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

@media (max-width:991px){

	.ok-footer{
		padding:64px 22px 32px;
	}

	.ok-footer-container{
		grid-template-columns:repeat(3 ,1fr);
		gap:42px;
	}

	.ok-footer-brand{
		grid-column:1/-1;
	}

	.ok-footer-brand-title{
		font-size:30px;
	}

	.ok-footer-bottom{
		margin-top:60px;
	}

}

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

@media (max-width:600px){

	.ok-footer{
		padding:42px 18px 28px;
	}

	.ok-footer-container{
		grid-template-columns:repeat(2, 1fr);
		gap:34px;
	}

	.ok-footer-brand{
		align-items:center;
		text-align:center;
	}

	.ok-footer-logo-wrap{
		margin:0 auto 20px;
	}

	.ok-footer-brand-title{
		font-size:28px;
	}

	.ok-footer-brand-tagline{
		max-width:280px;
		margin-top:10px;
	}

	.ok-footer-search-form{
		margin-top:26px;
	}

	.ok-footer-col{
		align-items:flex-start;
	}

	.ok-footer-title{
		font-size:18px;
	}

	.ok-footer-divider{
		margin:12px 0 22px;
	}

	.ok-footer-nav a{
		padding:10px 0;
	}

	.ok-footer-socials{
		justify-content:flex-start;
		gap:10px;
	}

	.ok-footer-socials a{
		width:44px;
		height:44px;
	}

	.ok-footer-bottom{
		margin-top:54px;
		padding-top:22px;
	}

	.ok-footer-copyright{
		font-size:13px;
	}

	.ok-footer-tagline{
		font-size:12px;
	}

	.ok-footer-col ul,
	.ok-footer-col li{
		list-style:none;
	}

	.ok-footer-col li::before,
	.ok-footer-col li::marker{
		content:none!important;
	}

}