/*!
* PT. IMAJIKU CIPTA MEDIA
* Copyright 2019-2024 IMAJIKU.
*/

/* = BUTTON
-------------------------------------------------------------*/
.hc-btn {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	color: #000000;
	background-color: var(--hc-color-gray-100);
	text-decoration: none;
	vertical-align: middle;
	border: 1px solid transparent;
	border-radius: 0.375rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
}

/* button variant solid */
.hc-btn.variant-solid {
	color: var(--hc-color-white) !important;
	background-color: var(--hc-color-button);
	font-family: var(--hc-font-family-2);
	font-weight: 400;
	font-size: 16px;
	padding: 5px 20px;
	min-width: 120px;
	justify-content: center;
}

.hc-btn.variant-solid:hover {
	color: var(--hc-color-white) !important;
	background-color: var(--hc-color-button-hover);
}

/* button variant outline */
.hc-btn.variant-outline {
	color: var(--hc-color-button-border) !important;
	border-color: var(--hc-color-button-border);
	background-color: var(--hc-color-white);
	font-family: var(--hc-font-family-2);
	font-weight: 400;
	font-size: 16px;
	padding: 5px 20px;
	min-width: 120px;
	justify-content: center;
}

.hc-btn.variant-outline:hover {
	color: var(--hc-color-white) !important;
	background-color: var(--hc-color-button-border);
}

/* button variant plain */
.hc-btn.variant-plain {
	color: var(--hc-color-button) !important;
	border-color: transparent;
	background-color: transparent;
	font-family: var(--hc-font-family-2);
	font-weight: 400;
	font-size: 16px;
	padding: 0;
	min-width: 120px;
	justify-content: center;
}

.hc-btn.variant-plain:hover {
	color: var(--hc-color-button-hover) !important;
	background-color: transparent;
}

/*button icon*/
.hc-btn-icn {
	position: relative;
	display: inline-flex;
	width: 20px;
	height: 20px;
	align-items: center;
	justify-content: center;
}

.hc-btn-icn i,
.hc-btn-icn svg,
.hc-btn-icn span {
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}

/*button disabled*/
.hc-btn[disabled],
.hc-btn.disabled {
	background-color: var(--hc-color-gray-600) !important;
	border-color: var(--hc-color-gray-600) !important;
	color: var(--hc-color-white) !important;
	opacity: 0.5;
}

.hc-btn[disabled]:hover,
.hc-btn.disabled:hover {
	background-color: var(--hc-color-gray-600) !important;
	border-color: var(--hc-color-gray-600) !important;
	color: var(--hc-color-white) !important;
	cursor: not-allowed;
}

/*button type button like link*/
.btn-mjk-link {
	background-color: transparent !important;
	padding: 0;
}

/* =BUTTON VARIATION
------------------------------------------------------------ */
/* button sign in up sosmed */
.hc-btn.variant-sign {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	color: var(--hc-color-text-body) !important;
	border: 1px solid var(--hc-color-gray-400);
	background-color: var(--hc-color-white);
	min-height: 42px;
	padding: 3px 12px 3px;
	font-family: var(--hc-font-family-2);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.2;
	transition: all 0.6s ease;
	-webkit-transition: all 0.6s ease;
	-moz-transition: all 0.6s ease;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	column-gap: 10px;
}

.hc-btn.variant-sign:hover {
	background-color: var(--hc-color-gray-50);
	border-color: var(--hc-color-gray-400);
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}

.hc-btn.variant-sign img {
	display: block;
	width: 20px;
	height: 20px;
}

.hc-btn.variant-sign:visited,
.hc-btn.variant-sign:link {
	color: var(--hc-color-white);
}

.hc-btn.variant-sign:focus,
.hc-btn.variant-sign:focus-visible {
	outline: none;
}

/*button linear gradient*/
.btn-linear-gradient {
	color: var(--hc-color-white) !important;
	background-image: linear-gradient(to right, #FF512F 50%, #DD2476 100%);
	border: 2px solid transparent;
	border-image: linear-gradient(to right, #FF512F 50%, #DD2476 100%);
	border-image-slice: 1 !important;
}

.btn-linear-gradient:hover {
	color: #FF512F !important;
	background: transparent;
}

/*button radial gradient*/
.btn-radial-gradient {
	color: var(--hc-color-white) !important;
	background-image: radial-gradient(circle, #FF512F 50%, #DD2476 100%);
	border: 2px solid transparent;
	border-image: radial-gradient(circle, #FF512F 50%, #DD2476 100%);
	border-image-slice: 1 !important;
}

.btn-radial-gradient:hover {
	color: #FF512F !important;
	background: transparent;
}

/*3d button*/
.btn-3d {
	box-shadow: 4px 4px var(--hc-color-button-hover);
	-webkit-box-shadow: 4px 4px var(--hc-color-button-hover);
	-moz-box-shadow: 4px 4px var(--hc-color-button-hover);
}

.btn-3d:hover {
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

.btn-3d-hvr:hover {
	box-shadow: 4px 4px var(--hc-color-button);
	-webkit-box-shadow: 4px 4px var(--hc-color-button);
	-moz-box-shadow: 4px 4px var(--hc-color-button);
}

/*button hover effect push-out-horizontal*/
.btn-mjk.effect-push-out-horizontal {
	position: relative;
	background-color: var(--hc-color-button);
}

.btn-mjk.effect-push-out-horizontal::before {
	background: var(--hc-color-white);
	border-radius: .25rem;
	-webkit-border-radius: .25rem;
	-moz-border-radius: .25rem;
}

.btn-mjk.effect-push-out-horizontal:hover,
.btn-mjk.effect-push-out-horizontal:focus,
.btn-mjk.effect-push-out-horizontal:active {
	color: var(--hc-color-button) !important;
}

.btn-mjk.effect-push-out-horizontal:hover i,
.btn-mjk.effect-push-out-horizontal:focus i,
.btn-mjk.effect-push-out-horizontal:active i {
	color: var(--hc-color-button) !important;
}

/*button hover effect push-in-horizontal*/
.btn-mjk.effect-push-in-horizontal {
	position: relative;
	background-color: var(--hc-color-white);
	border-color: var(--hc-color-button);
}

.btn-mjk.effect-push-in-horizontal::before {
	background: var(--hc-color-button);
	border-radius: .25rem;
	-webkit-border-radius: .25rem;
	-moz-border-radius: .25rem;
}

.btn-mjk.effect-push-in-horizontal:hover,
.btn-mjk.effect-push-in-horizontal:focus,
.btn-mjk.effect-push-in-horizontal:active {
	color: var(--hc-color-button) !important;
}

/*button hover effect swipe-right*/
.btn-mjk.effect-swipe-right::before {
	background: var(--hc-color-white);
	border-radius: .25rem;
	-webkit-border-radius: .25rem;
	-moz-border-radius: .25rem;
}

.btn-mjk.effect-swipe-right:hover,
.btn-mjk.effect-swipe-right:focus,
.btn-mjk.effect-swipe-right:active {
	color: var(--hc-color-button) !important;
}

/*button hover effect swipe-left*/
.btn-mjk.effect-swipe-left::before {
	background: var(--hc-color-white);
	border-radius: .25rem;
	-webkit-border-radius: .25rem;
	-moz-border-radius: .25rem;
}

.btn-mjk.effect-swipe-left:hover,
.btn-mjk.effect-swipe-left:focus,
.btn-mjk.effect-swipe-left:active {
	color: var(--hc-color-button) !important;
}

/*button hover effect scale*/
.effect-scale-out:hover,
.effect-scale-out:focus,
.effect-scale-out:active {
	transform: scale(0.9);
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
}

.effect-scale-in:hover,
.effect-scale-in:focus,
.effect-scale-in:active {
	backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
	transform: scale(1.09) perspective(1px) translateZ(0);
	-webkit-transform: scale(1.09) perspective(1px) translateZ(0);
	-moz-transform: scale(1.09) perspective(1px) translateZ(0);
}

/*button hover effect scale*/
.effect-rotate:hover i,
.effect-rotate:hover span {
	transform: rotateY(360deg);
	-webkit-transform: rotateY(360deg);
	-moz-transform: rotateY(360deg);
	transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
}

.effect-rotate:hover i,
.effect-rotate:hover svg,
.effect-rotate:hover span {
	transform: rotateY(360deg);
	-webkit-transform: rotateY(360deg);
	-moz-transform: rotateY(360deg);
	transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
}

.effect-rotateUp:hover i,
.effect-rotateUp:hover svg,
.effect-rotateUp:hover span {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}

.effect-rotateDown:hover i,
.effect-rotateDown:hover svg,
.effect-rotateDown:hover span {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}

/*button hover effect translate*/
.effect-translateLeft:hover i,
.effect-translateLeft:hover svg,
.effect-translateLeft:hover span {
	transform: translateX(-5px);
	-webkit-transform: translateX(-5px);
	-moz-transform: translateX(-5px);
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}

.effect-translateRight:hover i,
.effect-translateRight:hover svg,
.effect-translateRight:hover span {
	transform: translateX(5px);
	-webkit-transform: translateX(5px);
	-moz-transform: translateX(5px);
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
}

/*button hover effect animate*/
.effect-slideinTop:hover i,
.effect-slideinTop:hover svg,
.effect-slideinTop:hover span {
	animation: slide-in-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}