/*
 * Gift-membership purchase flow: product page gift panel, cart-table
 * gift controls, and order-received branding.
 *
 * All values reference tokens from tokens.css. No raw hex; no !important.
 * Mobile-first.
 */

/* ---------------------------------------------------------------------
 * 1. Product page — group the Gifting plugin's checkbox + recipient
 *    email with our auto-renew row into one bounded, tinted panel.
 * ------------------------------------------------------------------- */

.wcsg_add_recipient_fields_container {
	margin-top: var(--isjac-space-4);
	padding: var(--isjac-space-4);
	/* Woo's stacked-table mode right-aligns cell content (with
	 * !important, on the td); the panel resets inheritance for its own
	 * subtree so form controls stay left-aligned inside the cart cell. */
	text-align: left;
	background: var(--isjac-color-brand-wash);
	border: 1px solid var(--isjac-border-default);
	border-radius: var(--isjac-radius-md);
}

.wcsg_add_recipient_fields_container .woocommerce_subscription_gifting_checkbox {
	margin-right: var(--isjac-space-2);
}

.wcsg_add_recipient_fields_container > label {
	font-family: var(--isjac-label-font-family);
	font-size: var(--isjac-label-font-size);
	font-weight: var(--isjac-label-font-weight);
	color: var(--isjac-label-color);
}

.wcsg_add_recipient_fields {
	margin-top: var(--isjac-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--isjac-space-4);
}

/* The recipient email input carries an aria-label ("Gifting recipient")
 * but no visible <label> in the Gifting plugin's markup, and the whole
 * template — including our own printed markup — is piped through
 * wp_kses before it reaches the page (see GiftRenewalChoice's doc
 * comment), which strips any label/class we'd add server-side. A real
 * `<label for>` is injected client-side instead (GiftRenewalScript);
 * `.isjac-gift-recipient-label` is our class, so it survives untouched. */
.woocommerce_subscriptions_gifting_recipient_email {
	display: flex;
	flex-direction: column;
	gap: var(--isjac-space-2);
	margin: 0;
}

/* Quotes vendor `.woocommerce form .form-row label` to outrank it —
 * see the auto-renew cascade note below. */
.woocommerce form .form-row > .isjac-gift-recipient-label {
	display: block;
	margin: 0;
	font-family: var(--isjac-label-font-family);
	font-size: var(--isjac-label-font-size);
	font-weight: var(--isjac-label-font-weight);
	line-height: var(--isjac-line-height-tight);
	color: var(--isjac-label-color);
}

.woocommerce_subscriptions_gifting_recipient_email .recipient_email {
	width: 100%;
	min-height: var(--isjac-input-min-height);
	padding: 0 var(--isjac-input-padding-x);
	font-family: var(--isjac-input-font-family);
	font-size: var(--isjac-input-font-size);
	color: var(--isjac-input-color);
	background: var(--isjac-input-bg);
	border: 1px solid var(--isjac-input-border-color);
	border-radius: var(--isjac-input-radius);
}

/*
 * Auto-renew row: only `p.isjac-gift-auto-renew-row` and
 * `input.isjac-gift-auto-renew` survive wp_kses (see the doc comment on
 * GiftRenewalChoice::printRenewalField()) — every other class we might
 * want on the label/hint spans is stripped, so these rules target the
 * surviving structure instead: `p > label > input + span` (the label,
 * unclassed) and `p > span` (the hint, unclassed, the label's sibling).
 *
 * Label/hint selectors quote WooCommerce's own
 * `.woocommerce form .form-row label` (0-2-2, sets display:block and
 * line-height:2.4) and add our row class to outrank it (0-3-2) —
 * anything weaker loses the cascade to the vendor sheet.
 */
.isjac-gift-auto-renew-row {
	margin: 0;
	padding-top: var(--isjac-space-3);
	border-top: 1px solid var(--isjac-border-default);
}

.woocommerce form .form-row.isjac-gift-auto-renew-row > label {
	display: flex;
	align-items: flex-start;
	gap: var(--isjac-space-2);
	font-family: var(--isjac-label-font-family);
	font-size: var(--isjac-label-font-size);
	font-weight: var(--isjac-label-font-weight);
	line-height: var(--isjac-line-height-tight);
	color: var(--isjac-label-color);
}

.isjac-gift-auto-renew-row > label .input-checkbox {
	margin-top: 0.2em;
	flex-shrink: 0;
}

.isjac-gift-auto-renew-row > span {
	display: block;
	margin-top: var(--isjac-space-2);
	font-family: var(--isjac-help-font-family);
	font-size: var(--isjac-font-size-micro);
	line-height: var(--isjac-help-line-height);
	color: var(--isjac-color-muted);
}

/* ---------------------------------------------------------------------
 * 2. Cart page — the Gifting plugin re-renders its editable fields
 *    (checkbox + email + our auto-renew row) inside the narrow
 *    product-name cell. Let them span the cell, shrink type, and stop
 *    breaking row alignment.
 * ------------------------------------------------------------------- */

/* The cart table was rendering at a fixed 500px total (well short of its
 * container) with the name column squeezed to 158px — the width the
 * gift/auto-renew controls actually need to lay out in a single line per
 * row. Let the table use the full container width and hand the name
 * column the dominant share; the other columns keep their intrinsic
 * (content-driven) width. */
.woocommerce-cart-form table.cart {
	width: 100%;
	table-layout: auto;
}

.woocommerce-cart-form table.cart .product-name {
	width: auto;
}

/* The Price column duplicates Subtotal for these single-quantity
 * subscription rows and starves the name cell (161px measured) that the
 * gift controls live in. Hide it — the same column-dropping WooCommerce's
 * own responsive stylesheet applies — and give the freed width to the
 * product/gift cell. */
.woocommerce-cart-form table.cart th.product-price,
.woocommerce-cart-form table.cart td.product-price {
	display: none;
}

/* vertical-align:middle orphaned the remove-x and thumbnail mid-height
 * once the gift panel made the row tall. Top-align every cell so the
 * row reads as one aligned unit regardless of content height. Selector
 * quotes Woo's `.woocommerce table.shop_table td` (0-2-2) and adds the
 * cart class to outrank it. */
.woocommerce-cart-form table.cart.shop_table td {
	padding-right: var(--isjac-space-2);
	padding-left: var(--isjac-space-2);
	vertical-align: top;
}

.woocommerce-cart-form .product-name .wcsg_add_recipient_fields_container {
	margin-top: var(--isjac-space-3);
	padding: var(--isjac-space-3);
}

.woocommerce-cart-form .form-row > .isjac-gift-recipient-label,
.woocommerce-cart-form .form-row.isjac-gift-auto-renew-row > label {
	font-size: var(--isjac-font-size-small);
}

.woocommerce-cart-form .form-row.isjac-gift-auto-renew-row > label {
	line-height: var(--isjac-line-height-tight);
	flex-wrap: nowrap;
	white-space: normal;
}

.woocommerce-cart-form .isjac-gift-auto-renew-row {
	max-width: none;
}

/* Proceed to Checkout renders through the site's button system: the
 * child theme's cart/proceed-to-checkout-button.php template adds
 * `isjac-btn isjac-btn--primary` (which the theme's link rules already
 * exempt). This shim only neutralizes WooCommerce's own
 * `.woocommerce a.button.alt` bg/color (0-3-1 — outranks the
 * single-class button system); everything else defers to `.isjac-btn`. */
.woocommerce a.button.alt.isjac-btn--primary,
.woocommerce a.button.alt.isjac-btn--primary:visited {
	color: var(--isjac-button-primary-text);
	background: var(--isjac-button-primary-bg);
}

.woocommerce a.button.alt.isjac-btn--primary:hover,
.woocommerce a.button.alt.isjac-btn--primary:focus-visible {
	background: color-mix(in oklch, var(--isjac-button-primary-bg), var(--isjac-color-paper) var(--isjac-state-lift));
	color: var(--isjac-button-primary-text);
}

/* ---------------------------------------------------------------------
 * 3. Order-received page — bring default Woo markup to the site's
 *    typographic system: overview strip, order/subscription tables,
 *    billing address.
 * ------------------------------------------------------------------- */

.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: var(--isjac-space-4);
	margin: 0 0 var(--isjac-space-5);
	padding: var(--isjac-space-4);
	list-style: none;
	background: var(--isjac-surface-card);
	border: 1px solid var(--isjac-border-default);
	border-radius: var(--isjac-radius-md);
}

/* Mobile-first: each fact on its own row; share a row from 600px up
 * (auto basis wrapped unevenly at phone widths — order number alone,
 * date and total crushed together). */
.woocommerce-order-overview li {
	flex: 1 1 100%;
	font-size: var(--isjac-font-size-small);
	color: var(--isjac-text-muted);
}

@media (min-width: 600px) {
	.woocommerce-order-overview li {
		flex: 1 1 auto;
	}
}

.woocommerce-order-overview li strong {
	display: block;
	margin-top: var(--isjac-space-1);
	font-size: var(--isjac-font-size-base);
	font-weight: var(--isjac-font-weight-medium);
	color: var(--isjac-text-primary);
}

.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-order-received h2 {
	font-family: var(--isjac-h2-font-family);
	font-size: var(--isjac-h2-font-size);
	font-weight: var(--isjac-h2-font-weight);
	line-height: var(--isjac-h2-line-height);
	color: var(--isjac-h2-color);
	margin: var(--isjac-space-6) 0 var(--isjac-space-3);
}

.woocommerce-table.shop_table,
table.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--isjac-font-size-small);
}

.woocommerce-table.shop_table th,
.woocommerce-table.shop_table td,
table.woocommerce-orders-table th,
table.woocommerce-orders-table td {
	padding: var(--isjac-space-3) var(--isjac-space-4);
	border-bottom: 1px solid var(--isjac-border-default);
	text-align: left;
}

.woocommerce-table.shop_table tfoot th,
.woocommerce-table.shop_table tfoot td {
	font-weight: var(--isjac-font-weight-medium);
}

.woocommerce-customer-details address {
	font-style: normal;
	font-size: var(--isjac-font-size-small);
	line-height: var(--isjac-body-line-height);
	color: var(--isjac-text-muted);
}

.woocommerce-order-details a,
.woocommerce-customer-details a,
table.woocommerce-orders-table a {
	color: var(--isjac-link-color);
	text-decoration: var(--isjac-link-text-decoration);
}

.woocommerce-order-details a:hover,
.woocommerce-customer-details a:hover,
table.woocommerce-orders-table a:hover {
	color: var(--isjac-link-color-hover);
	text-decoration: underline;
}

table.woocommerce-orders-table .button.view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--isjac-button-min-height);
	padding: 0 var(--isjac-space-4);
	font-size: var(--isjac-font-size-small);
	font-weight: var(--isjac-font-weight-medium);
	color: var(--isjac-button-primary-text);
	background: var(--isjac-button-primary-bg);
	border-radius: var(--isjac-radius-md);
	text-decoration: none;
}

table.woocommerce-orders-table .button.view:hover,
table.woocommerce-orders-table .button.view:focus-visible {
	background: color-mix(in oklch, var(--isjac-button-primary-bg), var(--isjac-color-paper) var(--isjac-state-lift));
}