/**
 * THE CHECKOUT FORM, DRESSED TO MATCH THE ONE IT REPLACED.
 *
 * Upsell Plugin renders the form (inc/upsell.php explains why it is the
 * plugin's markup and not the original's). Left alone it arrives wearing
 * Bootstrap 4, which it loads for itself on every page of the site: that would
 * change the body typeface, the headings and every grid row on 25 carried
 * pages, so the plugin's four stylesheets are switched off and this sheet
 * dresses the form instead.
 *
 * EVERY VALUE HERE IS READ OFF THE ORIGINAL'S OWN SHEETS -- assets/css/
 * layout-base.css and site-checkout.css, carried from the live checkout on
 * 2026-09-15 -- so the form sits in the page the way the Lime Funnels one did:
 * the 800px column, labels above 10px-padded boxes with a 1px #ddd border and
 * the blue focus ring, the grey order box, the red-bordered order bump with its
 * 30px Poppins headline, and the full-width green COMPLETE MY PURCHASE button.
 *
 * ROOT FONT SIZE IS 10px on this site (bb-theme's base sheet), so 1rem is 10px
 * and the rem values below are the original's own.
 *
 * WHAT IS NOT THE SAME, and cannot be: the field ORDER and grouping are the
 * plugin's (email first, then the names; "Order Details" and "Payment" as two
 * captioned sections), and the card boxes are Stripe's own, mounted by the
 * plugin. decisions doc, C1.
 *
 * @package writersroom
 */

/* ------------------------------------------------------------------
 * 01. The column and its two sections
 * ------------------------------------------------------------------ */

.tr-upsell-checkout {
	max-width: 800px;
	margin: 0 auto;
	color: #3d3d3d;
	text-align: left;
}

.tr-upsell-checkout *,
.tr-upsell-checkout *::before,
.tr-upsell-checkout *::after {
	box-sizing: border-box;
}

.tr-upsell-checkout fieldset {
	margin: 0 0 1.5rem;
	padding: 0;
	border: 0;
	min-width: 0;
}

/* The plugin captions its sections with a <legend>; the original captioned its
 * order box with an <h3>, at these sizes. */
.tr-upsell-checkout legend {
	display: block;
	width: 100%;
	margin: 0 0 1rem;
	padding: 0 0 0.5rem;
	border: 0;
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1.2;
	color: #1f2937;
}

@media (max-width: 991px) {
	.tr-upsell-checkout legend {
		font-size: 2rem;
	}
}

@media (max-width: 767px) {
	.tr-upsell-checkout legend {
		font-size: 1.75rem;
	}
}

/* The plugin's markup is Bootstrap's grid; these are the four column widths it
 * actually uses, and the original's own 10px gutter. */
.tr-upsell-checkout .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px;
}

.tr-upsell-checkout [class*="col-"] {
	width: 100%;
	padding: 0 10px;
}

@media (min-width: 768px) {
	.tr-upsell-checkout .col-md-6 {
		width: 50%;
	}
	.tr-upsell-checkout .col-md-4 {
		width: 33.3333%;
	}
}

/* ------------------------------------------------------------------
 * 02. Fields
 * ------------------------------------------------------------------ */

.tr-upsell-checkout .form-group {
	margin-bottom: 15px;
}

.tr-upsell-checkout label.control-label,
.tr-upsell-checkout .form-group > label {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
	font-size: 1.4rem;
	color: #333;
}

.tr-upsell-checkout .form-control {
	display: block;
	width: 100%;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background-color: #fff;
	font-family: inherit;
	font-size: 1.4rem;
	line-height: 1.45;
	color: #333;
}

.tr-upsell-checkout select.form-control {
	height: auto;
	appearance: auto;
}

.tr-upsell-checkout .form-control:focus {
	border-color: #0073aa;
	outline: none;
}

/* The plugin's spam trap: a field a person must never see or tab into. It is
 * hidden by the plugin's own stylesheet, which is not loaded here. */
.tr-upsell-checkout .myblank {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none;
}

/* A field the plugin has marked wrong, and the line under it. */
.tr-upsell-checkout .has-error .form-control {
	border-color: #e53935;
	background-color: #fff8f8;
}

.tr-upsell-checkout .help-block,
.tr-upsell-checkout .upsell-notices .alert {
	margin-top: 5px;
	font-size: 1.3rem;
	font-weight: 500;
	line-height: 1.3;
	color: #e53935;
}

.tr-upsell-checkout .bs-callout-danger {
	margin-bottom: 1.5rem;
	padding: 1rem 1.5rem;
	border-left: 4px solid #e53935;
	background: #fff8f8;
}

/* ------------------------------------------------------------------
 * 03. The coupon line and the order summary
 * ------------------------------------------------------------------ */

.tr-upsell-checkout .input-group {
	display: flex;
	align-items: stretch;
}

.tr-upsell-checkout .input-group .form-control {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.tr-upsell-checkout .upsell-checkout-apply-coupon {
	padding: 0 15px;
	border: 1px solid rgb(212, 175, 55);
	border-left: 0;
	border-radius: 0 4px 4px 0;
	background: rgb(212, 175, 55);
	color: #fff;
	font-family: inherit;
	font-size: 1.3rem;
	cursor: pointer;
	white-space: nowrap;
}

.tr-upsell-checkout .upsell-checkout-apply-coupon:hover {
	background: rgb(0, 81, 119);
	border-color: rgb(0, 81, 119);
}

/* GOLD, NOT THE PLUGIN'S GREEN. Every button on these three checkouts is the
 * same gold the pages set for their own buy button; a green one beside it reads
 * as belonging to something else. */

/* The original's grey order box, with the plugin's table inside it. */
.tr-upsell-checkout .upsell-order {
	width: 100%;
	margin: 1.5rem 0;
	padding: 1.5rem;
	border-collapse: collapse;
	background: #f9fafb;
	border-radius: 0.5rem;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	font-size: 1.5rem;
}

.tr-upsell-checkout .upsell-order th,
.tr-upsell-checkout .upsell-order td {
	padding: 1rem 1.5rem;
	text-align: left;
	vertical-align: top;
	border: 0;
}

.tr-upsell-checkout .upsell-order th {
	font-weight: 600;
	color: #1f2937;
	border-bottom: 1px solid #eee;
}

.tr-upsell-checkout .upsell-order td:last-child,
.tr-upsell-checkout .upsell-order th:last-child {
	text-align: right;
}

.tr-upsell-checkout .upsell-cart-item-name {
	font-weight: 500;
	color: #1f2937;
}

.tr-upsell-checkout .upsell-cart-item-price {
	font-weight: 600;
	color: #1f2937;
}

.tr-upsell-checkout .upsell-order tfoot td {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	border-top: 1px solid #eee;
}

.tr-upsell-checkout .upsell-order tfoot tr:last-child td {
	font-size: 1.65rem;
	font-weight: 700;
	color: #1f2937;
}

.tr-upsell-checkout .upsell-order label {
	margin: 0;
	font-weight: inherit;
}

@media (max-width: 767px) {
	.tr-upsell-checkout .upsell-order {
		padding: 1rem;
		font-size: 1.3rem;
	}
	.tr-upsell-checkout .upsell-order th,
	.tr-upsell-checkout .upsell-order td {
		padding: 0.75rem;
	}
}

/* ------------------------------------------------------------------
 * 04. The order bump
 *
 * The original's box: a solid red border on a light grey ground, its headline
 * in Poppins 700 at 30px and its description in 15.5px grey -- the page's own
 * settings for the module (assets/css/pages/*-checkout.css), not the plugin's
 * amber default.
 * ------------------------------------------------------------------ */

.tr-upsell-checkout fieldset[class^="upsell-checkout-order-bump-section"] {
	margin: 2rem 0;
	border: 2px solid rgb(200, 11, 4);
	border-radius: 0.5rem;
	background-color: rgb(242, 242, 242);
	overflow: hidden;
	transition: box-shadow 0.3s;
}

.tr-upsell-checkout fieldset[class^="upsell-checkout-order-bump-section"]:hover {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.tr-upsell-checkout [class^="upsell-order-bump-highlight-text"] {
	margin: 0 0 0.5rem;
	font-family: Poppins, sans-serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 1.2;
	color: rgb(245, 158, 11);
}

.tr-upsell-checkout [class^="upsell-order-bump-description-text"],
.tr-upsell-checkout [class^="upsell-order-bump-description-text"] p {
	margin: 0;
	font-size: 1.55rem;
	line-height: 1.45;
	color: rgb(107, 114, 128);
}

.tr-upsell-checkout [class^="upsell-checkout-order-bump-section-footer"] {
	border-top: 0;
	padding-top: 0 !important;
}

/* The tick box sits in a <footer> of its own inside the box. The plugin rules
 * it off; the original had one box, so the line goes. */
.tr-upsell-checkout .upsell-order-bump-arrow {
	display: none;
}

@media (max-width: 767px) {
	.tr-upsell-checkout [class^="upsell-order-bump-highlight-text"] {
		font-size: 22px;
	}
}

/* ------------------------------------------------------------------
 * 05. Tick boxes -- the bump, the terms line
 *
 * The plugin's markup is Bootstrap's "custom control", which hides the real
 * box and draws a replacement in the label. Without Bootstrap the real box is
 * the one on the page, so it is put back to a plain, visible checkbox at the
 * size the original's own bump box used.
 * ------------------------------------------------------------------ */

.tr-upsell-checkout .custom-control {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.tr-upsell-checkout .custom-control-input {
	position: static;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.25rem 0 0;
	flex: 0 0 auto;
	opacity: 1;
	cursor: pointer;
}

.tr-upsell-checkout .custom-control-input.hidden {
	display: none;
}

.tr-upsell-checkout .custom-control-label {
	margin: 0;
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.45;
	color: #1f2937;
	cursor: pointer;
}

.tr-upsell-checkout .d-flex {
	display: flex;
}

.tr-upsell-checkout .upsell-checkout-terms-section .form-group {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
}

.tr-upsell-checkout .upsell-checkout-terms-section p {
	margin: 0;
	font-size: 1.4rem;
	line-height: 1.45;
}

.tr-upsell-checkout .upsell-checkout-terms-section .ml-2 {
	margin-left: 0;
}

/* The terms line's own label is EMPTY -- Bootstrap drew its tick box in it, and
 * the words sit in a separate block beside it. Left at its natural width it
 * opens a gap the size of a word between the box and "I agree". */
.tr-upsell-checkout .upsell-terms-checkbox-label:empty,
.tr-upsell-checkout .upsell-confirm-e-mark-checkbox-label:empty {
	display: none;
}

/* ------------------------------------------------------------------
 * 06. The button
 * ------------------------------------------------------------------ */

.tr-upsell-checkout .control-group center {
	display: block;
}

.tr-upsell-checkout .submit-button,
.tr-upsell-checkout .stripe-submit-button,
.tr-upsell-checkout .paypal-submit-button {
	display: block;
	width: 100%;
	padding: 15px;
	border: 0;
	border-radius: 4px;
	background: #62bc18;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	cursor: pointer;
	transition: background 0.3s;
}

.tr-upsell-checkout .submit-button:hover,
.tr-upsell-checkout .stripe-submit-button:hover,
.tr-upsell-checkout .paypal-submit-button:hover {
	background: rgb(0, 81, 119);
}

/* ------------------------------------------------------------------
 * 07. Stripe's card boxes
 *
 * Stripe mounts its own frames into these; the box around them is ours, and it
 * is the same box as every other field on the form.
 * ------------------------------------------------------------------ */

.tr-upsell-checkout #upsell-card-number,
.tr-upsell-checkout #upsell-card-expiry,
.tr-upsell-checkout #upsell-card-cvc,
.tr-upsell-checkout .upsell-stripe-element {
	min-height: 41px;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
}

.tr-upsell-checkout .StripeElement--focus {
	border-color: #0073aa;
}

.tr-upsell-checkout .StripeElement--invalid {
	border-color: #e53935;
}

/* ------------------------------------------------------------------
 * 08. The sign-in box the plugin ships
 *
 * These checkouts do not create accounts (migration/upsell-products.php), so
 * the plugin's login pop-up never opens. It is left hidden rather than removed:
 * the markup is the plugin's to print.
 * ------------------------------------------------------------------ */

.tr-upsell-checkout .upsell-user-account-signin {
	display: none;
}

/* ------------------------------------------------------------------
 * 09. When the product is missing (editors only, inc/upsell.php)
 * ------------------------------------------------------------------ */

.tr-upsell-missing p {
	margin: 0;
	padding: 1.5rem;
	border: 1px dashed #e53935;
	border-radius: 4px;
	background: #fff8f8;
	color: #e53935;
	font-size: 1.4rem;
}

/* ------------------------------------------------------------------
 * 09b. The members' page: /manage-subscription/
 *
 * The plugin asks for an email address and then lists what that address is
 * paying for, with a cancel button. Both are plain Bootstrap markup, dressed
 * here like the rest of the forms.
 * ------------------------------------------------------------------ */

.tr-upsell-checkout .upsell-customer-session-form {
	margin: 1.5rem 0 2.5rem;
}

.tr-upsell-checkout .upsell-customer-session-form .col-md-6 {
	padding-left: 0;
}

.tr-upsell-checkout .upsell-customer-session-form .btn,
.tr-upsell-checkout .upsell-subscription-list .btn {
	padding: 10px 20px;
	border: 0;
	border-radius: 4px;
	background: rgb(212, 175, 55);
	color: #fff;
	font-family: inherit;
	font-size: 1.4rem;
	cursor: pointer;
}

.tr-upsell-checkout .upsell-customer-session-form .btn:hover,
.tr-upsell-checkout .upsell-subscription-list .btn:hover {
	background: rgb(0, 81, 119);
}

.tr-upsell-checkout .upsell-customer-session-form center {
	display: block;
	text-align: left;
}

.tr-upsell-checkout .upsell-subscription-list-table {
	width: 100%;
	margin: 1.5rem 0;
	border-collapse: collapse;
	font-size: 1.4rem;
}

.tr-upsell-checkout .upsell-subscription-list-table th,
.tr-upsell-checkout .upsell-subscription-list-table td {
	padding: 1rem;
	text-align: left;
	border: 1px solid #e5e7eb;
	vertical-align: middle;
}

@media (max-width: 767px) {
	.tr-upsell-checkout .upsell-subscription-list-table {
		display: block;
		overflow-x: auto;
	}
}

/* ------------------------------------------------------------------
 * 10. The receipt on the three thank-you pages
 *
 * The Lime Funnels receipt table was a three-column grid captioned "Your
 * Product Receipt"; this is the plugin's order list in the same shape.
 * ------------------------------------------------------------------ */

.tr-upsell-receipt {
	font-size: 1.4rem;
	color: #3d3d3d;
}

.tr-upsell-receipt table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	background: #fff;
}

.tr-upsell-receipt th,
.tr-upsell-receipt td {
	padding: 1rem 1.5rem;
	text-align: left;
	border-bottom: 1px solid #eee;
}

.tr-upsell-receipt th {
	background: #1f2937;
	color: #fff;
	font-weight: 600;
}

.tr-upsell-receipt-empty {
	margin: 0;
	line-height: 1.45;
}

/* ------------------------------------------------------------------
 * 11. The "Processing..." overlay, while a payment is going through
 *
 * The plugin shows it by hand (jQuery .show(), an inline style that beats the
 * rule in fixes.css) between the card being submitted and the next page. These
 * are the plugin's own numbers, from the stylesheet this build does not load.
 * ------------------------------------------------------------------ */

.upsell-loader {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 50;
	background-color: rgba(0, 0, 0, 0.8);
}

.upsell-loading .upsell-loader {
	display: block;
}

.upsell-loader-body {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: #fff;
	text-align: center;
}

.upsell-loader-content {
	margin-top: 1.5rem;
	font-size: 1.8rem;
	font-weight: 500;
}

.upsell-loader-rolling {
	width: 64px;
	height: 64px;
	margin: 0 auto;
}

.upsell-loader-rolling div {
	display: block;
	width: 48px;
	height: 48px;
	margin: 8px;
	border: 6px solid #fff;
	border-color: #fff transparent transparent transparent;
	border-radius: 50%;
	animation: tr-upsell-spin 1s linear infinite;
}

@keyframes tr-upsell-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.upsell-loader-rolling div {
		animation: none;
	}
}