/**
 * AmzKit Dynamic Comparison Table stylesheet — "AAWP-style Comparison Table".
 *
 * Styles the table rendered by inc/Frontend/Views/product-box-table-dynamic.php
 * for tables built with the admin Table Builder (`[amzkit_table id="X"]`).
 *
 * -------------------------------------------------------------------------
 * WHY THIS IS A REAL <table> NOW (read before reaching for CSS Grid again):
 *
 * The previous version used a CSS Grid with `display: contents` rows to
 * fake a table. Two real, independent bugs came out of that:
 *
 *   1. "Label column rendered on the right." Grid track order is defined
 *      relative to the page's writing direction. Any ancestor with
 *      `direction: rtl` — easy to inherit unintentionally from a theme or
 *      another plugin, even on an English-language page — flips which
 *      edge the *first* explicit track renders against. The label column
 *      was always first in the DOM and first in `grid-template-columns`;
 *      under `direction: rtl` it rendered at the right edge anyway,
 *      because that's what "first track" means in RTL. A `<table>` has no
 *      equivalent failure mode: the first `<td>`/`<th>` in a `<tr>` is
 *      always that row's leftmost rendered cell in LTR layout, full stop.
 *   2. "Columns squeezed to unreadable slivers, text wrapping
 *      letter-by-letter." The product columns were `minmax(0, 1fr)` — a
 *      zero-width floor, added specifically so the grid could shrink
 *      instead of overflowing its container (see older git history). On a
 *      narrow container with several products, "shrink toward zero" is
 *      exactly what happened: no lower bound meant no floor, so a CTA
 *      button's text ("Buy on Amazon") had only a few px of column to sit
 *      in and broke mid-word, sometimes mid-letter.
 *
 * `table-layout: fixed` on a real `<table>` fixes both at the root: column
 * order is simply DOM order (no writing-direction indirection), and once
 * the label column's width is fixed (see `.amzkit-matrix__col--label`
 * below), every remaining column divides the rest of the table width
 * *equally* — there's no `fr`/`minmax()` floor to reason about, and no way
 * for a column to collapse toward zero on its own. `<colgroup>` sets the
 * label column's width explicitly; every other `<col>` is left unset on
 * purpose, which is what tells `table-layout: fixed` to split the leftover
 * width evenly across them.
 * ------------------------------------------------------------------ */

.amzkit-matrix-outer {
	--amzkit-matrix-radius: 10px;
	--amzkit-matrix-accent: #4f46e5;
	--amzkit-matrix-accent-soft: #eef2ff;
	--amzkit-matrix-card-bg: #ffffff;
	--amzkit-matrix-label-bg: #f8fafc;
	--amzkit-matrix-border: #e2e8f0;
	--amzkit-matrix-text: #0f172a;
	--amzkit-matrix-text-muted: #64748b;
	--amzkit-matrix-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);

	/* Per-table overridable colors (Table Settings color pickers — see
	   inc/Admin/Views/table-builder-meta.php + TableBuilder::sanitize_table_settings()).
	   Every one of these is set inline, per table instance, in
	   product-box-table-dynamic.php ONLY when the admin actually chose a
	   custom color; the fallback here is what every table already looked
	   like before this setting existed, so an untouched table renders
	   byte-for-byte the same as before. */
	--amzkit-matrix-header-bg: #fbfcfe;
	/* --amzkit-matrix-badge-bg is intentionally NOT defaulted here — it is
	   only ever set inline when an admin picks a custom Highlight Badge
	   Background, and every rule that reads it below supplies its own
	   var(--amzkit-matrix-badge-bg, <original-fallback>) so the badge looks
	   exactly as it always did when no custom color is chosen. */

	margin: 0 0 1.5em;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--amzkit-matrix-text);
}

/* ---------------------------------------------------------------------
 * Scroll wrapper. `table-layout: fixed` keeps the *table* from ever
 * overflowing its own declared width, but it does NOT put a floor under
 * each product column — with no min-width anywhere, a narrow desktop
 * container (a sidebar, a narrow theme content column, 4+ products) is
 * exactly as free to squeeze columns to unreadable slivers as the old
 * CSS Grid version was, just without the RTL/zero-floor bugs described
 * above. The fix is a genuine floor: `--amzkit-matrix-cols` (set inline
 * per table instance in product-box-table-dynamic.php) drives a
 * min-width on `.amzkit-matrix__table` below of 200px per product column
 * plus the fixed label column, on ALL screen sizes — not just mobile.
 * `overflow-x: auto` here is what lets that floor actually take effect:
 * once the table's min-width exceeds the container, the *wrapper*
 * scrolls instead of the browser re-squeezing the columns to fit.
 * ------------------------------------------------------------------ */

.amzkit-matrix-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	border: 1px solid var(--amzkit-matrix-border);
	border-radius: var(--amzkit-matrix-radius);
	box-shadow: var(--amzkit-matrix-shadow);
	background: var(--amzkit-matrix-card-bg);

	/* Firefox */
	scrollbar-width: thin;
	scrollbar-color: #d7dbe3 transparent;
}

.amzkit-matrix-wrap::-webkit-scrollbar {
	height: 8px;
}

.amzkit-matrix-wrap::-webkit-scrollbar-track {
	background: transparent;
}

.amzkit-matrix-wrap::-webkit-scrollbar-thumb {
	background-color: #d7dbe3;
	border-radius: 999px;
}

.amzkit-matrix-wrap::-webkit-scrollbar-thumb:hover {
	background-color: #b7bdc9;
}

/* ---------------------------------------------------------------------
 * Table root.
 * ------------------------------------------------------------------ */

.amzkit-matrix__table {
	width: 100%;
	/* Real per-column floor: label column (180px) + 200px per product
	   column. `--amzkit-matrix-cols` is set inline on `.amzkit-matrix-outer`
	   per table instance; `4` is only a fallback for markup rendered
	   before this change (cached pages, etc.) and is never used once the
	   inline custom property is present. */
	min-width: calc(180px + (var(--amzkit-matrix-cols, 4) * 200px));
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.5;
}

.amzkit-matrix__table,
.amzkit-matrix__table *,
.amzkit-matrix__table *::before,
.amzkit-matrix__table *::after {
	box-sizing: border-box;
}

/* Label column: the ONLY column with an explicit width. Every other
   <col> below is intentionally left bare — with table-layout: fixed,
   that's what makes the browser divide the remaining width equally
   across all product columns, no matter how many there are. */
.amzkit-matrix__col--label {
	width: 180px;
}

/* ---------------------------------------------------------------------
 * Shared cell base (label cells + data cells).
 * ------------------------------------------------------------------ */

.amzkit-matrix__label-cell,
.amzkit-matrix__cell,
.amzkit-matrix__col-header {
	/* Tighter cell padding (was 14px 16px) so product columns sit closer
	   together and more content fits without widening the table. */
	padding: 10px 8px;
	border-bottom: 1px solid var(--amzkit-matrix-border);
	text-align: center;
	vertical-align: middle;
}

.amzkit-matrix__row--last .amzkit-matrix__label-cell,
.amzkit-matrix__row--last .amzkit-matrix__cell {
	border-bottom: none;
}

.amzkit-matrix__row:hover .amzkit-matrix__cell:not(.is-highlighted) {
	background: rgba(15, 23, 42, 0.03);
}

/* ---------------------------------------------------------------------
 * Label column — fixed width, left-aligned, muted background. Sticky so
 * it stays in view while a tall/many-column table scrolls horizontally
 * on mobile; harmless (and simply inert) on desktop where the table
 * never needs to scroll in the first place.
 * ------------------------------------------------------------------ */

.amzkit-matrix__label-cell {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--amzkit-matrix-label-bg);
	border-right: 1px solid var(--amzkit-matrix-border);
	text-align: left;
	font-weight: 600;
	font-size: 13px;
	color: #334155;
}

.amzkit-matrix__label-text {
	display: block;
	word-break: break-word;
	overflow-wrap: break-word;
}

.amzkit-matrix__label-cell--corner {
	background: var(--amzkit-matrix-label-bg);
}

/* ---------------------------------------------------------------------
 * Header row.
 * ------------------------------------------------------------------ */

.amzkit-matrix__col-header {
	position: relative;
	background: var(--amzkit-matrix-header-bg, #fbfcfe);
	font-weight: 600;
}

.amzkit-matrix__col-header.is-highlighted,
td.amzkit-matrix__cell.is-highlighted {
	background: var(--amzkit-matrix-accent-soft);
}

.amzkit-matrix__col-header.is-highlighted {
	box-shadow: inset 2px 0 0 var(--amzkit-matrix-accent), inset -2px 0 0 var(--amzkit-matrix-accent);
}

td.amzkit-matrix__cell.is-highlighted {
	box-shadow: inset 2px 0 0 var(--amzkit-matrix-accent), inset -2px 0 0 var(--amzkit-matrix-accent);
}

.amzkit-matrix__row--last td.amzkit-matrix__cell.is-highlighted {
	box-shadow: inset 2px 0 0 var(--amzkit-matrix-accent), inset -2px 0 0 var(--amzkit-matrix-accent), inset 0 -2px 0 var(--amzkit-matrix-accent);
}

/* ---------------------------------------------------------------------
 * Featured / badge header bars — AAWP-style: full-width colored strips
 * that sit flush across the top of a product column's header cell, not
 * a small floating pill. `.amzkit-matrix__col-header` normally carries
 * 14px/16px padding (shared rule above); a header that has a ribbon
 * drops that padding to 0 on top/sides so the bar can bleed edge-to-edge
 * to the column's own borders, then supplies its own internal padding.
 * `--accent` (indigo) is the built-in "Top Rated" bar tied to the
 * table's `highlighted_asin`; `--custom` (green) is whatever text an
 * admin puts in a "badge" row (e.g. "Best Price"), promoted per-column
 * from the table body into the header in product-box-table-dynamic.php.
 * Both can stack on the same column if it's both highlighted AND has
 * badge text.
 * ------------------------------------------------------------------ */

.amzkit-matrix__col-header.is-highlighted,
.amzkit-matrix__col-header.has-badge {
	padding: 0 0 10px;
}

.amzkit-matrix__badge-ribbon {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	margin: 0 0 8px;
	padding: 9px 10px;
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: normal;
	overflow-wrap: break-word;
	box-sizing: border-box;
}

.amzkit-matrix__badge-ribbon--accent {
	background: linear-gradient(135deg, #6366f1, var(--amzkit-matrix-accent));
}

.amzkit-matrix__badge-ribbon--custom {
	background: var(--amzkit-matrix-badge-bg, linear-gradient(135deg, #10b981, #059669));
}

.amzkit-matrix__badge-ribbon:last-child {
	margin-bottom: 0;
}

.amzkit-matrix__badge-ribbon svg {
	width: 11px;
	height: 11px;
	fill: currentColor;
	flex-shrink: 0;
}

/* ---------------------------------------------------------------------
 * Row-type specific cell content.
 * ------------------------------------------------------------------ */

.amzkit-matrix__image-frame {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 110px;
	margin: 0 auto;
	overflow: hidden;
}

.amzkit-matrix__image {
	display: block;
	max-width: 100%;
	max-height: 110px;
	object-fit: contain;
	margin: 0 auto;
}

.amzkit-matrix__title-link {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; /* CSS-level backstop; PHP also hard-trims via the per-row "Max Title Length" setting */
	overflow: hidden;
	max-height: calc(1.4em * 3);
	color: var(--amzkit-matrix-text);
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	text-align: center;
	word-break: break-word;
	overflow-wrap: break-word;
}

.amzkit-matrix__title-link:hover {
	color: var(--amzkit-matrix-accent);
	text-decoration: underline;
}

.amzkit-matrix__price {
	display: block;
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--amzkit-matrix-text);
}

.amzkit-matrix__price-list {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--amzkit-matrix-text-muted);
	text-decoration: line-through;
}

.amzkit-matrix__discount-badge {
	display: inline-block;
	margin-top: 4px;
	padding: 2px 8px;
	background: #fef2f2;
	color: #b91c1c;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	white-space: nowrap;
}

/* Clean horizontal pill — nowrap by design, as a plain badge is always
   short admin-authored text, not something that needs to wrap. */
.amzkit-matrix__badge {
	display: inline-block;
	padding: 4px 12px;
	background: var(--amzkit-matrix-badge-bg, #fffbeb);
	color: #92400e;
	border: 1px solid #fde68a;
	font-size: 11.5px;
	font-weight: 600;
	border-radius: 999px;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------
 * CTA button — solid pill, single line by design (an AAWP-style "Buy on
 * Amazon" button reads worse broken across lines than it does slightly
 * condensed). `overflow`/`text-overflow` are a safety net only, for the
 * rare column that ends up narrower than the label text — the column
 * itself is never allowed to collapse in the first place (see the
 * table-layout: fixed note at the top of this file), so this should not
 * normally engage.
 * ------------------------------------------------------------------ */

.amzkit-matrix__button {
	--amzkit-button-color: #ff6200;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: 100%;
	max-width: 180px;
	margin: 0 auto;
	padding: 10px 14px;
	background: var(--amzkit-button-color);
	background: linear-gradient(135deg, var(--amzkit-button-color), color-mix(in srgb, var(--amzkit-button-color) 65%, black));
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--amzkit-button-color) 60%, transparent);
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.amzkit-matrix__button-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.amzkit-matrix__button svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	flex-shrink: 0;
}

.amzkit-matrix__button:hover {
	filter: brightness(1.06);
	box-shadow: 0 10px 22px -4px color-mix(in srgb, var(--amzkit-button-color) 70%, transparent);
	transform: translateY(-2px);
}

.amzkit-matrix__button:active {
	transform: translateY(0);
	filter: brightness(0.96);
}

.amzkit-matrix__text {
	text-align: left;
	font-size: 12.5px;
	line-height: 1.5;
	color: #475569;
	word-break: break-word;
	overflow-wrap: break-word;
}

.amzkit-matrix__text p:first-child {
	margin-top: 0;
}

.amzkit-matrix__text p:last-child {
	margin-bottom: 0;
}

.amzkit-matrix__row--text .amzkit-matrix__cell {
	text-align: left;
}

.amzkit-matrix__cell-empty {
	color: #cbd5e1;
}

/* ---------------------------------------------------------------------
 * Responsive. Desktop/tablet (above) is scroll-free by construction —
 * table-layout: fixed always keeps the table at width: 100%. Below
 * 768px, the table gets a standard min-width and the wrapper scrolls
 * horizontally instead of squeezing columns down further.
 * ------------------------------------------------------------------ */

@media (max-width: 768px) {
	/* min-width now comes from the unconditional, column-count-aware rule
	   above on all screen sizes — nothing extra needed here. Just shrink
	   the label column a bit to leave more room for product columns. */
	.amzkit-matrix__col--label {
		width: 130px;
	}
}

@media (max-width: 480px) {
	.amzkit-matrix__table {
		font-size: 12.5px;
	}

	.amzkit-matrix__col--label {
		width: 110px;
	}

	.amzkit-matrix__label-cell,
	.amzkit-matrix__cell,
	.amzkit-matrix__col-header {
		padding: 8px 6px;
	}

	.amzkit-matrix__image-frame {
		height: 90px;
	}

	.amzkit-matrix__image {
		max-height: 90px;
	}

	.amzkit-matrix__title-link {
		-webkit-line-clamp: 2;
		max-height: calc(1.4em * 2);
	}

	.amzkit-matrix__button {
		padding: 8px 12px;
		font-size: 12px;
	}

	.amzkit-matrix__badge-ribbon {
		font-size: 10px;
		padding: 4px 10px;
	}
}