/*
 * ParcelPoint Fuel Surcharges: front end.
 * Values measured from the existing Elementor build on staging so the page looks identical.
 * Fonts (Bebas Neue, Barlow Condensed) are already loaded by the theme.
 */

.pp-fs-current,
.pp-fs-history {
	--pp-fs-orange: #f25010;
	--pp-fs-white: #ffffff;
	--pp-fs-grey: #555555;
	--pp-fs-display: "Bebas Neue", sans-serif;
	--pp-fs-body: "Barlow Condensed", sans-serif;
}

.pp-fs-current p,
.pp-fs-history p {
	margin: 0;
	padding: 0;
}

/* Let the Elementor Shortcode widget fill its container */
.elementor-widget-shortcode:has(.pp-fs-current),
.elementor-widget-shortcode:has(.pp-fs-history) {
	width: 100%;
	max-width: 100%;
	flex: 1 1 100%;
}

/* ---------- Current rate (sits inside the existing orange container) ---------- */

.pp-fs-current {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px 40px;
	width: 100%;
}

.pp-fs-current__info {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 60%;
	padding-right: 25.65px;
	box-sizing: border-box;
}

.pp-fs-current__value {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	width: 40%;
}

.pp-fs-current__label {
	font-family: var(--pp-fs-body);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--pp-fs-white);
}

.pp-fs-current__period {
	font-family: var(--pp-fs-display);
	font-size: 40px;
	font-weight: 600;
	line-height: 0.95;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	color: var(--pp-fs-white);
}

.pp-fs-current__rate {
	font-family: var(--pp-fs-display);
	font-size: 140px;
	font-weight: 600;
	line-height: 0.85;
	letter-spacing: -3px;
	text-align: right;
	color: var(--pp-fs-white);
}

/* ---------- Previous rates ---------- */

.pp-fs-history {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.pp-fs-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px 32px;
	padding: 28px 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	box-sizing: border-box;
}

.pp-fs-row.is-highlight {
	border-bottom: 0;
	border-left: 2px solid var(--pp-fs-orange);
	background-color: rgba(242, 80, 16, 0.063);
}

.pp-fs-col {
	min-width: 0;
	flex-grow: 0;
	flex-shrink: 1;
}

.pp-fs-col--period { flex-basis: 53%; }
.pp-fs-col--status { flex-basis: 27%; }
.pp-fs-col--rate   { flex-basis: 20%; text-align: right; }

.pp-fs-period {
	font-family: var(--pp-fs-display);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0.5px;
	color: var(--pp-fs-white);
}

.pp-fs-status {
	font-family: var(--pp-fs-body);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--pp-fs-grey);
}

.pp-fs-rate {
	font-family: var(--pp-fs-display);
	font-size: 32px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.5px;
	text-align: right;
	color: var(--pp-fs-white);
}

.pp-fs-row.is-highlight .pp-fs-rate {
	color: var(--pp-fs-orange);
}

/* ---------- Tablet ---------- */

@media (max-width: 1024px) {
	.pp-fs-current__period { font-size: 32px; }
	.pp-fs-current__rate   { font-size: 100px; }
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	/* Stack the band, keep text off the screen edge (aligned with the "Previous rates" heading) */
	.pp-fs-current {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 40px 24px;
		box-sizing: border-box;
	}
	.pp-fs-current__info {
		width: 100%;
		padding: 0;
		gap: 10px;
	}
	.pp-fs-current__value {
		width: 100%;
		justify-content: flex-start;
	}
	.pp-fs-current__label  { font-size: 10px; letter-spacing: 3px; }
	.pp-fs-current__period { font-size: 28px; }
	.pp-fs-current__rate   { font-size: 80px; letter-spacing: -2px; text-align: left; }

	/* Remove Elementor's own padding around the band on mobile so it isn't doubled */
	.e-con:has(> .e-con-inner > .elementor-widget-shortcode .pp-fs-current),
	.e-con:has(> .elementor-widget-shortcode .pp-fs-current),
	.e-con-inner:has(> .elementor-widget-shortcode .pp-fs-current) {
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.pp-fs-row {
		gap: 8px 16px;
		padding: 20px 16px;
	}
	.pp-fs-col--period { flex-basis: 70%; }
	.pp-fs-col--status { display: none; }
	.pp-fs-col--rate   { flex-basis: 30%; }

	.pp-fs-period { font-size: 18px; }
	.pp-fs-rate   { font-size: 24px; }
}