/**
* Theme Name: Bookory Child
* Description: This is a child theme of Bookory, generated by Merlin WP.
* Author: <a href="https://pavothemes.com/">PavoThemes</a>
* Template: bookory
* Version: 2.2.9
*/

/* ============================================================
   Order-received / Thank-you page restyle (nasekarty)

   Matches the rest of the site's design language: FLAT (no
   shadows, no gradients), navy ink (#15293F), thin 1px #E6E6E6
   borders, Sora, sentence case. Gold is only a link/hover accent
   (never a fill). Everything scoped under .woocommerce-order.
   The site's content column is wide (~1110px); a calmer centered
   reading column (820px) is used for all order sections so they
   line up consistently.

   Brand tokens (live on .woocommerce-order):
     --accent  #15293F  navy   (ink / headings / values)
     --primary #F5C455  gold   (link accent only)
     --text    #535353  body
     --border  #E6E6E6  hairlines
   Success green: #0f834d.
   ============================================================ */

.woocommerce-order {
	color: var(--text);
	font-variant-numeric: tabular-nums; /* align figures by digit width */
}

/* One consistent, centered reading column for every section.
   .woocommerce-order is a flex column (set by the theme), so
   max-width + auto inline margins center each child. */
.woocommerce-order .woocommerce-thankyou-order-received,
.woocommerce-order ul.woocommerce-order-overview,
.woocommerce-order .woocommerce-bacs-bank-details,
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details,
.woocommerce-order .wc-block-order-confirmation-additional-fields-wrapper {
	max-width: 820px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* The parent theme adds clearfix pseudo-elements to ul.order_details
   (content:""; display:table). When the <ul> becomes a grid/flex
   container those pseudos turn into extra grid items and shift every
   cell off by one. Neutralise them on the grids we build. */
.woocommerce-order ul.woocommerce-order-overview::before,
.woocommerce-order ul.woocommerce-order-overview::after,
.woocommerce-order ul.bacs_details::before,
.woocommerce-order ul.bacs_details::after,
.woocommerce-order .woocommerce-customer-details .col2-set::before,
.woocommerce-order .woocommerce-customer-details .col2-set::after {
	content: none;
	display: none;
}

/* ---------- Success banner ---------- */
.woocommerce-order .woocommerce-thankyou-order-received {
	box-sizing: border-box;
	background: #f7f9f8;
	border: 1px solid var(--border);
	border-radius: 10px;
	color: var(--accent);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.35;
	text-align: center;
	padding: 30px 24px;
	margin-top: 8px;
	margin-bottom: 24px;
}
.woocommerce-order .woocommerce-thankyou-order-received::before {
	content: "";
	display: inline-block;
	vertical-align: -5px;
	width: 24px;
	height: 24px;
	margin-right: 10px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%230f834d'/%3E%3Cpath d='M7 12.4l3.1 3.1L17 8.8' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* ---------- Order overview (meta row) ---------- */
.woocommerce-order ul.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	margin-bottom: 24px;
	padding: 0;
	list-style: none;
}
.woocommerce-order ul.woocommerce-order-overview li {
	width: auto !important; /* neutralises parent width:20% !important */
	margin: 0 !important;
	padding: 15px 14px;
	text-align: center;
	border: 1px solid var(--border);
	border-radius: 10px;
	font-size: 13px;
	font-weight: 500;
	text-transform: none;
	color: #6b7280;
}
.woocommerce-order ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: 6px;
	font-size: 16px;
	font-weight: 700;
	text-transform: none;
	color: var(--accent);
}

/* ---------- Bank-transfer details (the key action) ---------- */
.woocommerce-order .woocommerce-bacs-bank-details {
	box-sizing: border-box;
	background: #f4f7fa; /* subtle navy-tinted neutral marks it as important */
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 26px 28px;
	margin-bottom: 24px;
}
.woocommerce-order .wc-bacs-bank-details-heading {
	margin: 0 0 4px;
	font-size: 19px;
	font-weight: 700;
	color: var(--accent);
}
.woocommerce-order .wc-bacs-bank-details-account-name {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
	color: #6b7280;
}
.woocommerce-order ul.bacs_details {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}
.woocommerce-order ul.bacs_details li {
	width: auto;
	margin: 0;
	padding: 12px 14px;
	text-align: left;
	background: #ffffff;
	border: 1px solid var(--border);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	text-transform: none;
	color: #6b7280;
}
.woocommerce-order ul.bacs_details li strong {
	display: block;
	margin-top: 4px;
	font-size: 16px;
	font-weight: 700;
	text-transform: none;
	color: var(--accent);
}
/* Explicit, stable layout: Banka + BIC pair on the top row, then the
   two numbers customers transcribe span full width below. */
.woocommerce-order ul.bacs_details li.bank_name {
	grid-column: 1;
	grid-row: 1;
}
.woocommerce-order ul.bacs_details li.bic {
	grid-column: 2;
	grid-row: 1;
}
.woocommerce-order ul.bacs_details li.account_number {
	grid-column: 1 / -1;
	grid-row: 2;
}
.woocommerce-order ul.bacs_details li.iban {
	grid-column: 1 / -1;
	grid-row: 3;
}
.woocommerce-order ul.bacs_details li.account_number strong,
.woocommerce-order ul.bacs_details li.iban strong {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 18px;
	letter-spacing: 0.02em;
}

/* ---------- Section titles (de-uppercase, left align) ---------- */
.woocommerce-order .woocommerce-order-details__title,
.woocommerce-order .woocommerce-column__title {
	text-align: left;
	text-transform: none;
	font-size: 19px;
	font-weight: 700;
	color: var(--accent);
	margin: 0 0 14px;
}

/* ---------- Order details table ---------- */
.woocommerce-order .woocommerce-order-details {
	box-sizing: border-box;
	margin-bottom: 24px;
}
.woocommerce-order .woocommerce-table--order-details {
	max-width: none;
	width: 100%;
	margin: 0;
}
.woocommerce-order .woocommerce-table--order-details .product-name a {
	color: var(--accent);
	font-weight: 600;
}
.woocommerce-order .woocommerce-table--order-details .product-name a:hover {
	color: var(--primary);
}
.woocommerce-order .woocommerce-table--order-details tfoot td,
.woocommerce-order .woocommerce-table--order-details tfoot .amount {
	color: var(--accent);
}
/* Grand total: navy, not the parent's low-contrast gold */
.woocommerce-order .woocommerce-table--order-details tfoot tr:last-child .amount {
	color: var(--accent);
	font-weight: 700;
}
.woocommerce-order .woocommerce-table--order-details tfoot small {
	font-weight: 400;
	color: #6b7280;
}

/* ---------- Customer details (billing / shipping) ---------- */
.woocommerce-order .woocommerce-customer-details {
	box-sizing: border-box;
	margin-bottom: 24px;
	/* The parent theme floats the address columns; without an explicit
	   flow container the next sibling (the consent block) collapses up
	   to the same top and overlaps the cards. Flex-column forces the
	   children to stack in order. */
	display: flex;
	flex-direction: column;
}
.woocommerce-order .woocommerce-customer-details .col2-set {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch; /* equal-height cards for a matched two-up layout */
	gap: 14px;
	margin: 0 0 24px;
}
.woocommerce-order .woocommerce-customer-details .woocommerce-column {
	width: auto;
	float: none;
	margin: 0;
	padding: 20px 22px;
	border: 1px solid var(--border);
	border-radius: 10px;
}
.woocommerce-order .woocommerce-customer-details address {
	font-style: normal;
	line-height: 1.6;
	color: var(--text);
	border: 0;
	padding: 0;
}

/* ---------- Consent / additional info ----------
   Least important content: kept fully borderless, separated from the
   address cards by whitespace only (no competing lines). */
.woocommerce-order .wc-block-order-confirmation-additional-fields-wrapper {
	box-sizing: border-box;
	margin: 0 0 24px;
	padding: 4px 2px 0;
	border: 0;
}
.woocommerce-order .wc-block-order-confirmation-additional-fields-wrapper h2 {
	font-size: 17px;
	font-weight: 700;
	color: var(--accent);
	margin: 0 0 12px;
}
.woocommerce-order .wc-block-components-additional-fields-list dt {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--text);
}
.woocommerce-order .wc-block-components-additional-fields-list dd {
	margin: 2px 0 12px;
	font-size: 14px;
	font-weight: 700;
	color: var(--accent);
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
	.woocommerce-order .woocommerce-thankyou-order-received {
		font-size: 19px;
		padding: 26px 18px;
	}
	.woocommerce-order .woocommerce-bacs-bank-details {
		padding: 22px 20px;
	}
	.woocommerce-order ul.bacs_details {
		grid-template-columns: 1fr;
	}
	/* stack all bank fields in one column on mobile (drop desktop placement) */
	.woocommerce-order ul.bacs_details li.bank_name,
	.woocommerce-order ul.bacs_details li.bic,
	.woocommerce-order ul.bacs_details li.account_number,
	.woocommerce-order ul.bacs_details li.iban {
		grid-column: 1;
		grid-row: auto;
	}
	.woocommerce-order .woocommerce-customer-details .col2-set {
		grid-template-columns: 1fr;
	}
}