/**
 * Standalone Order Confirmation page — order card styling.
 *
 * Styles the `[nn_order_details]` output (`.nn-order-confirmation`) to match the
 * CartFlows "modern thank-you" card. The hero ("Thank you for your purchase!")
 * and FAQ are built in Elementor; this file only styles the WooCommerce order
 * markup rendered inside the shortcode.
 *
 * Ported from CartFlows' `.wcf-modern-tq-layout` rules, re-scoped onto
 * `.nn-order-confirmation` (no CartFlows classes).
 */

/* Outer card wrapping the whole widget — prod sets this on the Elementor
   container; we put it here so it's self-contained (warm-grey, thin border, shadow). */
.nn-order-confirmation {
	box-sizing: border-box;
	max-width: 650px;
	margin: 0 auto;
	padding: 15px;
	font-size: 13px;
	background: #eeeeeb;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.16);
}

/* Elementor hero replaces WooCommerce's default success notice. */
.nn-order-confirmation .woocommerce-thankyou-order-received {
	display: none;
}

/* ---- Overview: Order date + Payment method, inline with a dashed divider ---- */
.nn-order-confirmation ul.woocommerce-order-overview.order_details {
	list-style: none;
	display: block;
	text-align: center;
	margin: 0;
	padding: 13px 5px;
	border: 0;
}

/* Order #/email/total are shown elsewhere (# in the title, total in the table). */
.nn-order-confirmation ul.woocommerce-order-overview.order_details li.order,
.nn-order-confirmation ul.woocommerce-order-overview.order_details li.email,
.nn-order-confirmation ul.woocommerce-order-overview.order_details li.total {
	display: none;
}

/* Date + Payment sit centered as a pair, with a centered divider between them. */
.nn-order-confirmation ul.woocommerce-order-overview.order_details li {
	position: relative;
	display: inline-block;
	vertical-align: top;
	border: 0;
	margin: 0;
	padding: 0 26px;
	text-align: left;
	text-transform: none;
	font-size: 12px;
	color: #000;
	line-height: 1.3;
}

.nn-order-confirmation ul.woocommerce-order-overview.order_details li:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: -1em;
	bottom: -0.5em;
	width: 1px;
	background-color: var(--nn-color-gray-lighter-medium, #ccc);
}

/* Value sits under its label (prod renders it in <p>, our WC build in <strong>). */
.nn-order-confirmation ul.woocommerce-order-overview.order_details li strong,
.nn-order-confirmation ul.woocommerce-order-overview.order_details li p {
	display: block;
	margin: 8px 0 0;
	font-size: 12px;
	font-weight: 500;
	color: #000;
}

/* WCS "view your subscription in your account" note. */
.nn-order-confirmation .woocommerce-order > p {
	margin: 0 0 18px;
	font-size: 13px;
	color: #6b7280;
}

/* ---- Order details card ---- */
.nn-order-confirmation .woocommerce-order-details {
	border: 1px solid #d1d5db;
	border-radius: 6px;
	background: #fff;
	overflow: hidden;
	margin-bottom: 20px;
	padding: 0;
}

/* WooCommerce prints its own "Order details" heading; we inject "Order #…"
   (shoptimizer_child_order_details_number_title) as the card header and hide
   the default one. */
.nn-order-confirmation .woocommerce-order-details__title:not(.nn-order-number-title) {
	display: none;
}

.nn-order-confirmation .woocommerce-order-details__title.nn-order-number-title {
	margin: 0;
	padding: 14px;
	border-bottom: 1px solid #d1d5db;
	font-size: 16px;
	font-weight: 600;
	color: #1f2937;
}

/* ---- Items + totals table. Scoped to the MAIN order table
   (.woocommerce-table--order-details) only — the related-subscriptions table is
   also a .shop_table inside this section, and these rules must not touch it. ---- */
.nn-order-confirmation .woocommerce-order-details table.woocommerce-table--order-details {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	padding: 14px;
	font-size: 13px;
}

.nn-order-confirmation .woocommerce-order-details table.woocommerce-table--order-details thead {
	display: none;
}

.nn-order-confirmation .woocommerce-order-details table.woocommerce-table--order-details td,
.nn-order-confirmation .woocommerce-order-details table.woocommerce-table--order-details th {
	border: 0;
	padding: 0 0 10px;
	font-weight: 400;
	color: #1f2937;
	background: transparent;
	vertical-align: top;
}

.nn-order-confirmation .woocommerce-order-details table.woocommerce-table--order-details th {
	text-align: left;
}

.nn-order-confirmation .woocommerce-order-details table.woocommerce-table--order-details td {
	text-align: right;
}

.nn-order-confirmation .woocommerce-order-details table.woocommerce-table--order-details .woocommerce-table__product-name {
	text-align: left;
	padding-right: 20px;
}

.nn-order-confirmation .woocommerce-order-details table.woocommerce-table--order-details tr:last-child td,
.nn-order-confirmation .woocommerce-order-details table.woocommerce-table--order-details tr:last-child th {
	padding-bottom: 0;
}

/* Total row in bold. */
.nn-order-confirmation .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child th,
.nn-order-confirmation .woocommerce-order-details table.woocommerce-table--order-details tfoot tr:last-child td {
	font-weight: 700;
}

/* Prod's card does not show billing/shipping addresses. */
.nn-order-confirmation .woocommerce-customer-details {
	display: none;
}

/* ---- Related subscriptions: card itself is styled by woocommerce-subscriptions.css;
   we only style the "Related subscriptions" header (the bare <h2> has no class). ---- */
.nn-order-confirmation section.woocommerce-order-details > header {
	padding: 14px 14px 0;
}

.nn-order-confirmation section.woocommerce-order-details > header h2 {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	color: #000;
}

/* ---- Buttons (Order again / View) in brand green ---- */
.nn-order-confirmation .order-again {
	margin: 0;
	padding: 0 14px 14px;
}

.nn-order-confirmation .order-again .button,
.nn-order-confirmation .related-subscription-card__actions-wrapper .button {
	background-color: #2D4838;
	border-color: #2D4838;
	color: #fff;
}