@charset "utf-8";

/* ============================================
   TRUST BADGES - Reusable Component
   ============================================ */

#badges {
	--badge-width:			14%;
	--badge-min-width:		164px;
	--badge-size:			100px;
	--badge-hd-size:		22px;
	--badge-font-size:		14px;
	--badges-padding:		1.9em 0 2.1em;
	--badge-margin-y:		10px;
	
	z-index: 2;
	background: #DAE6F3;
	padding: 0 2em;
}

#badges .container {
	display: flex;
	gap: 3px;
	align-items: flex-start;
	flex-wrap: wrap;
	justify-content: space-evenly;
	padding: var(--badges-padding);
}

#badges .section-arrow-down::after {
	background: #DAE6F3;
	left: 11.5%;
}

#badges .badge-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: var(--badge-width);
	min-width: var(--badge-min-width);
	text-align: center;
	font-size: var(--badge-font-size);
}

#badges .badge {
	width: var(--badge-size);
	height: var(--badge-size);
	border-radius: 50%;
	background: #FFF url(../images/icon/badge_back.png) no-repeat center;
	background-size: contain;
	box-shadow: 0 0 1.25em #FFF;
}

#badges .badge-hd {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #F67A06 radial-gradient(circle at top left, #FCB909, #F67A06);
	color: white;
	padding: 4px 0.6em 5px;
	min-width: calc(var(--badge-size) * 1.2);
	border-radius: 0.5em;
	border: 2px solid #FFF;
	font-weight: 800;
	font-size: var(--badge-hd-size);
	line-height: 1;
	white-space: nowrap;
	text-shadow: 0 1px 1px rgba(0,0,0,1);
	box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

#badges .badge-hd em {
	font-size: 0.7em;
	font-weight: 600;
}

#badges .badge-hd.free { background: #ff9800; }
#badges .badge-hd.guaranteed { background: #4caf50; }
#badges .badge-hd.safe { background: #2196f3; }
#badges .badge-hd.ico { background: #9c27b0; }

#badges .badge-txt {
	margin-top: var(--badge-margin-y);
	color: #313140;
	font-size: calc(var(--badge-font-size) - 1px);
	font-weight: 600;
	line-height: 1.3;
}


/* ============================================
   RESPONSIVE - Trust Badges
   ============================================ */

@media only screen and (max-width: 1300px) {
	#badges {
		--badge-min-width: calc(var(--badge-size) * 1.3);
		--badge-size: 90px;
		--badge-hd-size: 20px;
		--badge-font-size: 13px;
		--badges-padding: 1.8em 0 2em;
	}
	#badges { padding: 0 1em; }
}

@media only screen and (max-width: 1200px) {
	#badges {
		--badge-size: 80px;
		--badge-hd-size: 18px;
		--badge-font-size: 12px;
		--badges-padding: 1.7em 0 1.9em;
	}
	#badges .badge-hd { padding: 4px 0.6em; }
}

@media only screen and (max-width: 1100px) {
	#badges {
		--badge-width: 14%;
		--badge-size: 76px;
		--badge-hd-size: 17px;
		--badge-font-size: 11.5px;
		--badges-padding: 1.6em 0 1.8em;
	}
	#badges .badge-hd { padding: 3.5px 0.6em; }
}

@media only screen and (max-width: 1000px) {
	#badges {
		--badge-width: 20%;
		--badge-size: 80px;
		--badge-hd-size: 18px;
		--badge-font-size: 12px;
		--badges-padding: 1.6em 0 1.8em;
	}
	#badges .badge-hd { padding: 4px 0.6em; }
	#badges .container { justify-content: center; gap: 2em; }
}

@media only screen and (max-width: 750px) {
	#badges {
		--badge-min-width: 130px;
		--badge-width: 20%;
		--badge-size: 76px;
		--badge-hd-size: 17px;
		--badge-font-size: 11px;
		--badges-padding: 1.5em 0 1.7em;
		--badge-margin-y: 9px;
	}
	#badges .section-arrow-down::after { display: none; }
	#badges .badge-hd { padding: 3.5px 0.6em; }
	#badges .container { gap: 1.5em 1em; }
}

@media only screen and (max-width: 600px) {
	#badges {
		--badge-min-width: 106px;
		--badge-width: 20%;
		--badge-size: 72px;
		--badge-hd-size: 15px;
		--badge-font-size: 10px;
		--badges-padding: 1.4em 0 1.6em;
		--badge-margin-y: 8px;
	}
	#badges .badge-hd { padding: 3px 0.6em; }
}

@media only screen and (max-width: 500px) {
	#badges {
		--badge-min-width: 96px;
		--badge-width: 20%;
		--badge-size: 68px;
		--badge-hd-size: 14px;
		--badge-margin-y: 7px;
	}
}

@media only screen and (max-width: 450px) {
	#badges {
		--badge-min-width: 82px;
		--badge-width: 20%;
		--badge-size: 64px;
		--badge-hd-size: 13px;
		--badge-margin-y: 6px;
	}
	#badges .badge-hd { padding: 3px 0.6em; }
	#badges .container { gap: 1.5em 1em; }
}

@media only screen and (max-width: 400px) {
	#badges {
		--badge-min-width: 70px;
		--badge-width: 20%;
		--badge-size: 60px;
		--badge-hd-size: 12px;
		--badge-font-size: 9px;
		--badges-padding: 1.4em 0 1.6em;
		--badge-margin-y: 5px;
	}
	#badges .badge-hd { padding: 3px 0.6em; }
	#badges .container { justify-content: space-evenly; gap: 1em; }
}