/**
 * Presale Counters
 *
 * Functional base styling.
 * Final visual styling will be completed together with
 * the other Presale components.
 *
 * @author Elian Meran Rosario
 * @package Klasse_Child_Theme
 */

.kls-presale-spots,
.kls-presale-registrations {
	box-sizing: border-box;
}


/*
 * Spots header.
 */

.kls-presale-counter-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}


.kls-presale-counter-title {
	display: block;
}


.kls-presale-counter-value {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	font-weight: 700;
}


/*
 * Progress bar.
 */

.kls-presale-counter-bar {
	position: relative;
	width: 100%;
	height: 8px;
	margin-top: 10px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(16, 29, 48, 0.10);
}


.kls-presale-counter-bar-fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(
		--kls-presale-secondary,
		#6FA7A3
	);
	transition: width 0.4s ease;
}


/*
 * Meta information.
 */

.kls-presale-counter-meta {
	margin-top: 7px;
	font-size: 0.875rem;
	opacity: 0.75;
}


/*
 * Registration counter.
 */

.kls-presale-counter-registration-value {
	display: inline-block;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
}


.kls-presale-counter-registration-label {
	display: inline-block;
	margin-left: 6px;
}


/*
 * Mobile.
 */

@media (max-width: 767px) {

	.kls-presale-counter-header {
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
	}


	.kls-presale-counter-registration-value {
		font-size: 1.6rem;
	}

}