/*
Theme Name: Leonidas Travel Child
Template: leonidastravel
Description: Child theme of Leonidas Travel for the payment pages (password screen, payment order page, order-received page).
Author: Levart Design
Version: 1.0.7
Text Domain: leonidastravel-child
*/

/*
 * Scope rules
 * - Everything is scoped by the BEM block "lt-pay" (.lt-pay, .lt-pay__*), or by
 *   body.single-product, body.woocommerce-checkout, body.woocommerce-order-received.
 *   Existing pages of the parent theme are not touched.
 * - .lt-pay__* classes are also printed by the plugin on the order-received page (no .lt-pay
 *   ancestor there), so the BEM element rules never depend on an ancestor.
 * - Parent theme variables (:root in the parent style.css) and parent classes (.title-main,
 *   .title-normal-case, .btn, .centered, .spacer ...) are reused. Mobile first, grids from 768px.
 *
 * Sections
 *  1. Base, headings, rules
 *  2. Page head (kicker, title, intro)
 *  3. Password screen
 *  4. Instruction, order total, attachments
 *  5. Checkout: section headings and field grid
 *  6. Checkout: field look (in-field labels)
 *  7. Checkout: selectWoo
 *  8. Secure payment box, consents, place order
 *  9. Notices
 * 10. Order-received page
 */


/* ===== 1. Base, headings, rules ========================================== */

.lt-pay {
	/* Clears the fixed header on phones; from 768px the parent's .spacer does it. */
	padding-top: 5rem;
	font-size: 1.4rem;
	line-height: 1.3;
}

.lt-pay p {
	margin: 0;
}

/* The parent's scroll fade-in (scripts.js adds .fade-animate to blocks and reveals them one by one)
   must not apply to the checkout form: fields appearing piecemeal reads as a broken form, and
   WooCommerce re-renders parts of it by AJAX. !important beats the parent's own !important reveal. */
.lt-pay form.checkout .fade-animate {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* The first spacer sits under the fixed header; the parent's .spacer is too tall for this page. */
.lt-pay > .section-default > .spacer:first-child {
	height: 4rem;
}

/* Visually hidden, still read by screen readers (labels of the password field). */
.lt-pay .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Small uppercase label: INSTRUCTION, YOUR ORDER TOTAL, ENTER THE PASSWORD ... */
.lt-pay__label {
	margin: 0;
	font-family: var(--sans-serif-book);
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-100);
}

.lt-pay__label--big {
	font-size: 1.8rem;
}

/* Section headings: serif, normal case. Same size for .lt-pay__h and the form's h3 headings. */
.lt-pay__h.title-normal-case,
.lt-pay .woocommerce-billing-fields > h3,
.lt-pay .woocommerce-additional-fields > h3,
.lt-pay .thwcfd-field-heading h3,
body.woocommerce-order-received .woocommerce-order h2 {
	margin: 0;
	font-family: var(--serif-light);
	font-size: 2.8rem;
	font-weight: 300;
	line-height: 1.15;
	text-transform: none;
}

.lt-pay .woocommerce-billing-fields > h3 {
	text-transform: capitalize; /* core says "Billing details", mockup "Billing Details" */
}

.lt-pay__rule {
	height: 0;
	margin: 3rem 0;
	border: 0;
	border-top: var(--border-width) solid var(--black-25);
}

.lt-pay__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 2rem;
	padding: 1.5rem 0;
}

.lt-pay__amount {
	font-family: var(--sans-serif-book);
	font-size: 2rem;
	line-height: 1.2;
	letter-spacing: var(--letter-spacing-100);
	white-space: nowrap;
}

.lt-pay__amount .woocommerce-Price-amount,
.lt-pay__amount bdi {
	font-family: inherit;
}


/* ===== 2. Page head ======================================================= */

.lt-pay__head {
	gap: .5rem;
	margin-bottom: 5rem;
}

.lt-pay__kicker.title-main {
	margin: 0;
	line-height: 1.1;
}

.lt-pay__title {
	margin: 0;
	line-height: 1.15;
}

.lt-pay__title.title-normal-case {
	font-size: 2.2rem;
}

.lt-pay__intro {
	max-width: 80rem;
	margin-top: 1.5rem;
	font-size: 1.4rem;
	line-height: 1.3;
}

.lt-pay__intro p + p {
	margin-top: .2rem;
}

/* The thank-you line is heavier and uppercase, the payment line normal (mockup). Works whether the
   editor holds them as two paragraphs or as one paragraph with a line break. */
.lt-pay__intro > p:first-child::first-line {
	font-family: var(--sans-serif-medium);
	text-transform: uppercase;
}


/* ===== 3. Password screen ================================================= */

.lt-pay--locked .lt-pay__title {
	margin-bottom: 0;
}

.lt-pay__password {
	gap: 2rem;
	margin-top: 3rem;
}

.lt-pay__password .lt-pay__label {
	font-size: 1.8rem;
}

.lt-pay__form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	width: 100%;
	max-width: 56rem;
	margin-top: 1rem;
}

.lt-pay__error {
	color: var(--orange);
	font-size: 1.4rem;
}

.lt-pay__input {
	box-sizing: border-box;
	width: 100%;
	height: 5.5rem;
	margin: 0;
	padding: 1rem 1.5rem;
	border: var(--border-width) solid var(--black-25);
	border-radius: var(--border-radius-dna);
	background: var(--black-3);
	color: var(--dark);
	font-family: var(--sans-serif-book);
	font-size: 1.6rem;
	line-height: 1.2;
	text-align: center;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	outline: 0;
	transition: border-color var(--transition-timing) var(--transition-easing);
}

.lt-pay__input:focus {
	border-color: var(--dark);
}

.lt-pay__submit.btn {
	margin: 0;
	background: transparent;
	color: var(--dark);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.lt-pay__submit.btn:hover {
	background: var(--black-10);
}


/* ===== 4. Instruction, order total, attachments ========================== */

.lt-pay__instruction {
	display: grid;
	gap: 1.5rem;
	margin: 1rem 0 2rem;
}

.lt-pay__instruction-body {
	font-size: 1.4rem;
	line-height: 1.3;
}

.lt-pay__instruction-body ol {
	margin: 0;
	padding-left: 1.8rem;
	list-style: decimal;
}

.lt-pay__instruction-body ul {
	margin: 0;
	padding-left: 1.8rem;
	list-style: disc;
}

.lt-pay__instruction-body p + p,
.lt-pay__instruction-body li + li {
	margin-top: .2rem;
}

.lt-pay__attachments {
	display: grid;
	gap: 1.5rem;
	padding: 1.5rem 0;
}

.lt-pay__attachments .lt-pay__label {
	font-size: 1.4rem;
	letter-spacing: var(--letter-spacing-25);
	line-height: 1.3;
}

.lt-pay__files {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	margin-top: 1rem;
}

.lt-pay__file {
	display: block;
	padding: 1.5rem;
	border: var(--border-width) solid var(--dark);
	border-radius: var(--border-radius-dna);
	background: var(--black-25);
	font-family: var(--sans-serif-medium);
	text-align: center;
	text-transform: uppercase;
	transition: var(--transition-timing) var(--transition-easing);
}

.lt-pay__file:after {
	display: none;
}

.lt-pay__file:hover {
	background: var(--black-10);
}

.lt-pay__bottom {
	max-width: 80rem;
	margin: 4rem auto 0;
	font-size: 1.4rem;
	line-height: 1.3;
	text-align: center;
}

.lt-pay__bottom p + p {
	margin-top: 1rem;
}


/* ===== 5. Checkout: section headings and field grid ====================== */

.lt-pay .woocommerce-billing-fields,
.lt-pay .woocommerce-additional-fields {
	margin-top: 4rem;
}

.lt-pay .woocommerce-billing-fields > h3,
.lt-pay .woocommerce-additional-fields > h3 {
	margin-bottom: 2.5rem;
}

.lt-pay .woocommerce-billing-fields__field-wrapper,
.lt-pay .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1.6rem 2rem;
}

/* Ignore WooCommerce's form-row-first / -last / -wide: every row is full width on phones. */
.lt-pay .woocommerce-billing-fields__field-wrapper > .form-row,
.lt-pay .woocommerce-additional-fields__field-wrapper > .form-row {
	grid-column: 1 / -1;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

/* Headings coming from the field editor (Passport, Travel Consultant). */
.lt-pay .woocommerce-billing-fields__field-wrapper > .form-row.thwcfd-field-heading,
.lt-pay .woocommerce-additional-fields__field-wrapper > .form-row.thwcfd-field-heading {
	grid-column: 1 / -1;
	margin-top: 2rem;
}

.lt-pay .thwcfd-field-heading h3 {
	margin: 0;
}

@media only screen and (min-width: 768px) {

	.lt-pay .woocommerce-billing-fields__field-wrapper > .form-row {
		grid-column: span 4;
	}

	.lt-pay .woocommerce-additional-fields__field-wrapper > .form-row {
		grid-column: span 6;
	}

	.lt-pay .woocommerce-billing-fields__field-wrapper > .form-row.thwcfd-field-heading,
	.lt-pay .woocommerce-additional-fields__field-wrapper > .form-row.thwcfd-field-heading {
		grid-column: 1 / -1;
	}

	/* Passport number, country of issuance. */
	.lt-pay #passport_number_field,
	.lt-pay #country_issuance_field {
		grid-column: span 6;
	}

	/* Travel consultant: the six agent fields, three per row. */
	.lt-pay #billing_agent_2_field,
	.lt-pay #agency_name_field,
	.lt-pay #affiliation_field,
	.lt-pay #iata_field,
	.lt-pay #agent_phone_field,
	.lt-pay #agent_mail_field {
		grid-column: span 4;
	}
}

@media only screen and (min-width: 1024px) {

	/* Travellers, food, disabilities, notes: four per row. */
	.lt-pay #taveler_names_field,
	.lt-pay #foodpreferences_field,
	.lt-pay #disabilities_field,
	.lt-pay #order_comments_field {
		grid-column: span 3;
	}
}


/* ===== 6. Checkout: field look (label inside the box) ===================== */
/*
 * Box = the .form-row. Label and hint (span.description, put there by the plugin) are absolutely
 * centred inside it and move to the top when the field has content or focus. State is driven by
 * custom properties on the row, so every state change is one small rule:
 *   --lt-ly label top, --lt-lfs label size, --lt-dy hint top.
 * Row selector used throughout (:where() adds no specificity):
 *   .lt-pay :where(<field wrappers>) > .form-row:not(.thwcfd-field-heading)
 */

.lt-pay :where(.woocommerce-billing-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) > .form-row:not(.thwcfd-field-heading) {
	--lt-ly: calc(50% - .77rem);
	--lt-lfs: 1.4rem;
	--lt-dy: calc(50% + .4rem);
	position: relative;
	box-sizing: border-box;
	min-height: 7rem;
	border: var(--border-width) solid var(--black-25);
	border-radius: var(--border-radius-dna);
	background: var(--black-3);
	transition: border-color var(--transition-timing) var(--transition-easing);
}

/* A row with a hint: label and hint form one centred block. */
.lt-pay :where(.woocommerce-billing-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) > .form-row:not(.thwcfd-field-heading):has(.description) {
	--lt-ly: calc(50% - 1.3rem);
}

/* Filled / focused: label and hint to the top of the box, small. Declared after the rules above. */
.lt-pay :where(.woocommerce-billing-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) > .form-row.lt-filled:not(.thwcfd-field-heading),
.lt-pay :where(.woocommerce-billing-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) > .form-row:not(.thwcfd-field-heading):focus-within {
	--lt-ly: .9rem;
	--lt-lfs: 1rem;
	--lt-dy: 2.3rem;
}

/* Same state without JS, where the browser supports it (separate rules: an unknown selector drops a rule). */
.lt-pay :where(.woocommerce-billing-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) > .form-row:not(.thwcfd-field-heading):has(input[placeholder]:not(:placeholder-shown)) {
	--lt-ly: .9rem;
	--lt-lfs: 1rem;
	--lt-dy: 2.3rem;
}

.lt-pay :where(.woocommerce-billing-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) > .form-row:not(.thwcfd-field-heading):focus-within {
	border-color: var(--dark);
}

/* Label. */
.lt-pay :where(.woocommerce-billing-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) > .form-row:not(.thwcfd-field-heading) > label {
	position: absolute;
	top: var(--lt-ly);
	left: 0;
	right: 0;
	z-index: 1;
	margin: 0;
	padding: 0 1.5rem;
	font-family: var(--sans-serif-medium);
	font-size: var(--lt-lfs);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: var(--letter-spacing-25);
	text-align: center;
	text-transform: uppercase;
	pointer-events: none;
	transition: top .2s var(--transition-easing), font-size .2s var(--transition-easing);
}

/* "(optional)" is not part of the design; the required star is a plain asterisk after the label. */
.lt-pay .form-row > label .optional {
	display: none;
}

.lt-pay .form-row > label abbr.required {
	border: 0;
	text-decoration: none;
	cursor: inherit;
}

/* Hint (the plugin moves the placeholder text into span.description). */
.lt-pay .form-row .woocommerce-input-wrapper {
	display: block;
}

.lt-pay .form-row .description {
	position: absolute;
	top: var(--lt-dy);
	left: 0;
	right: 0;
	z-index: 1;
	padding: 0 1.5rem;
	color: var(--dark);
	font-size: 1rem;
	line-height: 1.1;
	letter-spacing: var(--letter-spacing-25);
	text-align: center;
	text-transform: uppercase;
	opacity: .55;
	pointer-events: none;
	transition: top .2s var(--transition-easing);
}

/* woocommerce.js slideUp/slideDown toggles hints with inline styles; keep them visible. */
.lt-pay .form-row .description {
	display: block !important;
	height: auto !important;
}

/* Placeholders never show; the centred label takes their place (:placeholder-shown still works). */
.lt-pay :where(.woocommerce-billing-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) > .form-row :is(input, textarea)::placeholder {
	color: transparent;
	opacity: 0;
}

/* Inline validation message added by checkout.js: below the box, out of the layout. */
.lt-pay .form-row .checkout-inline-error-message {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin: .4rem 0 0;
	color: var(--orange);
	font-size: 1rem;
	text-align: center;
	text-transform: uppercase;
}

/* Input, select, textarea: transparent, centred, typed text below the label. */
.lt-pay .form-row input[type="text"],
.lt-pay .form-row input[type="email"],
.lt-pay .form-row input[type="tel"],
.lt-pay .form-row input[type="number"],
.lt-pay .form-row input[type="password"],
.lt-pay .form-row textarea,
.lt-pay .form-row select {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-height: 6.9rem;
	margin: 0;
	padding: 3.2rem 1.5rem .8rem;
	border: 0;
	border-radius: var(--border-radius-dna);
	background: transparent;
	color: var(--dark);
	font-family: var(--sans-serif-book);
	font-size: 1.6rem;
	line-height: 1.2;
	text-align: center;
	text-align-last: center;
	box-shadow: none;
	outline: 0;
	-webkit-appearance: none;
	appearance: none;
}

/* Browser autofill paints its own background; repaint it in the box colour. */
.lt-pay .form-row input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 10rem var(--black-3) inset;
	-webkit-text-fill-color: var(--dark);
}

/* Textareas: label stays at the top, box is taller. */
.lt-pay :where(.woocommerce-billing-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) > .form-row:not(.thwcfd-field-heading):has(textarea) {
	min-height: 16rem;
}

.lt-pay :where(.woocommerce-billing-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) > .form-row:not(.thwcfd-field-heading):has(textarea) > label {
	top: 1.2rem;
	font-size: 1.4rem; /* textarea labels never shrink */
}

.lt-pay :where(.woocommerce-billing-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper) > .form-row:not(.thwcfd-field-heading):has(textarea) .description {
	top: 3.2rem;
}

.lt-pay .form-row textarea {
	min-height: 15.9rem;
	padding-top: 5.6rem;
	padding-bottom: 1.2rem;
	resize: none;
}

/* Validation (WooCommerce adds .woocommerce-invalid on the row after a failed submit). */
.lt-pay .form-row.woocommerce-invalid:not(.thwcfd-field-heading) {
	border-color: var(--orange);
}


/* ===== 7. Checkout: selectWoo (country, state) =========================== */

.lt-pay .form-row .select2-container {
	display: block;
	width: 100%;
}

.lt-pay .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	height: 6.9rem;
	border: 0;
	border-radius: var(--border-radius-dna);
	background: transparent;
}

.lt-pay .select2-container--default .select2-selection--single .select2-selection__rendered {
	width: 100%;
	padding: 2.6rem 3rem .4rem;
	color: var(--dark);
	font-family: var(--sans-serif-book);
	font-size: 1.6rem;
	line-height: 1.2;
	text-align: center;
}

.lt-pay .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 1rem;
	height: 100%;
}

/* Empty select: only the centred label is visible, not selectWoo's own placeholder. */
.lt-pay .form-row:not(.lt-filled) .select2-selection__rendered {
	visibility: hidden;
}

/* The dropdown is appended to <body>. */
body.single-product .select2-dropdown {
	border-color: var(--black-25);
	font-family: var(--sans-serif-book);
	font-size: 1.4rem;
}

body.single-product .select2-container--default .select2-results__option--highlighted[aria-selected],
body.single-product .select2-container--default .select2-results__option--highlighted[data-selected] {
	background: var(--black-10);
	color: var(--dark);
}


/* ===== 8. Secure payment box, consents, place order ====================== */

.lt-pay__secure {
	display: grid;
	gap: 2.5rem;
	margin-top: 5rem;
	padding: 2.5rem 2rem;
}

.lt-pay__secure-text {
	font-size: 1.4rem;
	line-height: 1.3;
}

.lt-pay__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 2.5rem;
}

.lt-pay__logos a {
	display: block;
}

.lt-pay__logos a:after {
	display: none;
}

.lt-pay__logos img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 5rem;
}

/* Gateway list: no radio for the only method, its title is a heading, no description box. */
.lt-pay .wc_payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lt-pay .wc_payment_methods > li {
	margin: 0;
	padding: 0;
}

.lt-pay .wc_payment_methods > li:only-child > input[type="radio"] {
	display: none;
}

.lt-pay .wc_payment_methods > li > label {
	font-family: var(--sans-serif-book);
	font-size: 1.8rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-100);
}

/* WooCommerce toggles the box with an inline style; the box only holds a description here. */
.lt-pay .wc_payment_methods .payment_box {
	display: none !important;
}

/* Consents: plain rows, box left, text right. */
.lt-pay__consents .form-row {
	margin: 0 0 1rem;
	padding: 0;
	font-size: 1.4rem;
	line-height: 1.3;
}

.lt-pay__consents label.checkbox {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin: 0;
	font-family: var(--sans-serif-book);
	font-size: 1.4rem;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}

.lt-pay__consents input[type="checkbox"] {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
	accent-color: var(--dark);
	-webkit-appearance: auto;
	appearance: auto;
}

.lt-pay__consents abbr.required {
	border: 0;
	text-decoration: none;
}

.lt-pay__consents .woocommerce-privacy-policy-text,
.lt-pay__consents .woocommerce-terms-and-conditions {
	margin-bottom: 1rem;
	font-size: 1.2rem;
	line-height: 1.3;
}

.lt-pay__consents .woocommerce-terms-and-conditions {
	max-height: 20rem;
	padding: 1.5rem;
	overflow: auto;
	border: var(--border-width) solid var(--black-25);
	border-radius: var(--border-radius-dna);
	background: var(--white);
}

.lt-pay__consents .woocommerce-terms-and-conditions-link {
	font-family: var(--sans-serif-heavy);
	text-decoration: underline;
}

.lt-pay__consents a:after {
	display: none; /* the parent's animated underline; the link is underlined already */
}

/* Place order: right aligned (full width on phones). */
.lt-pay .woocommerce-checkout-payment .place-order {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1rem;
	margin: 1rem 0 0;
	padding: 0;
}

.lt-pay #place_order {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 1.5rem 3rem;
	border: var(--border-width) solid var(--dark);
	border-radius: var(--border-radius-dna);
	background: var(--black-25);
	color: var(--dark);
	font-family: var(--sans-serif-medium);
	font-size: 1.4rem;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: var(--transition-timing) var(--transition-easing);
}

.lt-pay #place_order:hover {
	background: var(--black-10);
}

@media only screen and (min-width: 768px) {

	.lt-pay__secure {
		padding: 4rem 8%;
	}

	.lt-pay .woocommerce-checkout-payment .place-order {
		align-items: flex-end;
	}

	.lt-pay #place_order {
		width: auto;
		min-width: 14rem;
		padding: 1.5rem 4rem;
	}
}


/* ===== 9. Notices ========================================================= */
/* Printed by WooCommerce on woocommerce_before_checkout_form and inside the payment list. */

.lt-pay .woocommerce-error,
.lt-pay .woocommerce-message,
.lt-pay .woocommerce-info,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info {
	margin: 0 0 2rem;
	padding: 1.5rem 2rem;
	border: var(--border-width) solid var(--dark);
	border-radius: var(--border-radius-dna);
	background: var(--black-3);
	color: var(--dark);
	font-size: 1.4rem;
	line-height: 1.3;
	list-style: none;
}

.lt-pay .woocommerce-error,
body.woocommerce-checkout .woocommerce-error {
	border-color: var(--orange);
	color: var(--orange);
}

.lt-pay .woocommerce-error li + li,
body.woocommerce-checkout .woocommerce-error li + li {
	margin-top: .5rem;
}

.lt-pay .woocommerce-error a,
body.woocommerce-checkout .woocommerce-error a {
	color: inherit;
	text-decoration: underline;
}

/* Inside the grey secure box the notice sits on white. */
.lt-pay__secure .woocommerce-info {
	margin-bottom: 0;
	background: var(--white);
}


/* ===== 10. Order-received page =========================================== */
/* Rendered by the parent's index.php: no .lt-pay wrapper, so scoped by the body class. */

body.woocommerce-order-received .woocommerce-order {
	display: grid;
	gap: 3rem;
	padding-top: 6rem;
	font-size: 1.4rem;
	line-height: 1.3;
}

body.woocommerce-order-received .woocommerce-order p {
	margin: 0;
}

body.woocommerce-order-received .woocommerce-thankyou-order-received {
	font-family: var(--serif-light);
	font-size: 2.6rem;
	font-weight: 300;
	line-height: 1.2;
}

body.woocommerce-order-received .woocommerce-order-overview {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 2rem 0;
	border-top: var(--border-width) solid var(--black-25);
	border-bottom: var(--border-width) solid var(--black-25);
	list-style: none;
}

body.woocommerce-order-received .woocommerce-order-overview li {
	margin: 0;
	font-size: 1.2rem;
	letter-spacing: var(--letter-spacing-100);
	line-height: 1.2;
	text-transform: uppercase;
}

body.woocommerce-order-received .woocommerce-order-overview li strong {
	display: block;
	margin-top: .5rem;
	font-family: var(--sans-serif-medium);
	font-size: 1.6rem;
	letter-spacing: var(--letter-spacing-25);
	text-transform: none;
}

body.woocommerce-order-received .woocommerce-order h2 {
	margin-bottom: 1.5rem;
}

body.woocommerce-order-received .woocommerce-order .shop_table {
	width: 100%;
	border-collapse: collapse;
}

body.woocommerce-order-received .woocommerce-order .shop_table th,
body.woocommerce-order-received .woocommerce-order .shop_table td {
	padding: 1.2rem 0;
	border-bottom: var(--border-width) solid var(--black-25);
	font-weight: 400;
	text-align: left;
	vertical-align: top;
}

body.woocommerce-order-received .woocommerce-order .shop_table tfoot th {
	font-family: var(--sans-serif-medium);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-25);
}

body.woocommerce-order-received .woocommerce-order .shop_table td:last-child,
body.woocommerce-order-received .woocommerce-order .shop_table th:last-child {
	text-align: right;
}

body.woocommerce-order-received .woocommerce-order address {
	font-style: normal;
	line-height: 1.4;
}

body.woocommerce-order-received .woocommerce-order .woocommerce-columns {
	display: grid;
	gap: 2rem;
}

/* Attachments printed by the plugin on woocommerce_thankyou (same markup as the product page). */
body.woocommerce-order-received .lt-pay__attachments {
	padding: 0;
}

@media only screen and (min-width: 768px) {

	.lt-pay {
		padding-top: 0;
	}

	.lt-pay__label {
		font-size: 2rem;
	}

	.lt-pay__label--big,
	.lt-pay .wc_payment_methods > li > label {
		font-size: 2.2rem;
	}

	.lt-pay__attachments .lt-pay__label {
		font-size: 1.5rem;
	}

	.lt-pay__password .lt-pay__label {
		font-size: 2.2rem;
	}

	.lt-pay__h.title-normal-case,
	.lt-pay .woocommerce-billing-fields > h3,
	.lt-pay .woocommerce-additional-fields > h3,
	.lt-pay .thwcfd-field-heading h3,
	body.woocommerce-order-received .woocommerce-order h2 {
		font-size: 3.2rem;
	}

	.lt-pay__title.title-normal-case {
		font-size: 2.8rem;
	}

	.lt-pay__intro,
	.lt-pay__instruction-body,
	.lt-pay__bottom {
		font-size: 1.5rem;
	}

	.lt-pay__head {
		gap: .8rem;
		/* Collapses with the instruction block's top margin: this value is the visible gap. */
		margin-bottom: 7rem;
	}

	.lt-pay__intro {
		margin-top: 3.5rem;
	}

	/* Mockup: a centred block ~72% wide, label column 3/7, list column 4/7, label left-aligned. */
	.lt-pay__instruction {
		width: 72%;
		/* Bottom margin collapses with the rule's top margin: 9rem is the visible gap. */
		margin: 2rem auto 9rem;
		grid-template-columns: 3fr 4fr;
		gap: 2rem;
	}

	.lt-pay__instruction .lt-pay__label {
		justify-self: start;
	}

	/* Mockup proportions: subtitle about three quarters of the title. */
	.lt-pay__kicker.title-main {
		font-size: 3.6rem;
	}

	.lt-pay__title.title-normal-case {
		font-size: 2.8rem;
	}

	.lt-pay__rule {
		margin: 4rem 0;
	}

	.lt-pay > .section-default > .spacer:first-child {
		height: 8rem;
	}

	.lt-pay__amount {
		font-size: 2.2rem;
	}

	.lt-pay__files {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lt-pay__password {
		margin-top: 5rem;
	}

	.lt-pay .woocommerce-billing-fields,
	.lt-pay .woocommerce-additional-fields {
		margin-top: 6rem;
	}

	body.woocommerce-order-received .woocommerce-order {
		padding-top: 4rem;
	}

	body.woocommerce-order-received .woocommerce-order-overview {
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	}

	body.woocommerce-order-received .woocommerce-order .woocommerce-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (min-width: 1024px) {

	.lt-pay__h.title-normal-case,
	.lt-pay .woocommerce-billing-fields > h3,
	.lt-pay .woocommerce-additional-fields > h3,
	.lt-pay .thwcfd-field-heading h3,
	body.woocommerce-order-received .woocommerce-order h2 {
		font-size: 3.8rem;
	}

	.lt-pay__title.title-normal-case {
		font-size: 3.2rem;
	}
}

/* ------------------------------------------------------------------------
 * Company lines under "Impressum" in the footer menu (added by functions.php)
 * --------------------------------------------------------------------- */

#footer-menu .lt-footer-company li {
	white-space: nowrap;
}

/* ------------------------------------------------------------------------
 * Payment / security logos inside page content (Terms and Conditions, section 5)
 * --------------------------------------------------------------------- */

.lt-tc-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem 1.6rem;
	margin: 3rem 0;
}

.lt-tc-logos a {
	display: block;
}

.lt-tc-logos a:after {
	display: none;
}

.lt-tc-logos img {
	display: block;
	height: 4rem;
	width: auto;
	max-width: none;
}