/* =========================================================
   RUBY KM — THANK YOU PAGE
   Replace ALL previous Thank You CSS with this file
   ========================================================= */

.brxe-woocommerce-checkout-thankyou {

	/* =====================================================
	   MASTER SETTINGS — CHỈNH DESIGN Ở ĐÂY
	   ===================================================== */

	/* Colors */
	--ruby-dark: #3c2a1f;
	--ruby-text: #4e433b;
	--ruby-muted: #7f7167;
	--ruby-soft: #f5f2ec;
	--ruby-line: rgba(60, 42, 31, .16);
	--ruby-card-text: #f7f3eb;
	--ruby-card-muted: rgba(247, 243, 235, .62);

	/* Fonts */
	--font-info: "Inter", Arial, sans-serif;

	/*
	 * Display font:
	 * Không set font-family để title/product tiếp tục
	 * sử dụng font serif hiện tại của Ruby.
	 */


	/* =========================
	   TYPOGRAPHY — DESKTOP
	   ========================= */

	--fs-title: 3.625rem;

	--fs-meta-label: .8rem;
	--fs-meta-value: 1rem;

	--fs-product: 1.35rem;
	--fs-qty: .8rem;
	--fs-price: 1rem;

	--fs-summary: .95rem;

	--fs-total-label: 1.35rem;
	--fs-total-value: 1.5rem;

	--fs-card-label: .8rem;
	--fs-card-text: 1rem;


	/* =========================
	   LAYOUT
	   ========================= */

	--layout-width: 74rem;
	--layout-gap: 4.5rem;

	--summary-width: 25rem;
	--card-radius: .75rem;


	/* =========================
	   ROOT
	   ========================= */

	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .85fr);
	gap: var(--layout-gap);
	align-items: start;

	width: 100%;
	max-width: var(--layout-width);

	margin: 0 auto;
	padding: 3.5rem 0 4.5rem;

	color: var(--ruby-text);
}


/* =========================================================
   ORDER DETAILS
   ========================================================= */

.brxe-woocommerce-checkout-thankyou
.woocommerce-order-details {
	min-width: 0;
	margin: 0 !important;
}


/* Main title */

.brxe-woocommerce-checkout-thankyou
.woocommerce-order-details__title {
	margin: 0 0 2rem !important;

	color: var(--ruby-dark);

	font-size: var(--fs-title) !important;
	font-weight: 400;
	line-height: .95;
	letter-spacing: -.035em;
	text-transform: uppercase;
}


/* =========================================================
   ORDER META
   ========================================================= */

.brxe-woocommerce-checkout-thankyou
.woocommerce-order-overview {
	display: grid !important;
	grid-template-columns: auto auto minmax(12rem, 1fr);
	gap: 1.25rem 3.5rem;

	margin: 0 0 2.5rem !important;
	padding: 1.25rem 0 !important;

	border: 0 !important;
	border-top: 1px solid var(--ruby-line) !important;
	border-bottom: 1px solid var(--ruby-line) !important;

	background: transparent !important;
	list-style: none !important;
}

.brxe-woocommerce-checkout-thankyou
.woocommerce-order-overview::before,

.brxe-woocommerce-checkout-thankyou
.woocommerce-order-overview::after {
	display: none !important;
}


/* Meta item */

.brxe-woocommerce-checkout-thankyou
.woocommerce-order-overview li {
	display: flex;
	flex-direction: column;
	gap: .4rem;

	width: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;

	color: var(--ruby-muted);

	font-family: var(--font-info);
	font-size: var(--fs-meta-label) !important;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
}


/* Meta value */

.brxe-woocommerce-checkout-thankyou
.woocommerce-order-overview li strong {
	color: var(--ruby-text);

	font-family: var(--font-info);
	font-size: var(--fs-meta-value) !important;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
}


/* Duplicate info */

.brxe-woocommerce-checkout-thankyou
.woocommerce-order-overview__total,

.brxe-woocommerce-checkout-thankyou
.woocommerce-order-overview__payment-method {
	display: none !important;
}


/* =========================================================
   ORDER TABLE
   ========================================================= */

.brxe-woocommerce-checkout-thankyou
.woocommerce-table--order-details {
	width: 100%;

	margin: 0 !important;

	border: 0 !important;
	border-radius: 0 !important;
	border-collapse: collapse !important;

	background: transparent !important;
	box-shadow: none !important;
}


/* Hide Woo table heading */

.brxe-woocommerce-checkout-thankyou
.woocommerce-table--order-details thead {
	display: none;
}


.brxe-woocommerce-checkout-thankyou
.woocommerce-table--order-details tbody {
	display: block;
}


/* Product row */

.brxe-woocommerce-checkout-thankyou
.woocommerce-table--order-details tbody tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2rem;
	align-items: center;

	padding: 1.5rem 0 1.75rem;

	border-bottom: 1px solid var(--ruby-line);
}


.brxe-woocommerce-checkout-thankyou
.woocommerce-table--order-details tbody td {
	padding: 0 !important;

	border: 0 !important;
	background: transparent !important;
}


/* =========================================================
   PRODUCT
   ========================================================= */

.brxe-woocommerce-checkout-thankyou
.woocommerce-table__product-name {
	max-width: 38rem;
}


/* Keep Ruby serif */

.brxe-woocommerce-checkout-thankyou
.woocommerce-table__product-name a {
	color: var(--ruby-dark) !important;

	font-size: var(--fs-product) !important;
	font-weight: 400;
	line-height: 1.4;

	text-decoration: none !important;

	transition: opacity .2s ease;
}


.brxe-woocommerce-checkout-thankyou
.woocommerce-table__product-name a:hover {
	opacity: .6;
}


/* Quantity */

.brxe-woocommerce-checkout-thankyou
.product-quantity {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;

	min-height: 1.75rem;

	margin-left: .6rem !important;
	padding: .25rem .7rem;

	color: var(--ruby-muted);
	background: var(--ruby-soft);

	border-radius: 10rem;

	font-family: var(--font-info);
	font-size: var(--fs-qty) !important;
	font-weight: 500;
	line-height: 1;
}


/* Product price */

.brxe-woocommerce-checkout-thankyou
.woocommerce-table__product-total {
	color: var(--ruby-dark);

	font-family: var(--font-info);
	font-size: var(--fs-price) !important;
	font-weight: 500;

	white-space: nowrap;
}


/* =========================================================
   SUBTOTAL / SHIPPING / TOTAL
   ========================================================= */

.brxe-woocommerce-checkout-thankyou
.woocommerce-table--order-details tfoot {
	display: block;

	width: min(var(--summary-width), 100%);

	margin: 1.75rem 0 0 auto;

	background: transparent !important;
}


/* Summary row */

.brxe-woocommerce-checkout-thankyou
.woocommerce-table--order-details tfoot tr {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2rem;

	padding: .55rem 0;

	background: transparent !important;
}


/* Summary typography */

.brxe-woocommerce-checkout-thankyou
.woocommerce-table--order-details tfoot th,

.brxe-woocommerce-checkout-thankyou
.woocommerce-table--order-details tfoot td {
	padding: 0 !important;

	border: 0 !important;
	background: transparent !important;

	font-family: var(--font-info);
	font-size: var(--fs-summary) !important;
	font-weight: 400;
	line-height: 1.5;
}


.brxe-woocommerce-checkout-thankyou
.woocommerce-table--order-details tfoot th {
	color: var(--ruby-muted);
	text-align: left;
}


.brxe-woocommerce-checkout-thankyou
.woocommerce-table--order-details tfoot td {
	color: var(--ruby-text);
	text-align: right;
}


/* =========================================================
   TOTAL
   ========================================================= */

.brxe-woocommerce-checkout-thankyou
tfoot tr.ruby-total-row {
	margin-top: .75rem;

	padding-top: 1.25rem !important;

	border-top: 1px solid var(--ruby-line);
}


.brxe-woocommerce-checkout-thankyou
tfoot tr.ruby-total-row th {
	color: var(--ruby-dark) !important;

	font-size: var(--fs-total-label) !important;
	font-weight: 400;
}


.brxe-woocommerce-checkout-thankyou
tfoot tr.ruby-total-row td {
	color: var(--ruby-dark) !important;

	font-size: var(--fs-total-value) !important;
	font-weight: 600;
}


/* Payment has been moved to information card */

.brxe-woocommerce-checkout-thankyou
.ruby-payment-row {
	display: none !important;
}


/* =========================================================
   CUSTOMER INFORMATION CARD
   ========================================================= */

.brxe-woocommerce-checkout-thankyou
.woocommerce-customer-details {
	position: sticky;
	top: 2rem;

	margin: 0 !important;
	padding: 2.25rem !important;

	color: var(--ruby-card-text);
	background: var(--ruby-dark);

	border-radius: var(--card-radius);
}


/* Woo columns reset */

.brxe-woocommerce-checkout-thankyou
.woocommerce-customer-details .woocommerce-columns {
	display: block !important;

	margin: 0 !important;
	padding: 0 !important;
}


.brxe-woocommerce-checkout-thankyou
.woocommerce-customer-details .woocommerce-column {
	float: none !important;

	width: 100% !important;

	margin: 0 0 1.5rem !important;
	padding: 0 0 1.5rem !important;

	border-bottom: 1px solid rgba(255,255,255,.14);
}


/* Card labels */

.brxe-woocommerce-checkout-thankyou
.woocommerce-customer-details .woocommerce-column__title,

.brxe-woocommerce-checkout-thankyou
.ruby-info-label {
	margin: 0 0 .6rem !important;

	color: var(--ruby-card-muted);

	font-family: var(--font-info);
	font-size: var(--fs-card-label) !important;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .09em;
	text-transform: uppercase;
}


/* Address + data */

.brxe-woocommerce-checkout-thankyou
.woocommerce-customer-details address,

.brxe-woocommerce-checkout-thankyou
.ruby-info-value {
	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	background: transparent !important;

	color: var(--ruby-card-text);

	font-family: var(--font-info);
	font-size: var(--fs-card-text) !important;
	font-style: normal;
	font-weight: 400;
	line-height: 1.65;
}


.brxe-woocommerce-checkout-thankyou
.woocommerce-customer-details address p {
	margin: .35rem 0 0 !important;
}


/* Custom information block */

.brxe-woocommerce-checkout-thankyou
.ruby-info-block {
	margin: 0 0 1.5rem;
	padding: 0 0 1.5rem;

	border-bottom: 1px solid rgba(255,255,255,.14);
}


.brxe-woocommerce-checkout-thankyou
.ruby-info-block:last-child {
	margin: 0;
	padding: 0;

	border: 0;
}


/* Links */

.brxe-woocommerce-checkout-thankyou
.ruby-info-value a {
	color: inherit !important;

	text-decoration: none !important;

	transition: opacity .2s ease;
}


.brxe-woocommerce-checkout-thankyou
.ruby-info-value a:hover {
	opacity: .65;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

	.brxe-woocommerce-checkout-thankyou {

		/* Typography */
		--fs-title: 3rem;
		--fs-product: 1.25rem;
		--fs-total-label: 1.3rem;
		--fs-total-value: 1.4rem;

		/* Layout */
		grid-template-columns: 1fr;
		gap: 3rem;

		padding: 3rem 0 4rem;
	}


	.brxe-woocommerce-checkout-thankyou
	.woocommerce-customer-details {
		position: static;
	}
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

	.brxe-woocommerce-checkout-thankyou {

		/* =================================================
		   MOBILE TYPOGRAPHY — CHỈNH MOBILE Ở ĐÂY
		   ================================================= */

		--fs-title: 2.5rem;

		--fs-meta-label: .8rem;
		--fs-meta-value: .9rem;

		--fs-product: 1.125rem;
		--fs-qty: .8rem;
		--fs-price: .95rem;

		--fs-summary: .9rem;

		--fs-total-label: 1.2rem;
		--fs-total-value: 1.3rem;

		--fs-card-label: .8rem;
		--fs-card-text: .95rem;


		padding: 2rem 0 3rem;
	}


	/* Meta */

	.brxe-woocommerce-checkout-thankyou
	.woocommerce-order-overview {
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem 1.5rem;

		margin-bottom: 2rem !important;
	}


	.brxe-woocommerce-checkout-thankyou
	.woocommerce-order-overview__email {
		grid-column: 1 / -1;
	}


	/* Product */

	.brxe-woocommerce-checkout-thankyou
	.woocommerce-table--order-details tbody tr {
		gap: 1rem;

		padding: 1.25rem 0;
	}


	/* Summary */

	.brxe-woocommerce-checkout-thankyou
	.woocommerce-table--order-details tfoot {
		width: 100%;
	}


	/* Card */

	.brxe-woocommerce-checkout-thankyou
	.woocommerce-customer-details {
		padding: 1.75rem !important;
	}
}