@charset "utf-8";

/* CSS Document */
:root {
	--wcmp-option-space-v: 1rem;
	--wcmp-option-space-h: 1rem;
	--wcmp-option-space-v-half: calc(var(--wcmp-option-space-v) / 2);
	--wcmp-option-space-h-half: calc(var(--wcmp-option-space-h) / 2);
	--color-background: #f5f5f5;
	--color-border: #4db2ec;
	--color-foreground: #000;
}

.hidden {
	display: none !important;
}

.wcmp-product-options {
	display: flex;
	flex-direction: column;
	margin: calc(-1 * var(--wcmp-option-space-v-half)) calc(-1 * var(--wcmp-option-space-h-half));
	padding-bottom: var(--wcmp-option-space-v);
}

.wcmp-option-container {
	padding: var(--wcmp-option-space-v-half)  var(--wcmp-option-space-h-half);
}

.wcmp-option {
	background-color: var(--color-background, #f5f5f5); /* Matches wc notices */
	border: 2px solid transparent;
	border-radius: 2px;
	height: 100%;
}

.wcmp-option-container.selected .wcmp-option {
	border-color: var(--color-border, #4db2ec);
}

/* Hiding the inputs? */
.wcmp-option-container input {
	left: -9999em;
	position: absolute;
}

.wcmp-option-container label {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1rem;
}

.wcmp-option-label-title {
	color: var(--color-foreground, #000);
	font-family: Chivo, sans-serif;
	font-size: 1.125rem;
	font-size: 22px;
	font-weight: 700;
	font-weight: 900;
	line-height: 30px;
	position: relative;
}

.wcmp-option-label-image-price {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 1rem 0;
}

.wcmp-option-label-price-description {
	flex-basis: 50%;
	flex-grow: 1;
	flex-shrink: 0;
	padding-left: 1rem;
}

.wcmp-option-label-price {
	color: var(--color-border, #4db2ec);
	display: block;
	font-family: Chivo, sans-serif;
	font-size: 22px;
	font-weight: 900;
	line-height: 30px;
}

.wcmp-option-description {
	font-size: 0.875rem;
	justify-self: left;
}

/* Style these like h3s */
.ce-team-option-title {
	color: var(--color-foreground, #000);
	font-family: Chivo, sans-serif;
	font-size: 22px;
	font-weight: 900;
	line-height: 30px;
	position: relative;
}

.woocommerce button.button.alt,
.woocommerce button.button.alt:hover {
	background-color: var(--color-border, #4db2ec);
}

.wcmp-option-label-title::before {
	border: 2px solid var(--color-border, #4db2ec);
	border-radius: 2px;
	content: "";
	display: inline-block;
	height: 20px;
	margin-right: 8px;
	width: 20px;
}

.wcmp-option-label-title::after {
	content: "";
	font-size: 18px;
	font-weight: 700;
	left: 4px;
	line-height: 1;
	position: absolute;
	top: 4px;
}

input:checked + label .wcmp-option-label-title::after {
	content: "\2713";
}

/* Cancel above rules */
.ce-team-product-option label {
	padding-bottom: 1rem;
	position: static;
}

.ce-team-product-option label::before,
.ce-team-product-option label::after {
	display: none;
}

.ce-team-option-title::before {
	border: 2px solid var(--color-border, #4db2ec);
	border-radius: 2px;
	content: "";
	display: inline-block;
	height: 20px;
	margin-right: 8px;
	width: 20px;
}

input:checked + label .ce-team-option-title::after {
	content: "\2713";
}

.ce-team-option-title::after {
	bottom: 7px;
	content: "";
	font-size: 18px;
	font-weight: 700;
	left: 4px;
	line-height: 1;
	position: absolute;
}


@media (min-width: 45em) {
	
	.wcmp-product-options {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.wcmp-option-container {
		flex-basis: 50%;
	}
		
}

@media (min-width: 70.25em) {
	
	/* 1124px */
	
	.wcmp-product-options-3 .wcmp-option-container,
	.wcmp-product-options-6 .wcmp-option-container,
	.wcmp-product-options-9 .wcmp-option-container {
		flex-basis: 33.3333%;
	}
	
}