/* ============================================================
   GIFT WITH A STORY — GIFT JOURNEY STEPS
   Version 1.3.0

   Shortcode:
   [gwas_gift_steps step="1"]
   [gwas_gift_steps step="2"]
   [gwas_gift_steps step="3"]
   [gwas_gift_steps step="4"]
============================================================ */

.gwas-gift-steps {
	--gwas-step-navy:
		#2f3e52;

	--gwas-step-navy-dark:
		#1e2a38;

	--gwas-step-gold:
		#b08d57;

	--gwas-step-gold-light:
		#d5bd8d;

	--gwas-step-cream:
		#f3ecdf;

	--gwas-step-ivory:
		#fcf8f1;

	--gwas-step-muted:
		#706a61;

	--gwas-step-line:
		rgba(176,141,87,.48);

	background:
		var(--gwas-step-ivory) !important;

	box-sizing:
		border-box !important;

	margin:
		0 !important;

	padding:
		26px 24px 24px !important;

	width:
		100% !important;
}


.gwas-gift-steps-shell {
	box-sizing:
		border-box !important;

	margin:
		0 auto !important;

	max-width:
		980px !important;

	width:
		100% !important;
}


.gwas-gift-steps-list {
	align-items:
		start !important;

	display:
		grid !important;

	gap:
		0 !important;

	grid-template-columns:
		repeat(4, minmax(0, 1fr)) !important;

	list-style:
		none !important;

	margin:
		0 !important;

	padding:
		0 !important;
}


.gwas-gift-step {
	box-sizing:
		border-box !important;

	min-width:
		0 !important;

	position:
		relative !important;

	text-align:
		center !important;
}


/* Connector line behind circles */

.gwas-gift-step::after {
	background:
		var(--gwas-step-line) !important;

	content:
		"" !important;

	display:
		block !important;

	height:
		1px !important;

	left:
		50% !important;

	position:
		absolute !important;

	top:
		20px !important;

	width:
		100% !important;

	z-index:
		0 !important;
}


.gwas-gift-step:last-child::after {
	display:
		none !important;
}


/* Completed connectors become navy/gold toned */

.gwas-gift-step.is-complete::after {
	background:
		rgba(47,62,82,.46) !important;
}


/* ============================================================
   STEP CIRCLE
============================================================ */

.gwas-gift-step-marker {
	align-items:
		center !important;

	background:
		var(--gwas-step-ivory) !important;

	border:
		1px solid var(--gwas-step-navy) !important;

	border-radius:
		50% !important;

	box-sizing:
		border-box !important;

	color:
		var(--gwas-step-navy-dark) !important;

	display:
		inline-flex !important;

	font-family:
		Georgia,
		serif !important;

	font-size:
		15px !important;

	font-weight:
		700 !important;

	height:
		40px !important;

	justify-content:
		center !important;

	line-height:
		1 !important;

	margin:
		0 auto 13px !important;

	position:
		relative !important;

	width:
		40px !important;

	z-index:
		2 !important;
}


/* Current step */

.gwas-gift-step.is-current
.gwas-gift-step-marker {
	background:
		var(--gwas-step-navy) !important;

	border:
		2px solid var(--gwas-step-gold) !important;

	box-shadow:
		0 0 0 3px rgba(176,141,87,.14) !important;

	color:
		#ffffff !important;
}


/* Completed step */

.gwas-gift-step.is-complete
.gwas-gift-step-marker {
	background:
		var(--gwas-step-navy-dark) !important;

	border:
		1px solid var(--gwas-step-gold) !important;

	color:
		#ffffff !important;
}


/* ============================================================
   LABEL
============================================================ */

.gwas-gift-step-label {
	color:
		var(--gwas-step-navy-dark) !important;

	display:
		block !important;

	font-family:
		Arial,
		Helvetica,
		sans-serif !important;

	font-size:
		10px !important;

	font-weight:
		700 !important;

	letter-spacing:
		0.06em !important;

	line-height:
		1.35 !important;

	margin:
		0 !important;

	padding:
		0 8px !important;

	text-transform:
		uppercase !important;
}


.gwas-gift-step.is-current
.gwas-gift-step-label {
	color:
		var(--gwas-step-gold) !important;
}


.gwas-gift-step.is-complete
.gwas-gift-step-label {
	color:
		var(--gwas-step-navy) !important;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

	.gwas-gift-steps {
		padding:
			22px 12px 20px !important;
	}


	.gwas-gift-step-marker {
		font-size:
			13px !important;

		height:
			34px !important;

		margin-bottom:
			10px !important;

		width:
			34px !important;
	}


	.gwas-gift-step::after {
		top:
			17px !important;
	}


	.gwas-gift-step-label {
		font-size:
			8px !important;

		letter-spacing:
			0.035em !important;

		padding:
			0 4px !important;
	}

}


@media (max-width: 430px) {

	.gwas-gift-steps {
		padding-left:
			6px !important;

		padding-right:
			6px !important;
	}


	.gwas-gift-step-marker {
		height:
			30px !important;

		width:
			30px !important;
	}


	.gwas-gift-step::after {
		top:
			15px !important;
	}


	.gwas-gift-step-label {
		font-size:
			7px !important;

		line-height:
			1.25 !important;
	}

}