/**
 * HPD State Selector / Global Information Bar
 * Hardware Parts Direct
 * Version: 2.5.0
 *
 * Final structure:
 * 1. Shopping from [State]
 * 2. Free Delivery Nationwide
 * 3. Customer Reviews
 * 4. Sales Email
 * 5. Phone
 */


/* =========================================================
   MAIN BAR
   ========================================================= */

.hpd-state-selector {
	width: 100%;
	margin: 0;
	padding: 0;

	background: #0e2a47;
	color: #ffffff;

	box-sizing: border-box;
	position: relative;
	z-index: 9999;
	overflow: hidden;
}


/* =========================================================
   INNER CONTAINER
   ========================================================= */

.hpd-state-selector__inner {
	width: 100%;
	max-width: 1440px;

	margin: 0 auto;
	padding: 0 18px;

	display: flex;
	align-items: center;
	justify-content: center;

	box-sizing: border-box;
}


/* =========================================================
   ALL FIVE SECTIONS
   ========================================================= */

.hpd-state-selector__item {
	min-width: 0;
	height: 36px;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 0 18px;

	box-sizing: border-box;

	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	line-height: 1;

	color: #ffffff;
	white-space: nowrap;
}


/* =========================================================
   DIVIDERS
   ========================================================= */

.hpd-state-selector__item + .hpd-state-selector__item {
	border-left: 1px solid rgba(255, 255, 255, 0.28);
}


/* =========================================================
   ICONS
   ========================================================= */

.hpd-state-selector__icon {
	display: block;
	flex: 0 0 auto;

	width: 18px;
	height: 18px;

	margin: 0 7px 0 0;
	padding: 0;

	object-fit: contain;
}


/* Location icon */

.hpd-state-selector__icon--location {
	width: 17px;
	height: 17px;
}


/* Truck icon */

.hpd-state-selector__icon--truck {
	width: 20px;
	height: 20px;
}


/* Email icon */

.hpd-state-selector__icon--email {
	width: 18px;
	height: 18px;
}


/* Phone icon */

.hpd-state-selector__icon--phone {
	width: 18px;
	height: 18px;
}


/* =========================================================
   SHOPPING FROM STATE
   ========================================================= */

.hpd-state-selector__shopping {
	gap: 0;
}

.hpd-state-selector__shopping-label {
	color: #ffffff;

	font-size: 13px;
	font-weight: 400;
	line-height: 1;
}

.hpd-state-selector__state-name {
	margin-left: 4px;

	color: #fffc00;

	font-size: 13px;
	font-weight: 400;
	line-height: 1;
}


/* =========================================================
   FREE DELIVERY
   ========================================================= */

.hpd-state-selector__delivery {
	gap: 0;
}

.hpd-state-selector__delivery-text {
	color: #ffffff;

	font-size: 13px;
	font-weight: 400;
	line-height: 1;

	text-transform: none;
}


/* =========================================================
   REVIEW BADGE
   =========================================================
   The Review Center shortcode contains its own styles.
   These rules intentionally override ONLY the header badge
   while it is inside the HPD navy information bar.
   ========================================================= */

.hpd-state-selector__reviews .hpd-header-review-badge-wrap {
	width: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	text-align: center !important;
	line-height: 1 !important;
}

.hpd-state-selector__reviews .hpd-header-review-badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	gap: 5px !important;

	margin: 0 !important;
	padding: 0 !important;

	background: transparent !important;

	color: #ffffff !important;

	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1 !important;

	text-decoration: none !important;
	white-space: nowrap !important;
}

.hpd-state-selector__reviews .hpd-header-review-stars {
	color: #ff8a00 !important;

	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	letter-spacing: 1px !important;
}

.hpd-state-selector__reviews .hpd-header-review-rating,
.hpd-state-selector__reviews .hpd-header-review-count {
	color: #ffffff !important;

	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
}

.hpd-state-selector__reviews .hpd-header-review-divider {
	color: rgba(255, 255, 255, 0.55) !important;

	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
}

.hpd-state-selector__reviews .hpd-header-review-badge:hover,
.hpd-state-selector__reviews .hpd-header-review-badge:focus {
	color: #ffffff !important;
	text-decoration: none !important;
	opacity: 0.85;
}


/* =========================================================
   EMAIL + PHONE
   ========================================================= */

.hpd-state-selector__email-wrap,
.hpd-state-selector__phone-wrap {
	gap: 0;
}

.hpd-state-selector__email,
.hpd-state-selector__phone {
	margin: 0;
	padding: 0;

	color: #ffffff !important;

	font-family: inherit;
	font-size: 13px;
	font-weight: 400;
	line-height: 1;

	text-decoration: none !important;
	white-space: nowrap;
}

.hpd-state-selector__email:hover,
.hpd-state-selector__email:focus,
.hpd-state-selector__phone:hover,
.hpd-state-selector__phone:focus {
	color: #ffffff !important;
	text-decoration: underline !important;
}


/* =========================================================
   DESKTOP — SMALLER SCREENS
   ========================================================= */

@media (max-width: 1200px) {

	.hpd-state-selector__inner {
		padding-left: 10px;
		padding-right: 10px;
	}

	.hpd-state-selector__item {
		padding-left: 11px;
		padding-right: 11px;

		font-size: 12px;
	}

	.hpd-state-selector__shopping-label,
	.hpd-state-selector__state-name,
	.hpd-state-selector__delivery-text,
	.hpd-state-selector__email,
	.hpd-state-selector__phone {
		font-size: 12px;
	}

	.hpd-state-selector__reviews .hpd-header-review-badge,
	.hpd-state-selector__reviews .hpd-header-review-rating,
	.hpd-state-selector__reviews .hpd-header-review-divider,
	.hpd-state-selector__reviews .hpd-header-review-count {
		font-size: 12px !important;
	}

	.hpd-state-selector__reviews .hpd-header-review-stars {
		font-size: 14px !important;
	}

	.hpd-state-selector__icon {
		margin-right: 5px;
	}
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

	.hpd-state-selector {
		overflow: visible;
	}

	.hpd-state-selector__inner {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));

		width: 100%;
		max-width: none;

		padding: 5px 10px;
	}

	.hpd-state-selector__item {
		width: 100%;
		height: 30px;

		padding: 0 10px;

		font-size: 12px;

		border-left: 0 !important;
	}

	.hpd-state-selector__shopping,
	.hpd-state-selector__delivery,
	.hpd-state-selector__reviews,
	.hpd-state-selector__email-wrap,
	.hpd-state-selector__phone-wrap {
		justify-content: center;
	}

	.hpd-state-selector__reviews {
		grid-column: 1 / -1;
	}

	.hpd-state-selector__shopping-label,
	.hpd-state-selector__state-name,
	.hpd-state-selector__delivery-text,
	.hpd-state-selector__email,
	.hpd-state-selector__phone {
		font-size: 12px;
	}

	.hpd-state-selector__reviews .hpd-header-review-badge,
	.hpd-state-selector__reviews .hpd-header-review-rating,
	.hpd-state-selector__reviews .hpd-header-review-divider,
	.hpd-state-selector__reviews .hpd-header-review-count {
		font-size: 12px !important;
	}

	.hpd-state-selector__reviews .hpd-header-review-stars {
		font-size: 14px !important;
	}
}


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

@media (max-width: 767px) {

	.hpd-state-selector__inner {
		display: flex;
		flex-direction: column;

		padding: 5px 8px;
	}

	.hpd-state-selector__item {
		width: 100%;
		height: 28px;

		padding: 0 6px;

		justify-content: center;

		border: 0 !important;
	}

	.hpd-state-selector__icon {
		width: 16px;
		height: 16px;

		margin-right: 5px;
	}

	.hpd-state-selector__icon--truck {
		width: 18px;
		height: 18px;
	}
}


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

@media (max-width: 480px) {

	.hpd-state-selector__inner {
		padding: 4px 5px;
	}

	.hpd-state-selector__item {
		height: 27px;

		font-size: 11px;
	}

	.hpd-state-selector__shopping-label,
	.hpd-state-selector__state-name,
	.hpd-state-selector__delivery-text,
	.hpd-state-selector__email,
	.hpd-state-selector__phone {
		font-size: 11px;
	}

	.hpd-state-selector__reviews .hpd-header-review-badge,
	.hpd-state-selector__reviews .hpd-header-review-rating,
	.hpd-state-selector__reviews .hpd-header-review-divider,
	.hpd-state-selector__reviews .hpd-header-review-count {
		font-size: 11px !important;
	}

	.hpd-state-selector__reviews .hpd-header-review-stars {
		font-size: 13px !important;
	}
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 370px) {

	.hpd-state-selector__item {
		padding-left: 3px;
		padding-right: 3px;

		font-size: 10px;
	}

	.hpd-state-selector__shopping-label,
	.hpd-state-selector__state-name,
	.hpd-state-selector__delivery-text,
	.hpd-state-selector__email,
	.hpd-state-selector__phone {
		font-size: 10px;
	}

	.hpd-state-selector__reviews .hpd-header-review-badge,
	.hpd-state-selector__reviews .hpd-header-review-rating,
	.hpd-state-selector__reviews .hpd-header-review-divider,
	.hpd-state-selector__reviews .hpd-header-review-count {
		font-size: 10px !important;
	}

	.hpd-state-selector__reviews .hpd-header-review-stars {
		font-size: 12px !important;
	}
}