/**
 * GFSPL customer / importer / exporter portal styles.
 *
 * Scoped under .gfspl-portal and .gfspl-form so nothing here can leak into an
 * Elementor layout. Colours are declared as custom properties on the wrapper,
 * which is the seam a site can override to match its own brand without editing
 * this file.
 */

.gfspl-portal,
.gfspl-form {
	--gfspl-ink: #1f2933;
	--gfspl-muted: #6b7280;
	--gfspl-line: #dfe3e8;
	--gfspl-surface: #ffffff;
	--gfspl-canvas: #f6f7f9;
	--gfspl-brand: #0b5fa5;
	--gfspl-brand-dark: #094c85;
	--gfspl-success: #0f7b4f;
	--gfspl-success-bg: #e6f4ec;
	--gfspl-warning: #94620a;
	--gfspl-warning-bg: #fdf3d8;
	--gfspl-danger: #a02020;
	--gfspl-danger-bg: #fbeaea;
	--gfspl-info-bg: #e7f0f9;
	--gfspl-radius: 8px;

	color: var( --gfspl-ink );
	font-size: 15px;
	line-height: 1.6;
}

/* ---------------------------------------------------------------- shell */

.gfspl-portal__header {
	align-items: flex-start;
	border-bottom: 1px solid var( --gfspl-line );
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 24px;
	padding-bottom: 16px;
}

.gfspl-portal__title {
	font-size: 22px;
	font-weight: 600;
	margin: 0;
}

.gfspl-portal__subtitle {
	color: var( --gfspl-muted );
	margin: 4px 0 0;
}

.gfspl-portal__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.gfspl-portal__nav a {
	border-radius: 999px;
	color: var( --gfspl-muted );
	display: block;
	padding: 6px 14px;
	text-decoration: none;
}

.gfspl-portal__nav a:hover,
.gfspl-portal__nav a:focus {
	background: var( --gfspl-canvas );
	color: var( --gfspl-ink );
}

.gfspl-portal__nav a.is-active {
	background: var( --gfspl-brand );
	color: #fff;
}

/* ---------------------------------------------------------------- cards */

.gfspl-cards {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	margin-bottom: 28px;
}

.gfspl-card {
	background: var( --gfspl-surface );
	border: 1px solid var( --gfspl-line );
	border-radius: var( --gfspl-radius );
	padding: 18px;
}

.gfspl-card__value {
	display: block;
	font-size: 28px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

.gfspl-card__label {
	color: var( --gfspl-muted );
	display: block;
	font-size: 13px;
	margin-top: 4px;
}

.gfspl-section {
	background: var( --gfspl-surface );
	border: 1px solid var( --gfspl-line );
	border-radius: var( --gfspl-radius );
	margin-bottom: 24px;
	padding: 20px;
}

.gfspl-section__title {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 4px;
}

.gfspl-section__intro {
	color: var( --gfspl-muted );
	margin: 0 0 16px;
}

/* ---------------------------------------------------------------- forms */

.gfspl-form__section {
	border: 0;
	border-top: 1px solid var( --gfspl-line );
	margin: 0 0 24px;
	padding: 20px 0 0;
}

.gfspl-form__section:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.gfspl-form__legend {
	font-size: 16px;
	font-weight: 600;
	padding: 0;
}

.gfspl-form__section-help {
	color: var( --gfspl-muted );
	margin: 4px 0 16px;
}

.gfspl-form__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat( 12, 1fr );
}

.gfspl-field {
	grid-column: span 12;
}

.gfspl-col-1  { grid-column: span 12; }
.gfspl-col-2  { grid-column: span 12; }
.gfspl-col-3  { grid-column: span 6; }
.gfspl-col-4  { grid-column: span 6; }
.gfspl-col-6  { grid-column: span 6; }
.gfspl-col-8  { grid-column: span 12; }
.gfspl-col-12 { grid-column: span 12; }

@media ( min-width: 720px ) {
	.gfspl-col-1  { grid-column: span 1; }
	.gfspl-col-2  { grid-column: span 2; }
	.gfspl-col-3  { grid-column: span 3; }
	.gfspl-col-4  { grid-column: span 4; }
	.gfspl-col-6  { grid-column: span 6; }
	.gfspl-col-8  { grid-column: span 8; }
}

.gfspl-field__label {
	display: block;
	font-weight: 600;
	margin-bottom: 5px;
}

.gfspl-field__required {
	color: var( --gfspl-danger );
	margin-left: 3px;
}

.gfspl-input {
	background: #fff;
	border: 1px solid #c4cad0;
	border-radius: 5px;
	box-sizing: border-box;
	color: inherit;
	font: inherit;
	padding: 9px 11px;
	width: 100%;
}

.gfspl-input:focus {
	border-color: var( --gfspl-brand );
	box-shadow: 0 0 0 3px rgba( 11, 95, 165, 0.15 );
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.gfspl-field.has-error .gfspl-input {
	border-color: var( --gfspl-danger );
}

.gfspl-field__help {
	color: var( --gfspl-muted );
	font-size: 13px;
	margin: 5px 0 0;
}

.gfspl-field__error {
	color: var( --gfspl-danger );
	font-size: 13px;
	font-weight: 500;
	margin: 5px 0 0;
}

.gfspl-choices {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gfspl-choice {
	align-items: center;
	cursor: pointer;
	display: inline-flex;
	gap: 8px;
	font-weight: 400;
}

.gfspl-form__actions {
	border-top: 1px solid var( --gfspl-line );
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
	padding-top: 20px;
}

.gfspl-btn {
	background: var( --gfspl-brand );
	border: 1px solid var( --gfspl-brand );
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	padding: 10px 22px;
	text-decoration: none;
}

.gfspl-btn:hover,
.gfspl-btn:focus {
	background: #094c85;
	color: #fff;
}

.gfspl-btn:focus-visible {
	outline: 3px solid rgba( 11, 95, 165, 0.4 );
	outline-offset: 2px;
}

.gfspl-btn--ghost {
	background: transparent;
	border-color: #c4cad0;
	color: var( --gfspl-ink );
}

.gfspl-btn--ghost:hover,
.gfspl-btn--ghost:focus {
	background: var( --gfspl-canvas );
	color: var( --gfspl-ink );
}

.gfspl-btn--small {
	font-size: 13px;
	padding: 6px 14px;
}

/* The main action on a page. It was being asked for on three pages and looked
   exactly like a secondary button, which is the one thing a primary button
   must not do. */
.gfspl-btn--primary {
	background: var( --gfspl-brand-dark );
	border-color: var( --gfspl-brand-dark );
	color: #fff;
}

.gfspl-btn--primary:hover,
.gfspl-btn--primary:focus {
	background: #073a66;
	color: #fff;
}

/* --------------------------------------------------------------- alerts */

.gfspl-alert {
	border-left: 4px solid var( --gfspl-line );
	border-radius: 5px;
	margin-bottom: 18px;
	padding: 12px 16px;
}

.gfspl-alert--error   { background: var( --gfspl-danger-bg ); border-left-color: var( --gfspl-danger ); }
.gfspl-alert--success { background: var( --gfspl-success-bg ); border-left-color: var( --gfspl-success ); }
.gfspl-alert--warning { background: var( --gfspl-warning-bg ); border-left-color: var( --gfspl-warning ); }
.gfspl-alert--info    { background: var( --gfspl-info-bg ); border-left-color: var( --gfspl-brand ); }

/* -------------------------------------------------------------- listing */

.gfspl-datalist {
	border-collapse: collapse;
	width: 100%;
}

.gfspl-datalist th,
.gfspl-datalist td {
	border-bottom: 1px solid var( --gfspl-line );
	padding: 11px 10px;
	text-align: left;
	vertical-align: top;
}

.gfspl-datalist th {
	color: var( --gfspl-muted );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Tables of shipment data are wide; let them scroll rather than squash. */
.gfspl-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.gfspl-pill {
	border-radius: 999px;
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	padding: 2px 10px;
	white-space: nowrap;
}

.gfspl-pill--neutral { background: #eef0f2; color: #4b5563; }
.gfspl-pill--success { background: var( --gfspl-success-bg ); color: var( --gfspl-success ); }
.gfspl-pill--warning { background: var( --gfspl-warning-bg ); color: var( --gfspl-warning ); }
.gfspl-pill--danger  { background: var( --gfspl-danger-bg ); color: var( --gfspl-danger ); }
.gfspl-pill--info    { background: var( --gfspl-info-bg ); color: var( --gfspl-brand ); }

/* ------------------------------------------------- service provider portal */

/* The vendor portal's overview is built from these and had no rules at all. */
.gfspl-tiles {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	margin-bottom: 24px;
}

.gfspl-tile {
	background: var( --gfspl-surface );
	border: 1px solid var( --gfspl-line );
	border-radius: var( --gfspl-radius );
	color: inherit;
	display: block;
	padding: 18px;
	text-decoration: none;
}

a.gfspl-tile:hover,
a.gfspl-tile:focus {
	border-color: var( --gfspl-brand );
}

.gfspl-tile__value {
	display: block;
	font-size: 28px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	line-height: 1.2;
}

.gfspl-tile__label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	margin-top: 4px;
}

.gfspl-tile__note {
	color: var( --gfspl-muted );
	display: block;
	font-size: 13px;
	margin-top: 2px;
}

/* "Nothing here yet", which a vendor sees more often than anything else. */
.gfspl-empty {
	background: var( --gfspl-canvas );
	border: 1px dashed var( --gfspl-line );
	border-radius: var( --gfspl-radius );
	padding: 24px;
	text-align: center;
}

.gfspl-empty h3 {
	font-size: 15px;
	margin: 0 0 6px;
}

.gfspl-empty p {
	color: var( --gfspl-muted );
	margin: 0;
}

.gfspl-muted {
	color: var( --gfspl-muted );
}

/* Label and value pairs: the facts of a shipment, a company's own details. */
.gfspl-details {
	display: grid;
	gap: 2px 20px;
	grid-template-columns: minmax( 140px, max-content ) 1fr;
	margin: 0 0 16px;
}

.gfspl-details dt {
	color: var( --gfspl-muted );
	font-size: 13px;
	padding: 6px 0;
}

.gfspl-details dd {
	margin: 0;
	padding: 6px 0;
}

.gfspl-table {
	border-collapse: collapse;
	width: 100%;
}

.gfspl-table th,
.gfspl-table td {
	border-bottom: 1px solid var( --gfspl-line );
	padding: 11px 10px;
	text-align: left;
	vertical-align: top;
}

.gfspl-table th {
	color: var( --gfspl-muted );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.gfspl-pagination {
	align-items: center;
	color: var( --gfspl-muted );
	display: flex;
	font-size: 14px;
	gap: 14px;
	margin-top: 16px;
}

/* ------------------------------------------------------------ checklist */

.gfspl-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gfspl-checklist__item {
	align-items: flex-start;
	border-bottom: 1px solid var( --gfspl-line );
	display: flex;
	gap: 12px;
	padding: 14px 0;
}

.gfspl-checklist__item:last-child {
	border-bottom: 0;
}

.gfspl-checklist__body {
	flex: 1;
}

.gfspl-checklist__title {
	font-weight: 600;
}

.gfspl-checklist__meta {
	color: var( --gfspl-muted );
	display: block;
	font-size: 13px;
}

.gfspl-checklist__guidance {
	background: var( --gfspl-canvas );
	border-radius: 5px;
	font-size: 13px;
	margin-top: 8px;
	padding: 10px 12px;
}

/* ------------------------------------------------------------- journey */

.gfspl-journey {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
}

.gfspl-journey__step {
	border-left: 2px solid var( --gfspl-line );
	margin: 0;
	padding: 0 0 18px 22px;
	position: relative;
}

.gfspl-journey__step:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}

.gfspl-journey__step::before {
	background: var( --gfspl-surface );
	border: 2px solid var( --gfspl-line );
	border-radius: 50%;
	content: "";
	height: 13px;
	left: -8px;
	position: absolute;
	top: 3px;
	width: 13px;
}

.gfspl-journey__step.is-done {
	border-left-color: var( --gfspl-success );
}

.gfspl-journey__step.is-done::before {
	background: var( --gfspl-success );
	border-color: var( --gfspl-success );
}

.gfspl-journey__label {
	display: block;
	font-weight: 600;
}

.gfspl-journey__step:not( .is-done ) .gfspl-journey__label {
	color: var( --gfspl-muted );
	font-weight: 400;
}

.gfspl-journey__meta {
	color: var( --gfspl-muted );
	display: block;
	font-size: 13px;
}

/* An alert the user has already dealt with recedes rather than disappearing. */
.gfspl-checklist__item.is-read {
	opacity: 0.62;
}

/* Inline upload form inside a checklist row. */
.gfspl-upload {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.gfspl-upload p {
	flex: 1 1 240px;
	margin: 0;
}

.gfspl-upload .gfspl-input--file,
.gfspl-upload input[type="file"] {
	font-size: 14px;
	padding: 6px;
}

.gfspl-progress {
	background: #e5e7eb;
	border-radius: 999px;
	height: 10px;
	margin: 10px 0;
	overflow: hidden;
}

.gfspl-progress__bar {
	background: var( --gfspl-brand );
	display: block;
	height: 100%;
}

/* Screen-reader-only text, matching the WordPress convention. */
.gfspl-portal .screen-reader-text,
.gfspl-form .screen-reader-text {
	border: 0;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.gfspl-portal *,
	.gfspl-form * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}