/*
 * Public Tracking styles.
 *
 * Similar to an Angular component stylesheet.
 *
 * This file contains the tracking page styles for dynamic elements
 * rendered by tracking.js.
 */

#bigpost-tracking {
	width: 100%;
}

body:not(.elementor-editor-active) #tracking-results,
body:not(.elementor-editor-active) #tracking-error {
    display: none;
}

/*
 * Desktop tracking events layout.
 *
 * Each tracking event is displayed as:
 *
 * Status | Location | Date
 */
.tracking-event {
	display: grid;
	grid-template-columns: 225px 330px 148px;
	align-items: center;
	column-gap: 50px;
	row-gap: 6px;
	padding: 8px 10px 8px 10px;
	border-top: 1px solid #ededed;
	font-family: "Inter", sans-serif;
	min-height: 44px;
}

.tracking-event-status {
	font-weight: bolder;
	font-size: 16px;
	overflow-wrap: anywhere;
}

.tracking-event-details {
    color: #545B69;
}

.tracking-event:last-child {
    background: #ffffff;
	border-bottom: 1px solid #e5e5e5;
}

/*
 * Allows the location and date elements to participate directly in the
 * parent CSS Grid while keeping them grouped for the mobile layout.
 */
.tracking-event-details {
	display: contents;
}

.tracking-event-location {
	font-size: 14px;
	white-space: normal;
	overflow-wrap: anywhere;
	text-align: left;
}

.tracking-event-date {
	font-size: 14px;
	text-align: left;
}

/*
 * Mobile tracking events layout.
 *
 * Each tracking event is displayed as:
 *
 * Status
 * Location • Date
 */
@media (max-width: 767px) {

	.tracking-event {
		display: block;
		height: auto;
    	padding: 10px 0;
		border-top: none;
	}

	.tracking-event-status {
		display: block;
		margin-bottom: 4px;
	}

	.tracking-event:last-child {
		background: #ffffff;
		border-bottom: none;
		margin-left: -20px;
        margin-right: -20px;
        padding: 6px 20px;
	}

	.tracking-event-details {
		display: block;
	}

	.tracking-event-location::after {
		content: "";
	}

	.tracking-event-date {
		display: inline-block;
		white-space: nowrap;
		text-align: left;
	}

	.tracking-event-date::before {
		content: "• ";
	}
}

/*
 * Intermediate tracking events layout.
 *
 * Keeps the desktop three-column structure while allowing the
 * columns and gaps to shrink on narrower screens.
 */
@media (min-width: 768px) and (max-width: 1400px) {

	.tracking-event {
		grid-template-columns: minmax(160px, 225px) minmax(0, 1fr) 148px;
		column-gap: 20px;
	}
}