/* RSM Shipping: what the customer sees.
 *
 * Three places, one look: the panel under an order's table, the same panel on
 * the thank-you page, and the lookup box for a guest who has no account to
 * sign in to. Written to sit inside whatever container the theme provides, so
 * nothing here sets a width or a page background.
 *
 * The carrier colour arrives as an inline --rsm-sh-carrier on the badge
 * itself, because it is per carrier and configurable, so it cannot live in a
 * stylesheet. Every rule that reads it carries a fallback for the case where
 * the badge is drawn without one.
 */

.rsm-sh-panel {
	margin: 26px 0;
	padding: 20px 22px 18px;
	border: 1px solid var(--shc-line-dfe4ea, #dfe4ea);
	border-radius: 14px;
	background: var(--shc-surface-ffffff, #fff);
}

.rsm-sh-title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--shc-ink-171a1f, #171a1f);
}

.rsm-sh-title .rsm-sh-icon { flex: none; color: var(--shc-text-blue-0055a5, #0055a5); }

.rsm-sh-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.rsm-sh-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 14px;
	border: 1px solid var(--shc-line-e4e9ee, #e4e9ee);
	border-radius: 11px;
	background: var(--shc-surface-f8fafb, #f8fafb);
}

/* The badge. Deliberately a plain parcel in the carrier's colour rather than
   the carrier's own mark, which is their trademark. */
.rsm-sh-badge {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	background: var(--rsm-sh-carrier, var(--shc-band-4b545d, #4b545d));
	color: var(--shc-on-dark-ffffff, #fff);
}

.rsm-sh-detail {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 3px 12px;
}

.rsm-sh-detail strong {
	flex: 0 0 100%;
	font-size: 15px;
	font-weight: 800;
	color: var(--shc-ink-171a1f, #171a1f);
}

.rsm-sh-count {
	margin-left: 8px;
	font-size: 12px;
	font-weight: 700;
	color: var(--shc-ink-2-636c75, #636c75);
}

.rsm-sh-service,
.rsm-sh-when {
	font-size: 13px;
	color: var(--shc-ink-2-5b656e, #5b656e);
}

.rsm-sh-number {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	letter-spacing: .02em;
	color: var(--shc-ink-333c45, #333c45);
	word-break: break-all;
}

.rsm-sh-track {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding: 0 16px;
	border-radius: 9px;
	background: var(--shc-fill-blue-0055a5, #0055a5);
	color: var(--shc-on-dark-ffffff, #fff);
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	transition: background .2s;
}

.rsm-sh-track:hover,
.rsm-sh-track:focus {
	background: var(--shc-fill-blue-00447f, #00447f);
	color: var(--shc-on-dark-ffffff, #fff);
}

.rsm-sh-track:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 1px var(--shc-ring-blue-0055a5, #0055a5), 0 0 0 4px var(--shc-ring-blue-0055a52e, rgba(0, 85, 165, .18));
}

/* For a screen reader only. Defined here rather than borrowed from the theme:
   this one decides whether a sentence appears inside a button, and a plugin
   that has to work with the theme absent cannot lean on somebody else's
   stylesheet for that. */
.rsm-sh-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.rsm-sh-note {
	margin: 13px 0 0;
	font-size: 13px;
	line-height: 1.55;
	color: var(--shc-ink-2-636c75, #636c75);
}

/* The guest lookup. */

.rsm-sh-lookup { margin: 0 0 26px; }

.rsm-sh-lookup > h2 {
	margin: 0 0 14px;
	font-size: 21px;
	font-weight: 800;
	color: var(--shc-ink-171a1f, #171a1f);
}

.rsm-sh-lookup-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 16px;
	align-items: end;
	max-width: 620px;
}

.rsm-sh-lookup-form > p { margin: 0; }
.rsm-sh-lookup-form > p:last-child { grid-column: 1 / -1; }

.rsm-sh-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 800;
	color: var(--shc-ink-222a31, #222a31);
}

.rsm-sh-field input {
	width: 100%;
	height: 50px;
	padding: 0 14px;
	border: 1px solid var(--shc-line-d9dfe5, #d9dfe5);
	border-radius: 10px;
	background: var(--shc-surface-ffffff, #fff);
	font: inherit;
	font-size: 15px;
	color: var(--shc-ink-171a1f, #171a1f);
	transition: border-color .2s, box-shadow .2s;
}

.rsm-sh-field input:focus {
	outline: 0;
	border-color: var(--shc-line-blue-0055a5, #0055a5);
	box-shadow: 0 0 0 1px var(--shc-ring-blue-0055a5, #0055a5), 0 0 0 4px var(--shc-ring-blue-0055a52e, rgba(0, 85, 165, .18));
}

.rsm-sh-submit {
	height: 50px;
	padding: 0 26px;
	border: 0;
	border-radius: 10px;
	background: var(--shc-fill-orange-ff5500, #ff5500);
	color: var(--shc-on-dark-ffffff, #fff);
	font: inherit;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
	transition: background .2s;
}

.rsm-sh-submit:hover { background: var(--shc-fill-orange-e64d00, #e64d00); }

.rsm-sh-submit:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 1px var(--shc-ring-orange-ff5500, #ff5500), 0 0 0 4px var(--shc-ring-orange-ff550038, rgba(255, 85, 0, .22));
}

.rsm-sh-error,
.rsm-sh-none {
	margin: 0 0 16px;
	padding: 12px 15px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.55;
}

.rsm-sh-error {
	border: 1px solid var(--shc-line-orange-f3cfc3, #f3cfc3);
	background: var(--shc-surface-fdf3f0, #fdf3f0);
	color: var(--shc-text-orange-9a3412, #9a3412);
}

.rsm-sh-none {
	border: 1px solid var(--shc-line-dfe4ea, #dfe4ea);
	background: var(--shc-surface-f8fafb, #f8fafb);
	color: var(--shc-ink-4b545d, #4b545d);
}

@media (max-width: 600px) {
	.rsm-sh-item {
		flex-wrap: wrap;
		gap: 10px 12px;
	}

	.rsm-sh-detail { flex: 1 1 150px; }

	.rsm-sh-track {
		flex: 1 1 100%;
		justify-content: center;
	}

	.rsm-sh-lookup-form { grid-template-columns: minmax(0, 1fr); }
}


/* ---------------------------------------------------------------------------
 * The card at the order desk.
 *
 * Scoped under .rsm-sd so none of it can touch a shop page, and written to
 * borrow the desk's own card, button and label styling rather than to import
 * a second look into a screen that already has one. This lives here, in the
 * shipping stylesheet, rather than in the desk's: the desk should not have to
 * carry styling for a plugin that may not be installed.
 * ------------------------------------------------------------------------ */

.rsm-sd .rsm-sh-desk-list {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: grid;
	gap: 8px;
}

/* Wrapping on purpose. A long consignment number beside two buttons in a
   narrow sidebar has to give somewhere, and the one thing that must not give
   is the number: it is read aloud to customers and checked against a label,
   and "1234567890123" on one line with a lonely "4" under it is how a digit
   gets lost. So the buttons drop to their own line instead. */
.rsm-sd .rsm-sh-desk-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 11px;
	padding: 10px 12px;
	border: 1px solid var(--shc-line-e4e9ee, #e4e9ee);
	border-radius: 10px;
	background: var(--shc-surface-f8fafb, #f8fafb);
}

.rsm-sd .rsm-sh-desk-what {
	flex: 1 1 58%;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
}

.rsm-sd .rsm-sh-desk-what strong {
	flex: 0 0 100%;
	font-size: 14px;
	font-weight: 800;
	color: var(--shc-ink-171a1f, #171a1f);
}

/* The shop-facing panel breaks a number anywhere, which is right in a column
   that can be 320px wide on a phone. Here there is room for the row to wrap
   instead, so the number stays in one piece. */
.rsm-sd .rsm-sh-desk-what .rsm-sh-number {
	white-space: nowrap;
	word-break: normal;
}

.rsm-sd .rsm-sh-desk-do {
	flex: none;
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.rsm-sd .rsm-sh-desk-do form { margin: 0; }

/* Removing a parcel is not the job this card is for, so it does not look like
   the button that is. Written as .button.rsm-sh-desk-off rather than as the
   class alone: the desk's own .rsm-sd .button.is-plain is three classes and
   would otherwise win, which is exactly what happened the first time. */
.rsm-sd .button.rsm-sh-desk-off {
	color: var(--shc-text-orange-9a3412, #9a3412);
	border-color: var(--shc-line-orange-e7cec5, #e7cec5);
}

.rsm-sd .button.rsm-sh-desk-off:hover,
.rsm-sd .button.rsm-sh-desk-off:focus-visible {
	color: var(--shc-text-orange-7c2d12, #7c2d12);
	border-color: var(--shc-line-orange-d8b3a6, #d8b3a6);
	background: var(--shc-surface-fdf3f0, #fdf3f0);
}

.rsm-sd .rsm-sh-desk-add {
	padding-top: 14px;
	border-top: 1px solid var(--shc-line-e4e8ed, #e4e8ed);
}

.rsm-sd .rsm-sh-desk-add label {
	display: block;
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--shc-ink-2-656d77, #656d77);
}

.rsm-sd .rsm-sh-desk-add select,
.rsm-sd .rsm-sh-desk-add input[type="text"] {
	width: 100%;
	margin: 0 0 12px;
}

/* The number is read off a label and typed, so it is set in the same
   monospace it is shown in above, where a 0 and an O are different shapes. */
.rsm-sd .rsm-sh-desk-add input[name="tracking"] {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: .02em;
}

.rsm-sd .rsm-sh-desk-add .rsm-sd-check {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
	font-size: 14px;
	color: var(--shc-ink-3c454e, #3c454e);
}

/* The desk paints a pill for every order status it knows. Shipped is ours, so
   its colour comes from here. */
.rsm-sd .rsm-sd-status.is-rsm-shipped {
	background: var(--shc-fill-blue-d7e7f7, #d7e7f7);
	color: var(--shc-text-blue-10406b, #10406b);
}

/* ---------------------------------------------------------------------------
 * Colour tokens, light and dark.
 *
 * The light value of each token is the literal that used to be written where
 * its var() now sits, so with no appearance chosen this file paints exactly
 * what it painted before. The dark value is derived from the light one by a
 * rule that depends on what the colour is for, so the structure of the palette
 * survives the crossing instead of flattening into three greys.
 *
 * Generated. Change a colour here, not in the rules below, or the pair comes
 * apart.
 * ------------------------------------------------------------------------ */

:root {


	/* Paper. The whiter it was, the deeper it goes, so a panel that sat a shade off white ends up a shade off the page instead of merging into it. */
	--shc-surface-f8fafb: #f8fafb;
	--shc-surface-fdf3f0: #fdf3f0;
	--shc-surface-ffffff: #fff;

	/* Bands that were already dark on a light page. In the dark they have to sit ABOVE the page, not below it, or they disappear. */
	--shc-band-4b545d: #4b545d;

	/* Text. Inverts and keeps its order, so a heading still outranks the line under it. */
	--shc-ink-171a1f: #171a1f;
	--shc-ink-222a31: #222a31;
	--shc-ink-333c45: #333c45;
	--shc-ink-3c454e: #3c454e;
	--shc-ink-4b545d: #4b545d;

	/* Secondary text. */
	--shc-ink-2-5b656e: #5b656e;
	--shc-ink-2-636c75: #636c75;
	--shc-ink-2-656d77: #656d77;

	/* Text that was already light on a dark band. Nothing to do. */
	--shc-on-dark-ffffff: #fff;

	/* Rules and borders. */
	--shc-line-d9dfe5: #d9dfe5;
	--shc-line-dfe4ea: #dfe4ea;
	--shc-line-e4e8ed: #e4e8ed;
	--shc-line-e4e9ee: #e4e9ee;

	/* Brand blue as text. #0055A5 on near black is 2.2:1, which is not text. Lifted it is 7.5:1 and still the brand. */
	--shc-text-blue-0055a5: #0055a5;
	--shc-text-blue-10406b: #10406b;

	/* Brand blue as a fill, kept dark enough for white to sit on it. */
	--shc-fill-blue-00447f: #00447f;
	--shc-fill-blue-0055a5: #0055a5;
	--shc-fill-blue-d7e7f7: #d7e7f7;

	/* Brand blue as a rule. */
	--shc-line-blue-0055a5: #0055a5;

	/* Brand orange as text. */
	--shc-text-orange-7c2d12: #7c2d12;
	--shc-text-orange-9a3412: #9a3412;

	/* Brand orange as a fill. Orange is the action colour and already carries on either ground. */
	--shc-fill-orange-e64d00: #e64d00;
	--shc-fill-orange-ff5500: #ff5500;

	/* Brand orange as a rule. */
	--shc-line-orange-d8b3a6: #d8b3a6;
	--shc-line-orange-e7cec5: #e7cec5;
	--shc-line-orange-f3cfc3: #f3cfc3;

	/* Focus rings and active tab markers in brand blue. Lifted, not deepened: a focus ring that cannot be seen is not a focus ring. */
	--shc-ring-blue-0055a5: #0055a5;
	--shc-ring-blue-0055a52e: rgba(0, 85, 165, .18);

	/* Focus rings and markers in brand orange. */
	--shc-ring-orange-ff5500: #ff5500;
	--shc-ring-orange-ff550038: rgba(255, 85, 0, .22);
}

:root[data-theme="dark"] {


	/* Paper. The whiter it was, the deeper it goes, so a panel that sat a shade off white ends up a shade off the page instead of merging into it. */
	--shc-surface-f8fafb: #191c1e;
	--shc-surface-fdf3f0: #231c1a;
	--shc-surface-ffffff: #141617;

	/* Bands that were already dark on a light page. In the dark they have to sit ABOVE the page, not below it, or they disappear. */
	--shc-band-4b545d: #373d44;

	/* Text. Inverts and keeps its order, so a heading still outranks the line under it. */
	--shc-ink-171a1f: #d8dbe0;
	--shc-ink-222a31: #cfd4d9;
	--shc-ink-333c45: #c4cacf;
	--shc-ink-3c454e: #bec5cb;
	--shc-ink-4b545d: #b5bcc4;

	/* Secondary text. */
	--shc-ink-2-5b656e: #afb6bc;
	--shc-ink-2-636c75: #adb3ba;
	--shc-ink-2-656d77: #acb2b9;

	/* Text that was already light on a dark band. Nothing to do. */
	--shc-on-dark-ffffff: #fff;

	/* Rules and borders. */
	--shc-line-d9dfe5: #3c454e;
	--shc-line-dfe4ea: #39414a;
	--shc-line-e4e8ed: #373e48;
	--shc-line-e4e9ee: #373f47;

	/* Brand blue as text. #0055A5 on near black is 2.2:1, which is not text. Lifted it is 7.5:1 and still the brand. */
	--shc-text-blue-0055a5: #52abff;
	--shc-text-blue-10406b: #68ace8;

	/* Brand blue as a fill, kept dark enough for white to sit on it. */
	--shc-fill-blue-00447f: #0062b8;
	--shc-fill-blue-0055a5: #006fd8;
	--shc-fill-blue-d7e7f7: #162b41;

	/* Brand blue as a rule. */
	--shc-line-blue-0055a5: #0074e1;

	/* Brand orange as text. */
	--shc-text-orange-7c2d12: #ed7f5a;
	--shc-text-orange-9a3412: #ed7e5a;

	/* Brand orange as a fill. Orange is the action colour and already carries on either ground. */
	--shc-fill-orange-e64d00: #e64d00;
	--shc-fill-orange-ff5500: #ff5500;

	/* Brand orange as a rule. */
	--shc-line-orange-d8b3a6: #d17e61;
	--shc-line-orange-e7cec5: #d17f61;
	--shc-line-orange-f3cfc3: #dd7755;

	/* Focus rings and active tab markers in brand blue. Lifted, not deepened: a focus ring that cannot be seen is not a focus ring. */
	--shc-ring-blue-0055a5: #339cff;
	--shc-ring-blue-0055a52e: rgba(26, 144, 255, 0.288);

	/* Focus rings and markers in brand orange. */
	--shc-ring-orange-ff5500: #ff7733;
	--shc-ring-orange-ff550038: rgba(255, 102, 26, 0.352);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {


		/* Paper. The whiter it was, the deeper it goes, so a panel that sat a shade off white ends up a shade off the page instead of merging into it. */
		--shc-surface-f8fafb: #191c1e;
		--shc-surface-fdf3f0: #231c1a;
		--shc-surface-ffffff: #141617;

		/* Bands that were already dark on a light page. In the dark they have to sit ABOVE the page, not below it, or they disappear. */
		--shc-band-4b545d: #373d44;

		/* Text. Inverts and keeps its order, so a heading still outranks the line under it. */
		--shc-ink-171a1f: #d8dbe0;
		--shc-ink-222a31: #cfd4d9;
		--shc-ink-333c45: #c4cacf;
		--shc-ink-3c454e: #bec5cb;
		--shc-ink-4b545d: #b5bcc4;

		/* Secondary text. */
		--shc-ink-2-5b656e: #afb6bc;
		--shc-ink-2-636c75: #adb3ba;
		--shc-ink-2-656d77: #acb2b9;

		/* Text that was already light on a dark band. Nothing to do. */
		--shc-on-dark-ffffff: #fff;

		/* Rules and borders. */
		--shc-line-d9dfe5: #3c454e;
		--shc-line-dfe4ea: #39414a;
		--shc-line-e4e8ed: #373e48;
		--shc-line-e4e9ee: #373f47;

		/* Brand blue as text. #0055A5 on near black is 2.2:1, which is not text. Lifted it is 7.5:1 and still the brand. */
		--shc-text-blue-0055a5: #52abff;
		--shc-text-blue-10406b: #68ace8;

		/* Brand blue as a fill, kept dark enough for white to sit on it. */
		--shc-fill-blue-00447f: #0062b8;
		--shc-fill-blue-0055a5: #006fd8;
		--shc-fill-blue-d7e7f7: #162b41;

		/* Brand blue as a rule. */
		--shc-line-blue-0055a5: #0074e1;

		/* Brand orange as text. */
		--shc-text-orange-7c2d12: #ed7f5a;
		--shc-text-orange-9a3412: #ed7e5a;

		/* Brand orange as a fill. Orange is the action colour and already carries on either ground. */
		--shc-fill-orange-e64d00: #e64d00;
		--shc-fill-orange-ff5500: #ff5500;

		/* Brand orange as a rule. */
		--shc-line-orange-d8b3a6: #d17e61;
		--shc-line-orange-e7cec5: #d17f61;
		--shc-line-orange-f3cfc3: #dd7755;

		/* Focus rings and active tab markers in brand blue. Lifted, not deepened: a focus ring that cannot be seen is not a focus ring. */
		--shc-ring-blue-0055a5: #339cff;
		--shc-ring-blue-0055a52e: rgba(26, 144, 255, 0.288);

		/* Focus rings and markers in brand orange. */
		--shc-ring-orange-ff5500: #ff7733;
		--shc-ring-orange-ff550038: rgba(255, 102, 26, 0.352);
	}
}