.hb-katdropdown-wrap{
	--hb-red:#d6111e;
	--hb-gold:#ddc76d;
	--hb-black:#000;
	--hb-white:#fff;
	display:flex;
	flex-wrap:wrap;
	align-items:stretch;
	gap:8px;
	width:100%;
	max-width:300px;
	box-sizing:border-box;
}
.hb-katdropdown-select{
	flex:1 1 180px;
	min-width:0;
	width:100%;
	max-width:100%;
	background:var(--hb-black);
	color:var(--hb-white);
	border:2px solid var(--hb-red);
	border-radius:10px;
	padding:10px 36px 10px 12px;
	line-height:1.2;
	font-size:15px;
	outline:none;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	box-sizing:border-box;
	cursor:pointer;
	transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ddc76d'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 10px center;
	background-size:18px 18px;
}
.hb-katdropdown-select:hover{
	border-color:var(--hb-white);
}
.hb-katdropdown-select:focus{
	border-color:var(--hb-gold);
	box-shadow:0 0 0 3px rgba(221,199,109,.25);
}
.hb-katdropdown-select option{
	background:var(--hb-black);
	color:var(--hb-white);
}

.hb-katdropdown-go{
	flex:0 0 auto;
	background:var(--hb-red);
	color:var(--hb-white);
	border:2px solid var(--hb-red);
	border-radius:10px;
	padding:10px 18px;
	font-size:15px;
	font-weight:600;
	line-height:1.2;
	cursor:pointer;
	transition:background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
	box-sizing:border-box;
}
.hb-katdropdown-go:hover:not(:disabled){
	background:var(--hb-black);
	color:var(--hb-gold);
	border-color:var(--hb-gold);
}
.hb-katdropdown-go:focus{
	outline:none;
	box-shadow:0 0 0 3px rgba(221,199,109,.25);
	border-color:var(--hb-gold);
}
.hb-katdropdown-go:disabled{
	opacity:.45;
	cursor:not-allowed;
}

.hb-katdropdown-helper{
	flex:1 1 100%;
	margin-top:6px;
	color:var(--hb-white);
	opacity:.75;
	font-size:12px;
}

@media (max-width:320px){
	.hb-katdropdown-go{
		flex:1 1 100%;
	}
}