/**
 * JetCopy product tabs — mirrors the homepage jc-feature-tabs component, but on
 * a white page: the frame is drawn with the kit's global Border colour so the
 * shape reads, and inactive tabs use the regular text colour.
 *
 * Two layouts:
 *   attached  – folder tabs whose active tab merges into the panel below.
 *   detached  – the rail can't fit one row, so tabs wrap into separate pills
 *               ("blobs") and the panel becomes its own rounded box. Toggled by
 *               JS overflow measurement (see product-tabs.js), not a hard
 *               breakpoint, so it holds regardless of tab label lengths.
 */

.jc-ptabs {
	--jc-pt-border: var(--e-global-color-1fd232b, #eeeeee);
	--jc-pt-radius: 14px;
	/* Size of the active tab's corner join. Also the rail's trailing pad, and
	   read by product-tabs.js when deciding to detach. Single source of truth. */
	--jc-pt-join: 14px;
	--jc-pt-tab-color: var(--e-global-color-text, #4f4f4f);
	--jc-pt-tab-hover-color: var(--e-global-color-primary, #c4161f);
	--jc-pt-tab-active-color: var(--e-global-color-primary, #c4161f);
	--jc-pt-tab-active-bg: #fff;
	--jc-pt-panel-bg: #fff;

	inline-size: 100%;
}

/* ---------------- rail ---------------- */

.jc-ptabs__rail {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 0.25rem;
	/* No leading pad: the first tab sits flush with the frame's edge, so its
	   outer border continues the panel's and needs no corner join there.
	   The trailing pad must equal the join width (--jc-pt-join): when the rail
	   fills up, the last tab lands on the content edge and its join spans
	   exactly that padding, landing on the panel's edge. Any less and the join
	   overshoots the frame. */
	padding-inline-start: 0;
	padding-inline-end: var(--jc-pt-join);
	/* Let the active tab's corner joins spill outside the rail. */
	overflow: visible;
}

/* ---------------- tabs ---------------- */

.jc-ptabs__tab {
	position: relative;
	z-index: 2;
	/* Never shrink: the labels must keep their natural width so the detach
	   measurement in product-tabs.js is meaningful. */
	flex: 0 0 auto;
	margin: 0;
	padding: 0.6rem 1.15rem;
	appearance: none;
	background: transparent;
	border: 1px solid transparent;
	border-block-end: 0;
	border-start-start-radius: var(--jc-pt-radius);
	border-start-end-radius: var(--jc-pt-radius);
	color: var(--jc-pt-tab-color);
	font: inherit;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s ease;
}

/* Themes style bare `button:hover` (this one paints a magenta fill at (0,1,1)).
   Neutralise it at (0,3,0) so it can't bleed through, and let the states below
   own the look. */
.jc-ptabs .jc-ptabs__tab,
.jc-ptabs .jc-ptabs__tab:hover,
.jc-ptabs .jc-ptabs__tab:focus,
.jc-ptabs .jc-ptabs__tab:active {
	background: transparent;
	background-color: transparent;
	box-shadow: none;
	text-shadow: none;
}

/* Hover mirrors the homepage component: no fill, just the frame outline. */
.jc-ptabs .jc-ptabs__tab:hover {
	border-color: var(--jc-pt-border);
	color: var(--jc-pt-tab-hover-color);
}

.jc-ptabs__tab:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.jc-ptabs .jc-ptabs__tab.is-active,
.jc-ptabs .jc-ptabs__tab.is-active:hover,
.jc-ptabs .jc-ptabs__tab.is-active:focus {
	background: var(--jc-pt-tab-active-bg);
	background-color: var(--jc-pt-tab-active-bg);
	border-color: var(--jc-pt-border);
	color: var(--jc-pt-tab-active-color);
	font-weight: 600;
}

/* Curved joins that fair the active tab into the panel, as on the homepage.
   These MUST use physical left/right: the radial-gradients are physical
   (circle at 100% 0 / 0 0), so pairing them with logical inset-inline-*
   mirrors the box in RTL and the curve ends up on the wrong side. */
.jc-ptabs__tab.is-active::before,
.jc-ptabs__tab.is-active::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 14px;
	height: 14px;
	pointer-events: none;
}

/* right-hand join */
.jc-ptabs__tab.is-active::before {
	right: -14px;
	background:
		radial-gradient(circle at 100% 0, transparent 13px, var(--jc-pt-border) 13px, var(--jc-pt-border) 14px, transparent 14px),
		radial-gradient(circle at 100% 0, transparent 14px, var(--jc-pt-tab-active-bg) 14px);
}

/* left-hand join */
.jc-ptabs__tab.is-active::after {
	left: -14px;
	background:
		radial-gradient(circle at 0 0, transparent 13px, var(--jc-pt-border) 13px, var(--jc-pt-border) 14px, transparent 14px),
		radial-gradient(circle at 0 0, transparent 14px, var(--jc-pt-tab-active-bg) 14px);
}

/* The first tab is flush with the frame's leading edge (right in RTL), so there
   is no panel to fair into on that side. Drop that join and square the panel
   corner underneath it so the tab's own rounded corner is the outer one. */
.jc-ptabs__rail > .jc-ptabs__tab:first-child.is-active::before {
	display: none;
}

.jc-ptabs:has(.jc-ptabs__tab:first-child.is-active) .jc-ptabs__panel {
	border-start-start-radius: 0;
}

/* ---------------- panel ---------------- */

.jc-ptabs__panel {
	position: relative;
	z-index: 1;
	/* Tuck the panel's top border under the active tab's body. */
	margin-block-start: -1px;
	padding: 2rem;
	border: 1px solid var(--jc-pt-border);
	border-radius: var(--jc-pt-radius);
	background: var(--jc-pt-panel-bg);
}

.jc-ptabs__panel[hidden] {
	display: none;
}

.jc-ptabs__panel > :first-child {
	margin-block-start: 0;
}

.jc-ptabs__panel > :last-child {
	margin-block-end: 0;
}

/* WooCommerce prints an h2 in some panels; the tab already names it. */
.jc-ptabs__panel > h2 {
	display: none;
}

/* ---------------- panel copy ----------------
   The יתרונות / למי זה מתאים tabs are bullet lists; render them as brand
   checkmarks. Lives here (not in Customizer) so it can't drift out of scope
   when the markup changes. */

.jc-ptabs__panel ul {
	list-style: none;
	padding-inline-start: 0;
	margin-inline-start: 0;
}

.jc-ptabs__panel ul li {
	position: relative;
	padding-inline-start: 1.7em;
	margin-block-end: 0.55em;
	text-wrap: pretty;
}

.jc-ptabs__panel ul li:last-child {
	margin-block-end: 0;
}

/* Each benefit leads with a bold headline sentence. The UA default is
   `strong { font-weight: bolder }`, which resolves RELATIVE to the parent: the
   panel body is 300, and bolder-than-300 is 400, not 700. Noto Sans Hebrew only
   ships 300/600/700 here, so 400 falls back to 300 and the lead-in renders
   identically to the body text. Pin an explicit weight that is actually loaded. */
.jc-ptabs__panel strong,
.jc-ptabs__panel b {
	font-weight: 600;
}

.jc-ptabs__panel ul li::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	color: var(--jc-pt-check, var(--e-global-color-primary, #c4161f));
	font-weight: 700;
	line-height: inherit;
}

/* The spec table brings its own layout; leave its lists alone. */
.jc-ptabs__panel table ul {
	list-style: initial;
}

/* ---------------- spec table (מפרט טכני) ----------------
   WooCommerce ships `.shop_attributes td { padding: 0; font-style: italic }`,
   which leaves values crammed against the label column and italicised. Match
   the th's padding and drop the italics. The value's inner <p> carries the
   vertical padding, so it has to be reset too or the cell double-pads. */

.jc-ptabs__panel table.shop_attributes th,
.jc-ptabs__panel table.shop_attributes td {
	padding: 8px 12px;
	font-style: normal;
	text-align: right;
	vertical-align: middle;
}

.jc-ptabs__panel table.shop_attributes td,
.jc-ptabs__panel table.shop_attributes td p {
	font-style: normal;
}

.jc-ptabs__panel table.shop_attributes td p {
	margin: 0;
	padding: 0;
}

/* ---------------- detached (blobs) ---------------- */

.jc-ptabs--detached .jc-ptabs__rail {
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	padding-inline: 0;
}

.jc-ptabs--detached .jc-ptabs__tab {
	border: 1px solid var(--jc-pt-border);
	border-radius: var(--jc-pt-radius);
	padding: 0.5rem 0.9rem;
	white-space: normal;
}

/* Also matched with :hover so it outranks the generic hover rule above. */
.jc-ptabs--detached .jc-ptabs__tab.is-active,
.jc-ptabs--detached .jc-ptabs__tab.is-active:hover {
	border-color: var(--jc-pt-tab-active-color);
}

/* No tab to fair into once they're separate pills. */
.jc-ptabs--detached .jc-ptabs__tab.is-active::before,
.jc-ptabs--detached .jc-ptabs__tab.is-active::after {
	display: none;
}

.jc-ptabs--detached .jc-ptabs__panel {
	margin-block-start: 0.8rem;
	border-radius: var(--jc-pt-radius);
}

@media (prefers-reduced-motion: reduce) {
	.jc-ptabs__tab {
		transition: none;
	}
}