/**
 * NAMYNOT checkout.
 *
 * Loaded only on a checkout holding a Business Credit Builder product, so the
 * invoiced NET 30 checkout keeps stock WooCommerce.
 *
 * Brand: Royal #2D7FF0, Ink #101727, Poppins for headings.
 *
 * Built against rendered screenshots at 1440 and 390 wide, not against the
 * markup. The markup was correct while the page looked broken.
 */

.woocommerce-checkout {
	--nn-royal: #2D7FF0;
	--nn-royal-dark: #1C63C7;
	--nn-ink: #101727;
	--nn-muted: #5A6478;
	--nn-line: #E3E8F0;
	--nn-field: #D5DCE8;
	--nn-ground: #F7F9FC;
	--nn-radius: 10px;
}

/* ---------------------------------------------------------------------------
   One column.

   Removing the order-notes panel emptied the right-hand column, which left the
   form squeezed into the left half of a two-column grid with nothing beside it
   and the order table running full width underneath. Nothing needs two columns
   any more, so the whole thing becomes one measured column.
   --------------------------------------------------------------------------- */

.woocommerce-checkout form.checkout,
.woocommerce-checkout .woocommerce-notices-wrapper,
.woocommerce-checkout .woocommerce-form-login-toggle {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.woocommerce-checkout form.checkout .col2-set,
.woocommerce-checkout form.checkout .col2-set .col-1,
.woocommerce-checkout form.checkout .col2-set .col-2 {
	width: 100%;
	max-width: 100%;
	float: none;
	margin: 0;
	padding: 0;
}

#order_review,
#order_review_heading {
	width: 100%;
	float: none;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------------------------
   Sections as cards, so the eye can tell where one job ends and the next begins.
   --------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout #order_review,
.woocommerce-checkout .nn-reporting-panel {
	background: #fff;
	border: 1px solid var(--nn-line);
	border-radius: var(--nn-radius);
	padding: 1.75rem 1.5rem;
	margin-bottom: 1.75rem;
}

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .nn-section-heading {
	font-family: "Poppins", "Raleway", sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--nn-ink);
	margin: 0 0 1.35rem;
	padding: 0;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* The order heading sits outside the card by default; pull it in. */
.woocommerce-checkout #order_review_heading {
	margin-bottom: 0.9rem;
}

/* ---------------------------------------------------------------------------
   Labels. These exist in the markup and the theme hides them with display:none,
   which is why the form rendered as a stack of unexplained grey boxes. Setting
   position and clip alone does not undo display:none.
   --------------------------------------------------------------------------- */

.woocommerce-checkout .form-row > label,
.woocommerce-checkout .nn-reporting-panel label {
	display: block !important;
	position: static !important;
	clip: auto !important;
	clip-path: none !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	margin: 0 0 0.45rem !important;
	font-family: "Poppins", "Raleway", sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nn-muted);
	line-height: 1.4;
}

/* Red asterisks, twice.

   Every label carries <span class="required">*</span> and the terms row adds
   <abbr class="required">*</abbr> on top, so the agreement line ends in two
   floating red marks with nothing explaining them. Almost everything here is
   required, so the asterisks say nothing; WooCommerce already prints
   "(optional)" where it matters, which carries the same information the right
   way round. */
.woocommerce-checkout .form-row > label .required,
.woocommerce-checkout .form-row > label abbr.required {
	display: none !important;
}

.woocommerce-checkout .optional {
	text-transform: none;
	letter-spacing: 0.02em;
	font-weight: 500;
	opacity: 0.75;
}

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

   16px is not cosmetic: iOS Safari zooms the viewport on focus for anything
   smaller and never zooms back out.
   --------------------------------------------------------------------------- */

.woocommerce-checkout .form-row {
	margin: 0 0 1.15rem;
	padding: 0;
}

.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	min-height: 50px;
	padding: 0.8rem 0.95rem;
	color: var(--nn-ink) !important;
	background: #fff;
	border: 1px solid var(--nn-field);
	border-radius: 8px;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce-checkout .input-text::placeholder {
	color: #9AA3B2;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
	outline: none;
	border-color: var(--nn-royal);
	box-shadow: 0 0 0 3px rgba(45, 127, 240, 0.15);
}

/* Selects need room for the theme's arrow. */
.woocommerce-checkout select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.4rem;
	background-image: linear-gradient(45deg, transparent 50%, var(--nn-muted) 50%),
	                  linear-gradient(135deg, var(--nn-muted) 50%, transparent 50%);
	background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

/* Two-up rows, with a real gutter instead of WooCommerce's percentage floats. */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last {
	width: calc(50% - 0.5rem);
	float: left;
	margin-right: 1rem;
}
.woocommerce-checkout .form-row-last {
	margin-right: 0;
}
.woocommerce-checkout .form-row-wide,
.woocommerce-checkout .form-row.notes {
	clear: both;
	width: 100%;
}

/* ---------------------------------------------------------------------------
   Reporting panel.
   --------------------------------------------------------------------------- */

.nn-reporting-panel {
	border-color: rgba(45, 127, 240, 0.3) !important;
	background: rgba(45, 127, 240, 0.035) !important;
	overflow: hidden;
}

.nn-reporting-panel h3 {
	margin-bottom: 0.5rem;
}

/* The blue period. */
.nn-reporting-panel h3::after {
	content: ".";
	color: var(--nn-royal);
}

.nn-reporting-intro {
	margin: 0 0 1.4rem;
	font-size: 0.92rem;
	line-height: 1.65;
	color: var(--nn-muted);
	max-width: 56ch;
}

.nn-reporting-note {
	clear: both;
	margin: 0.25rem 0 0;
	padding-top: 0.9rem;
	font-size: 0.85rem;
	line-height: 1.6;
	color: var(--nn-muted);
}

/* ---------------------------------------------------------------------------
   Order review.
   --------------------------------------------------------------------------- */

.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
	font-size: 0.95rem;
}

.woocommerce-checkout-review-order-table thead th {
	font-family: "Poppins", "Raleway", sans-serif;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nn-muted);
	background: var(--nn-ground);
	padding: 0.75rem 1rem;
	border: none;
	text-align: left;
}
.woocommerce-checkout-review-order-table thead th:last-child {
	text-align: right;
}

.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table tfoot th {
	padding: 0.9rem 1rem;
	border: none;
	border-top: 1px solid var(--nn-line);
	color: var(--nn-ink) !important;
	vertical-align: top;
}
.woocommerce-checkout-review-order-table td {
	text-align: right;
}
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table .product-name {
	text-align: left;
	font-weight: 500;
}

.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
	border-top: 2px solid var(--nn-ink);
	font-weight: 700;
	font-size: 1.05rem;
}

.woocommerce-checkout-review-order-table small,
.woocommerce-checkout-review-order-table .first-payment-date {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--nn-muted);
	font-weight: 400;
}

/* ---------------------------------------------------------------------------
   Payment.
   --------------------------------------------------------------------------- */

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	border: none;
	margin: 0 0 1.25rem;
}

.woocommerce-checkout #payment div.form-row.place-order {
	padding: 0;
	margin: 0;
}

.woocommerce-checkout .wc-payment-form,
.woocommerce-checkout .payment_box {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
}
.woocommerce-checkout .payment_box::before {
	display: none !important;
}

.woocommerce-privacy-policy-text {
	font-size: 0.85rem;
	line-height: 1.65;
	color: var(--nn-muted);
	margin: 1.25rem 0;
}

/* ---------------------------------------------------------------------------
   Terms, and the checkbox that accepts them.
   --------------------------------------------------------------------------- */

.woocommerce-terms-and-conditions-wrapper {
	margin-top: 1.25rem;
}

.woocommerce-terms-and-conditions {
	padding: 1.1rem 1.2rem;
	margin-bottom: 1.15rem;
	border: 1px solid var(--nn-line);
	border-radius: 8px;
	background: var(--nn-ground);
	max-height: 200px;
	overflow-y: auto;
	font-size: 0.86rem;
	line-height: 1.6;
}

.woocommerce-terms-and-conditions-wrapper .form-row,
.woocommerce-terms-and-conditions-wrapper .validate-required {
	margin: 0;
	padding: 0;
}

/* The label is the whole clickable row, so it gets the alignment and the gap.
   Scoped to the terms wrapper: `.woocommerce-validated` is stamped onto every
   required field as it passes validation, so styling that class reflows the
   entire form while the customer fills it in. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox,
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 0.35rem 0;
	margin: 0 !important;
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: normal;
	text-transform: none !important;
	color: var(--nn-ink) !important;
	cursor: pointer;
}

.woocommerce-checkout input[type="checkbox"] {
	width: 20px;
	height: 20px;
	min-width: 20px;
	margin: 0.1rem 0 0;
	flex: 0 0 auto;
	accent-color: var(--nn-royal);
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Place order.
   --------------------------------------------------------------------------- */

.woocommerce-checkout #place_order {
	display: block;
	width: 100%;
	min-height: 56px;
	margin-top: 1.5rem;
	padding: 0.95rem 1.5rem;
	font-family: "Poppins", "Raleway", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #fff !important;
	background: var(--nn-royal) !important;
	background-image: none !important;
	opacity: 1 !important;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.05s ease;
}
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout #place_order:focus {
	background: var(--nn-royal-dark);
	color: #fff;
}
.woocommerce-checkout #place_order:active {
	transform: translateY(1px);
}

/* ---------------------------------------------------------------------------
   Noise.
   --------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .checkout_coupon,
.woocommerce-checkout .wc-backward,
.woocommerce-checkout .return-to-shop,
.woocommerce-checkout .woocommerce-message .button {
	display: none !important;
}

.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info {
	border-radius: 8px;
	border-top-color: var(--nn-royal);
	font-size: 0.9rem;
}

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

@media (max-width: 768px) {
	.woocommerce-checkout .woocommerce-billing-fields,
	.woocommerce-checkout #order_review,
	.woocommerce-checkout .nn-reporting-panel {
		padding: 1.25rem 1.1rem;
		margin-bottom: 1.35rem;
	}

	/* Nothing sits side by side on a phone. At 47% each, first and last name
	   land at about 160px, and EIN next to D-U-N-S is two identical nine-digit
	   boxes with no room for the labels that tell them apart. */
	.woocommerce-checkout .form-row-first,
	.woocommerce-checkout .form-row-last,
	.nn-reporting-panel .form-row {
		width: 100% !important;
		float: none !important;
		margin-right: 0 !important;
		clear: both !important;
	}

	.woocommerce-checkout-review-order-table {
		font-size: 0.9rem;
	}
	.woocommerce-checkout-review-order-table thead th,
	.woocommerce-checkout-review-order-table td,
	.woocommerce-checkout-review-order-table tfoot th {
		padding: 0.75rem 0.6rem;
	}

	.woocommerce-terms-and-conditions {
		max-height: 150px;
	}
}


/* ---------------------------------------------------------------------------
   Fixes made after looking at the rendered page.
   --------------------------------------------------------------------------- */

/* Every section heading now sits INSIDE its card. "Your order" was the odd one
   out, floating above the card while "Billing details" sat within it, so the
   two sections read as different kinds of thing. The default heading is hidden
   and re-emitted inside the card by the plugin. */
.woocommerce-checkout #order_review_heading {
	display: none !important;
}

/* Re-emitted inside the card. WooCommerce fires
   woocommerce_checkout_before_order_review OUTSIDE the #order_review div, and
   the first hook inside it lands within the <table>, so there is no PHP hook
   that puts a heading where this needs to go. */
.woocommerce-checkout #order_review::before {
	content: "Your order";
	display: block;
	font-family: "Poppins", "Raleway", sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--nn-ink);
	margin: 0 0 1.35rem;
}

/* The newsletter opt-in was rendering in the uppercase field-label style, which
   made a consent checkbox look like a form label. */
.woocommerce-checkout .form-row label.checkbox,
.woocommerce-checkout label.woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.9rem !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--nn-ink) !important;
}

/* WooPayments renders its own "Card" caption at label size. Match the other
   field labels so the payment block does not look like a different form. */
.woocommerce-checkout .wc-block-components-checkout-step__heading,
.woocommerce-checkout #payment .payment_method_woocommerce_payments label {
	font-family: "Poppins", "Raleway", sans-serif;
	font-size: 0.72rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--nn-muted) !important;
}

/* Keep the card iframe from touching the edges of its container. */
.woocommerce-checkout #payment .wcpay-card-mount,
.woocommerce-checkout #payment .wc-payment-form {
	margin-top: 0.5rem !important;
}


/* ---------------------------------------------------------------------------
   Corrections measured off the rendered page, not guessed.
   --------------------------------------------------------------------------- */

/* The theme gives #order_review margin-right:-50px, which made the order card
   770px wide against the billing card's 720px, so the two sections did not line
   up down the right edge. Measured, not inferred. */
.woocommerce-checkout #order_review {
	margin-right: auto !important;
	margin-left: auto !important;
	width: 100% !important;
	max-width: 720px !important;
	box-sizing: border-box;
}

/* Amounts belong under the SUBTOTAL heading. The theme left-aligns every table
   cell with enough specificity to beat the earlier rule. */
.woocommerce-checkout .woocommerce-checkout-review-order-table td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
	text-align: right !important;
	padding: 0.9rem 1rem !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th {
	text-align: left !important;
	padding: 0.9rem 1rem !important;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th:last-child {
	text-align: right !important;
}

/* Only the true total carries the heavy rule. Subscriptions marks both the cart
   total and the recurring total as .order-total, which drew two black bars. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr td {
	border-top: 1px solid var(--nn-line);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:last-child th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:last-child td {
	border-top: 2px solid var(--nn-ink);
	font-weight: 700;
}

/* Notices: the theme sets a tall line-height that made a one-line message run to
   three lines with gaps between them. */
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-error {
	line-height: 1.55 !important;
	padding: 1rem 1.15rem !important;
	margin-bottom: 1rem !important;
}

/* Nothing may paint over the pay button. */
.woocommerce-checkout #place_order::before,
.woocommerce-checkout #place_order::after {
	display: none !important;
	content: none !important;
}

/* The blanket td rule pushed the product name to the right edge with the price.
   Only amounts are right-aligned. */
.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-name,
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name {
	text-align: left !important;
}

/* ---------------------------------------------------------------------------
   Order table on a phone.

   The default auto layout gave the amount column roughly half the width for a
   seven-character price, which squeezed "NAMYNOT Business Credit Builder x 1"
   into five wrapped lines. Fixing the ratio gives the name room and still fits
   "$60.00 / month" on two.
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.woocommerce-checkout .woocommerce-checkout-review-order-table {
		table-layout: fixed;
		font-size: 0.87rem;
	}
	.woocommerce-checkout .woocommerce-checkout-review-order-table th,
	.woocommerce-checkout .woocommerce-checkout-review-order-table thead th:first-child {
		width: 58% !important;
		padding: 0.7rem 0.5rem !important;
	}
	.woocommerce-checkout .woocommerce-checkout-review-order-table td,
	.woocommerce-checkout .woocommerce-checkout-review-order-table thead th:last-child {
		width: 42% !important;
		padding: 0.7rem 0.5rem !important;
	}
	.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name {
		word-break: normal;
		overflow-wrap: anywhere;
		line-height: 1.45;
	}
	/* The renewal date is a footnote, not a second price. */
	.woocommerce-checkout .woocommerce-checkout-review-order-table .first-payment-date,
	.woocommerce-checkout .woocommerce-checkout-review-order-table small {
		font-size: 0.75rem;
	}
}

/* ---------------------------------------------------------------------------
   Final corrections from review.
   --------------------------------------------------------------------------- */

/* The terms checkbox keeps its indicator, as a word rather than a floating mark.

   Field-label asterisks are safe to hide: they are aria-hidden already and the
   input carries aria-required, so nothing is lost. The terms checkbox is not
   like that. WooCommerce's terms.php marks it with <abbr class="required"> and
   the input has NO required or aria-required attribute at all, so that abbr is
   the only signal, for sighted users and screen readers alike, that ticking it
   is mandatory. Hiding it meant the first indication was a failed submission. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper abbr.required {
	display: inline !important;
	border: none;
	text-decoration: none;
	font-size: 0;            /* drop the asterisk glyph */
	margin-left: 0.35rem;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper abbr.required::after {
	content: "Required";
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #B4232B;
	white-space: nowrap;
}

/* Only the grand total is emphasised. WooCommerce Subscriptions labels both the
   cart total and the recurring total .order-total, so the earlier rule enlarged
   and bolded a row that is not the total being charged today. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:not(:last-child) th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:not(:last-child) td {
	font-weight: 500;
	font-size: 0.95rem;
}


/* ===========================================================================
   Page chrome, type and density.
   =========================================================================== */

/* The "Checkout" title block, its 160px of height and the rule under it.

   It repeats the browser tab, the H1 of a form nobody arrived at by accident,
   and it costs 160px before the first field on a phone. The theme reserves that
   height inline (style="height:160px"), so the wrapper goes too, not just the
   text. */
.woocommerce-checkout .edgtf-title,
.woocommerce-checkout .edgtf-title-holder,
.woocommerce-checkout .edgtf-title-image {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	border: none !important;
}

/* Side margins.

   The theme puts margin:0 50px on .edgtf-container-inner and pins it to a fixed
   300px under 480px wide, so a 400px phone spends a quarter of its screen on
   empty gutters and renders the form in 300px. Measured in DevTools, not
   guessed. High specificity because the theme's own selector is long. */
.woocommerce-checkout .edgtf-content .edgtf-content-inner > .edgtf-container > .edgtf-container-inner,
.woocommerce-checkout .edgtf-container-inner,
.woocommerce-checkout .edgtf-container .edgtf-container-inner {
	width: auto !important;
	max-width: 1180px !important;
	margin: 0 auto !important;
	padding: 2.25rem 1.25rem 4rem !important;
	box-sizing: border-box !important;
}

@media (max-width: 480px) {
	.woocommerce-checkout .edgtf-content .edgtf-content-inner > .edgtf-container > .edgtf-container-inner,
	.woocommerce-checkout .edgtf-container-inner,
	.woocommerce-checkout .edgtf-container .edgtf-container-inner {
		width: auto !important;
		max-width: 100% !important;
		padding: 1.5rem 0.9rem 3rem !important;
	}
}

/* ---------------------------------------------------------------------------
   Type. Poppins is already loaded site-wide at 100-900, so this adds no request.
   The theme's Raleway is what made the whole form read as somebody else's.
   --------------------------------------------------------------------------- */

/* Scoped to the WooCommerce content block, and inherited from there.

   Two traps this avoids.

   `.woocommerce-checkout` is a BODY class, not a wrapper around the form, so
   anything keyed off it alone restyles the header, nav and footer as well.

   And a blanket `span { font-family: ... !important }` breaks the theme's icon
   fonts: its back-to-top, search and mobile-menu glyphs are bare
   <span class="edgtf-icon-font-elegant">, whose own font-family carries no
   !important and loses. The icons then render as Poppins gibberish. So the
   family is set on containers and real form controls and left to inherit. */
.woocommerce-checkout .woocommerce,
.woocommerce-checkout form.checkout,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout #order_review,
.woocommerce-checkout .nn-reporting-panel,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce .input-text,
.woocommerce-checkout .woocommerce select,
.woocommerce-checkout .woocommerce textarea,
.woocommerce-checkout .woocommerce label,
.woocommerce-checkout .woocommerce table,
.woocommerce-checkout .woocommerce p {
	font-family: "Poppins", sans-serif;
}

/* Icon fonts are left completely alone.
 *
 * There used to be a rule here setting `font-family: inherit` on icon elements,
 * described as protecting them. It did the opposite: `inherit` resolves to the
 * PARENT's family, which after the Poppins change is Poppins, so the rule fed a
 * text face to the glyph and the mobile menu button rendered as an empty box.
 *
 * The theme already declares 'ElegantIcons' and 'FontAwesome' on these
 * elements. The correct protection is no rule at all. Do not add one back. */

/* ---------------------------------------------------------------------------
   Size. Everything was a notch too small to read comfortably.
   --------------------------------------------------------------------------- */

.woocommerce-checkout .woocommerce {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--nn-ink);
}

.woocommerce-checkout .form-row > label,
.woocommerce-checkout .nn-reporting-panel label {
	font-size: 0.8rem !important;
	letter-spacing: 0.06em;
	color: #47506180;
	color: #475061;
}

.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
	font-size: 1rem !important;   /* 16px: below this iOS zooms and never returns */
}

.woocommerce-checkout h3,
.woocommerce-checkout .nn-section-heading,
.woocommerce-checkout #order_review::before {
	font-size: 1.35rem !important;
}

.woocommerce-checkout .nn-reporting-intro {
	font-size: 1rem;
}
.woocommerce-checkout .nn-reporting-note,
.woocommerce-checkout .woocommerce-privacy-policy-text {
	font-size: 0.92rem;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table {
	font-size: 1rem;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
	font-size: 0.8rem;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:last-child th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr:last-child td {
	font-size: 1.15rem;
}

.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label {
	font-size: 1rem !important;
}

.woocommerce-checkout #place_order {
	font-size: 1.05rem !important;
}

/* ---------------------------------------------------------------------------
   Selects. The theme leaves them at their native height, so they sat visibly
   thinner than the text inputs beside them.
   --------------------------------------------------------------------------- */

.woocommerce-checkout select,
.woocommerce-checkout .select2-container .select2-selection--single {
	height: 52px !important;
	min-height: 52px !important;
	line-height: 1.4 !important;
	padding: 0.8rem 2.6rem 0.8rem 0.95rem !important;
	border: 1px solid var(--nn-field) !important;
	border-radius: 8px !important;
	background-color: #fff !important;
	color: var(--nn-ink) !important;
	box-sizing: border-box !important;
}

.woocommerce-checkout .input-text,
.woocommerce-checkout textarea {
	min-height: 52px !important;
}

/* Select2, if the theme swaps a select for it. */
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__rendered {
	line-height: 1.4 !important;
	/* padding-right is NOT zero: WooCommerce sets 20px to keep a long country
	   name from running underneath the absolutely positioned dropdown arrow. */
	padding: 0 1.6rem 0 0 !important;
	color: var(--nn-ink) !important;
}
/* Arrow box has to grow with the control or it floats near the top. */
.woocommerce-checkout .select2-container .select2-selection--single .select2-selection__arrow {
	height: 50px !important;
	top: 1px !important;
	right: 6px !important;
}

/* ---------------------------------------------------------------------------
   The address note.

   Sits directly under the section heading, before the first field, because it
   answers a question the customer has at that exact moment: which address does
   this want. Styled as guidance, not as an error or a warning.
   --------------------------------------------------------------------------- */

.woocommerce-checkout .nn-address-note {
	margin: -0.35rem 0 1.5rem;
	padding: 0.9rem 1rem;
	border-left: 3px solid var(--nn-royal);
	border-radius: 0 6px 6px 0;
	background: rgba(45, 127, 240, 0.05);
	font-size: 0.94rem;
	line-height: 1.6;
	color: var(--nn-ink);
}

.woocommerce-checkout .nn-address-note-sub {
	display: inline-block;
	margin-top: 0.4rem;
	color: var(--nn-muted);
	font-size: 0.89rem;
}