/* ============================================================================
 *  RahkarTheme — sizechart-panel.css
 *
 *  Reskins the Knowband "Product Size Chart" module (module `sizechart`) on the
 *  product page WITHOUT touching the module. The module ships a centered
 *  Fancybox popup with poor UX; sizechart-panel.js intercepts the trigger,
 *  moves the module's content (image + .chart-table) into the <dialog
 *  id="rh-sizechart"> built below, and opens it via window.RHSheet:
 *
 *    Desktop (≥901px): a full-height side drawer anchored to the physical LEFT,
 *                      sliding in from the left — same playbook as .rh-lightbox
 *                      (the product gallery viewer the user already likes).
 *    Mobile  (≤900px): a bottom sheet — same playbook as .rh-desc-modal.
 *
 *  Nothing here references module internals beyond the two stable selectors the
 *  module emits: #kbchart_preview_link (trigger) and the moved .chart-table.
 *  The module's own #kbchart_preview_modal stays hidden (it already ships
 *  display:none inline; JS empties it).
 * ========================================================================== */

/* ── Trigger ────────────────────────────────────────────────────────────────
 *  The trigger (#kbchart_preview_link inside .kbchart_link_display) is styled
 *  and relocated under the variants by the PRE-EXISTING integration in
 *  product-single-ps.css + rh-product.js (plain text link, no border/icon,
 *  hidden until placed to avoid a jump). We deliberately do NOT restyle it here
 *  to avoid a specificity tug-of-war — this file owns only the panel below. */

/* The module's original popup container is never used by us (its content is
 * moved into the panel) — keep it hidden even if a future module update drops
 * its inline display:none. */
#kbchart_preview_modal { display: none !important; }

/* ── The panel <dialog id="rh-sizechart"> ──────────────────────────────────
 *  RHSheet relocates the dialog to <body> on mobile, so (like .rh-desc-modal)
 *  redefine the design tokens locally — they must not rely on a .rh-product
 *  ancestor scope. */
.rh-sizechart {
	--rh-sc-fg:      var(--wp--preset--color--text, #1a1d23);
	--rh-sc-muted:   var(--wp--preset--color--text-muted, #5b6271);
	--rh-sc-bg:      var(--wp--preset--color--base, #fff);
	--rh-sc-surface: var(--wp--preset--color--surface, #f7f7f8);
	--rh-sc-border:  var(--wp--preset--color--border, #e2e4e9);
	--rh-sc-primary: var(--wp--preset--color--primary, #0a66c2);

	border: 0;
	padding: 0;
	color: var(--rh-sc-fg);
	background: var(--rh-sc-bg);
	box-shadow: 0 16px 40px rgba(15, 17, 21, 0.18);
	/* flex column so the header stays put and the body scrolls */
	flex-direction: column;
}
.rh-sizechart[open] { display: flex; }

.rh-sizechart::backdrop {
	background: rgba(15, 17, 21, 0.45);
	opacity: 0;
	transition:
		opacity 200ms ease-out,
		overlay 200ms allow-discrete,
		display 200ms allow-discrete;
}
.rh-sizechart[open]::backdrop { opacity: 1; }
@starting-style {
	.rh-sizechart[open]::backdrop { opacity: 0; }
}

/* Header / handle / close — mirrors .rh-desc-modal conventions. */
.rh-sizechart__handle { display: none; }
.rh-sizechart__header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--rh-sc-border);
}
.rh-sizechart__title {
	margin: 0;
	font-size: 16px;
	font-weight: var(--rh-fw-strong);
}
.rh-sizechart__close {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--rh-sc-fg);
	cursor: pointer;
	transition: background-color 120ms linear;
}
.rh-sizechart__close:hover,
.rh-sizechart__close:focus-visible {
	background: var(--rh-sc-surface);
	outline: none;
}
.rh-sizechart__close svg { width: 20px; height: 20px; display: block; }

.rh-sizechart__body {
	flex: 1 1 auto;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	padding: 18px;
}

/* ── Moved module content (image + table) restyled with theme tokens ─────── */
.rh-sizechart__body img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto 16px;
	border-radius: 12px;
}
.rh-sizechart__body p { margin: 0 0 12px; }
.rh-sizechart__body p:last-child { margin-bottom: 0; }

.rh-sizechart__body .chart-table {
	width: 100%;
	min-width: 420px;            /* allows horizontal scroll inside body */
	border-collapse: collapse;
	border: 1px solid var(--rh-sc-border);
	border-radius: 12px;
	overflow: hidden;
	font-size: 13px;
}
.rh-sizechart__body .chart-table td {
	padding: 10px 14px;
	text-align: center;
	border: 1px solid var(--rh-sc-border);
}
.rh-sizechart__body .chart-table thead td {
	background: var(--rh-sc-surface);
	color: var(--rh-sc-fg);
	font-weight: var(--rh-fw-strong);
	border-bottom: 2px solid var(--rh-sc-border);
}
/* Kill the module's grey filler column. */
.rh-sizechart__body .chart-table td.last-cell {
	display: none !important;
}
/* Keep the module's JS row-highlight, just retinted to the brand. */
.rh-sizechart__body .chart-table .vss-td-hovered {
	background: color-mix(in srgb, var(--rh-sc-primary) 16%, transparent) !important;
}
.rh-sizechart__body .chart-table .vss-td-hovered-neighbour {
	background: color-mix(in srgb, var(--rh-sc-primary) 7%, transparent) !important;
}

/* ── Desktop: side drawer anchored to physical LEFT, slides in from left.
 *  Native <dialog> with showModal() forces inset:0 + margin:auto centering;
 *  override with explicit physical anchoring + transform (verbatim playbook of
 *  .rh-lightbox). ─────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
	.rh-sizechart {
		width: min(560px, 46vw);
		min-width: 380px;
		height: 100vh;
		height: 100dvh;
		max-width: none;
		max-height: none;
		top: 0;
		bottom: 0;
		left: 0;
		right: auto;
		margin: 0;
		border-radius: 0;
		transform: translateX(-100%);
		transition:
			transform 280ms cubic-bezier(0.2, 0, 0, 1),
			overlay 280ms allow-discrete,
			display 280ms allow-discrete;
	}
	.rh-sizechart[open] { transform: translateX(0); }
	@starting-style {
		.rh-sizechart[open] { transform: translateX(-100%); }
	}
}

/* ── Mobile: bottom sheet (verbatim playbook of .rh-desc-modal). ─────────── */
@media (max-width: 900px) {
	.rh-sizechart {
		position: fixed !important;
		/* The shared .rh-sheet-backdrop is z-index:999 and (because this dialog
		 * is appended to <body> at init, BEFORE the backdrop exists) it paints
		 * ABOVE the dialog in DOM order. Lift the sheet above the dim so it's
		 * visible on mobile (desktop uses showModal()/top-layer, unaffected). */
		z-index: 1000;
		width: 100%;
		max-width: none;
		inset: auto 0 0 0 !important;
		margin: 0;
		border-radius: 16px 16px 0 0;
		min-height: 40vh;
		max-height: 88vh;
		transform: translateY(100%);
		transition:
			transform 240ms cubic-bezier(0.2, 0, 0, 1),
			overlay 240ms allow-discrete,
			display 240ms allow-discrete;
	}
	.rh-sizechart[open] { transform: translateY(0); }
	@starting-style {
		.rh-sizechart[open] { transform: translateY(100%); }
	}
	.rh-sizechart__close { display: none; }
	.rh-sizechart__handle {
		display: block;
		width: 36px;
		height: 4px;
		border-radius: 2px;
		background: var(--rh-sc-border);
		margin: 8px auto 0;
		flex: 0 0 auto;
	}
	.rh-sizechart__header { padding: 8px 18px 12px; }
	.rh-sizechart__body {
		padding-bottom: max(env(safe-area-inset-bottom, 0), 18px);
	}
}