/* RSM Trade Discount, customer-facing.
   Uses the theme's tokens where they exist and falls back to its own values,
   so the plugin looks right on the RSM theme and acceptable on any other. */

.rsm-td-card {
	border: 1px solid var(--line, var(--tdc-line-e4e8ed, #e4e8ed));
	border-radius: var(--radius-sm, 11px);
	background: var(--white, var(--tdc-surface-ffffff, #fff));
	padding: 18px 20px;
	margin: 0 0 22px;
}

.rsm-td-card.is-trade {
	border-color: var(--tdc-line-blue-c9e1f5, #c9e1f5);
	background: var(--tdc-surface-f2f8fd, #f2f8fd);
}

.rsm-td-card-head {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.rsm-td-badge {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--tdc-surface-2-e7ecf1, #e7ecf1);
	color: var(--tdc-ink-3c4650, #3c4650);
}

.is-trade .rsm-td-badge {
	background: var(--blue, var(--tdc-fill-blue-0055a5, #0055a5));
	color: var(--tdc-on-dark-ffffff, #fff);
}

.rsm-td-rate {
	font-size: 15px;
	font-weight: 900;
	color: var(--orange, var(--tdc-text-orange-ff5500, #ff5500));
}

.rsm-td-card p {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink, var(--tdc-ink-171a1f, #171a1f));
}

.rsm-td-card .rsm-td-actions {
	margin: 0;
}

/* The account screen. */

.rsm-td-panel {
	font-size: 16px;
	line-height: 1.6;
}

.rsm-td-lead {
	font-size: 18px;
	font-weight: 800;
}

.rsm-td-terms {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
	margin: 0 0 26px;
	padding: 0;
}

.rsm-td-terms > div {
	border: 1px solid var(--line, var(--tdc-line-e4e8ed, #e4e8ed));
	border-radius: var(--radius-sm, 11px);
	padding: 14px 16px;
}

.rsm-td-terms dt {
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted, var(--tdc-ink-2-656d77, #656d77));
	margin: 0 0 6px;
}

.rsm-td-terms dd {
	margin: 0;
	font-size: 17px;
}

.rsm-td-notes {
	margin: 0 0 20px;
	padding-left: 20px;
}

.rsm-td-notes li {
	margin: 0 0 8px;
}

.rsm-td-help {
	border-top: 1px solid var(--line, var(--tdc-line-e4e8ed, #e4e8ed));
	padding-top: 16px;
	color: var(--muted, var(--tdc-ink-2-656d77, #656d77));
}

.rsm-td-help a {
	color: var(--blue, var(--tdc-text-blue-0055a5, #0055a5));
	font-weight: 800;
}

/* Prices in the catalogue and on the product page. */

.rsm-td-price {
	display: block;
}

.rsm-td-price .rsm-td-now {
	font: inherit;
	color: inherit;
}

.rsm-td-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin-top: 2px;
}

/* WooCommerce sizes a struck price inside a product card and on a product
   page with four-class selectors of its own, so these have to match them
   rather than rely on load order. */
.rsm-td-price del,
.woocommerce ul.products li.product .price .rsm-td-meta del,
.woocommerce div.product p.price .rsm-td-meta del {
	color: var(--muted, var(--tdc-ink-2-656d77, #656d77));
	font-size: 13px;
	font-weight: 600;
	margin: 0;
	text-decoration: line-through;
}

.rsm-td-tag {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--blue, var(--tdc-text-blue-0055a5, #0055a5));
	white-space: nowrap;
}

/* On the product being viewed there is room to say it properly. */
.rsm-td-price:not(.is-compact) del,
.woocommerce div.product p.price .rsm-td-price:not(.is-compact) del {
	font-size: 20px;
}

.rsm-td-price:not(.is-compact) .rsm-td-tag {
	font-size: 15px;
	white-space: normal;
}

@media (max-width: 480px) {
	.rsm-td-price.is-compact del,
	.woocommerce ul.products li.product .price .rsm-td-price.is-compact del,
	.rsm-td-price.is-compact .rsm-td-tag {
		font-size: 12px;
	}
}

/* The line above the basket and the checkout. */

.rsm-td-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	border: 1px solid var(--tdc-line-blue-c9e1f5, #c9e1f5);
	border-left: 4px solid var(--blue, var(--tdc-line-blue-0055a5, #0055a5));
	border-radius: var(--radius-sm, 11px);
	background: var(--tdc-surface-f2f8fd, #f2f8fd);
	padding: 14px 16px;
	margin: 0 0 20px;
	font-size: 16px;
}

.rsm-td-banner strong {
	font-weight: 900;
}

/* The badge, wherever a template prints it. */

.rsm-td-pill {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 900;
	background: var(--tdc-surface-2-e7ecf1, #e7ecf1);
	color: var(--tdc-ink-3c4650, #3c4650);
}

.rsm-td-pill.is-trade {
	background: var(--blue, var(--tdc-fill-blue-0055a5, #0055a5));
	color: var(--tdc-on-dark-ffffff, #fff);
}

@media (max-width: 480px) {
	.rsm-td-terms {
		grid-template-columns: 1fr;
	}

	.rsm-td-card p,
	.rsm-td-panel,
	.rsm-td-banner {
		font-size: 16px;
	}
}

.page-hero .rsm-td-hero {
	margin: 12px 0 0;
}

.page-hero .rsm-td-pill {
	background: var(--tdc-veil-light-ffffff24, rgba(255, 255, 255, .14));
	color: var(--tdc-on-dark-ffffff, #fff);
}

.page-hero .rsm-td-pill.is-trade {
	background: var(--orange, var(--tdc-fill-orange-ff5500, #ff5500));
	color: var(--tdc-on-dark-ffffff, #fff);
}

/* ---------------------------------------------------------------------------
 * Applying, and waiting
 * ------------------------------------------------------------------------- */

.rsm-td-badge.is-waiting {
	background: var(--tdc-fill-orange-fff4d6, #fff4d6);
	color: var(--tdc-text-orange-8a5a12, #8a5a12);
}

.rsm-td-flash {
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 14px;
	padding: 11px 14px;
}

.rsm-td-flash.is-ok {
	background: var(--tdc-surface-eaf6ef, #eaf6ef);
	color: var(--tdc-text-green-14411f, #14411f);
}

.rsm-td-flash.is-error {
	background: var(--tdc-surface-2-fdecea, #fdecea);
	color: var(--tdc-text-red-8a2018, #8a2018);
}

.rsm-td-quote {
	border-left: 3px solid var(--tdc-line-e4e8ed, #e4e8ed);
	color: var(--tdc-ink-2-5d6771, #5d6771);
	margin: 12px 0;
	padding: 2px 0 2px 14px;
}

.rsm-td-form {
	max-width: 560px;
	margin-top: 16px;
}

.rsm-td-field {
	margin: 0 0 14px;
}

.rsm-td-field label {
	display: block;
	font-size: 13px;
	font-weight: 800;
	margin-bottom: 5px;
}

.rsm-td-field input,
.rsm-td-field select,
.rsm-td-field textarea {
	background: var(--tdc-surface-ffffff, #fff);
	border: 1px solid var(--tdc-line-d5dce2, #d5dce2);
	border-radius: 9px;
	box-sizing: border-box;
	color: inherit;
	font: inherit;
	padding: 10px 12px;
	width: 100%;
}

.rsm-td-field textarea {
	line-height: 1.5;
	resize: vertical;
}

.rsm-td-field input:focus,
.rsm-td-field select:focus,
.rsm-td-field textarea:focus {
	border-color: var(--tdc-line-blue-0055a5, #0055a5);
	outline: 0;
}

/* ---------------------------------------------------------------------------
 * 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. */
	--tdc-surface-eaf6ef: #eaf6ef;
	--tdc-surface-f2f8fd: #f2f8fd;
	--tdc-surface-ffffff: #fff;

	/* Paper one step down, wells and inset rows. */
	--tdc-surface-2-e7ecf1: #e7ecf1;
	--tdc-surface-2-fdecea: #fdecea;

	/* Text. Inverts and keeps its order, so a heading still outranks the line under it. */
	--tdc-ink-171a1f: #171a1f;
	--tdc-ink-3c4650: #3c4650;

	/* Secondary text. */
	--tdc-ink-2-5d6771: #5d6771;
	--tdc-ink-2-656d77: #656d77;

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

	/* Rules and borders. */
	--tdc-line-d5dce2: #d5dce2;
	--tdc-line-e4e8ed: #e4e8ed;

	/* 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. */
	--tdc-text-blue-0055a5: #0055a5;

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

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

	/* Brand orange as text. */
	--tdc-text-orange-8a5a12: #8a5a12;
	--tdc-text-orange-ff5500: #ff5500;

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

	/* Success text. */
	--tdc-text-green-14411f: #14411f;

	/* Warning text. */
	--tdc-text-red-8a2018: #8a2018;

	/* White veils over something else. They work either way. */
	--tdc-veil-light-ffffff24: rgba(255, 255, 255, .14);
}

: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. */
	--tdc-surface-eaf6ef: #232825;
	--tdc-surface-f2f8fd: #1b1e20;
	--tdc-surface-ffffff: #141617;

	/* Paper one step down, wells and inset rows. */
	--tdc-surface-2-e7ecf1: #2a3037;
	--tdc-surface-2-fdecea: #372b2a;

	/* Text. Inverts and keeps its order, so a heading still outranks the line under it. */
	--tdc-ink-171a1f: #d8dbe0;
	--tdc-ink-3c4650: #bec4cb;

	/* Secondary text. */
	--tdc-ink-2-5d6771: #aeb5bc;
	--tdc-ink-2-656d77: #acb2b9;

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

	/* Rules and borders. */
	--tdc-line-d5dce2: #3d4750;
	--tdc-line-e4e8ed: #373e48;

	/* 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. */
	--tdc-text-blue-0055a5: #52abff;

	/* Brand blue as a fill, kept dark enough for white to sit on it. */
	--tdc-fill-blue-0055a5: #006fd8;

	/* Brand blue as a rule. */
	--tdc-line-blue-0055a5: #0074e1;
	--tdc-line-blue-c9e1f5: #3d93db;

	/* Brand orange as text. */
	--tdc-text-orange-8a5a12: #eaa53e;
	--tdc-text-orange-ff5500: #ff7029;

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

	/* Success text. */
	--tdc-text-green-14411f: #5ccc77;

	/* Warning text. */
	--tdc-text-red-8a2018: #e77c74;

	/* White veils over something else. They work either way. */
	--tdc-veil-light-ffffff24: rgba(255, 255, 255, .14);
}

@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. */
		--tdc-surface-eaf6ef: #232825;
		--tdc-surface-f2f8fd: #1b1e20;
		--tdc-surface-ffffff: #141617;

		/* Paper one step down, wells and inset rows. */
		--tdc-surface-2-e7ecf1: #2a3037;
		--tdc-surface-2-fdecea: #372b2a;

		/* Text. Inverts and keeps its order, so a heading still outranks the line under it. */
		--tdc-ink-171a1f: #d8dbe0;
		--tdc-ink-3c4650: #bec4cb;

		/* Secondary text. */
		--tdc-ink-2-5d6771: #aeb5bc;
		--tdc-ink-2-656d77: #acb2b9;

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

		/* Rules and borders. */
		--tdc-line-d5dce2: #3d4750;
		--tdc-line-e4e8ed: #373e48;

		/* 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. */
		--tdc-text-blue-0055a5: #52abff;

		/* Brand blue as a fill, kept dark enough for white to sit on it. */
		--tdc-fill-blue-0055a5: #006fd8;

		/* Brand blue as a rule. */
		--tdc-line-blue-0055a5: #0074e1;
		--tdc-line-blue-c9e1f5: #3d93db;

		/* Brand orange as text. */
		--tdc-text-orange-8a5a12: #eaa53e;
		--tdc-text-orange-ff5500: #ff7029;

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

		/* Success text. */
		--tdc-text-green-14411f: #5ccc77;

		/* Warning text. */
		--tdc-text-red-8a2018: #e77c74;

		/* White veils over something else. They work either way. */
		--tdc-veil-light-ffffff24: rgba(255, 255, 255, .14);
	}
}