/**
 * Jaws Tabs — frontend styles (recster-child)
 *
 * Structure (see class-jaws-tabs.php::render):
 *   .jaws-tabs[data-ind-axis][data-ind-from]
 *     .jaws-tabs-heading[role=tablist]
 *       button.jaws-tab-title > .jaws-tab-icon + .jaws-tab-label
 *     .jaws-tabs-content
 *       [role=tabpanel].e-con | .jaws-tab-panel   (active one gets .jaws-active)
 *
 * Three visual states: Normal (base), Hover (non-active tab hovered), Active
 * (aria-selected="true"). Every colour is a CSS variable with a light default;
 * body.dark-mode re-points the neutral vars so tabs invert with no extra JS.
 * The red accent (var(--primary-color)) stays in both modes.
 */

.jaws-tabs {
	--jaws-primary: var(--primary-color, #e9021e);
	--jaws-columns: 4;
	--jaws-gap: 0px;
	--jaws-content-gap: 0px;

	--jaws-icon-size: 34px;
	--jaws-icon-box: 84px;
	--jaws-icon-radius: 50%;

	--jaws-indicator-size: 3px;
	--jaws-transition: 0.4s;
	--jaws-anim-duration: 0.4s;
	--jaws-title-dir: column;

	/* light-mode neutral palette (controls + dark-mode override these) */
	--jaws-cell-bg: #ffffff;
	--jaws-cell-bg-hover: #efefef;
	--jaws-cell-bg-active: #efefef;
	--jaws-cell-border: #e8e8e8;
	--jaws-cell-border-hover: var(--jaws-cell-border);
	--jaws-cell-border-active: var(--jaws-cell-border);
	--jaws-cell-border-width: 1px;

	--jaws-icon-color: #b9b9b9;
	--jaws-icon-color-hover: #ffffff;
	--jaws-icon-color-active: #ffffff;
	--jaws-icon-circle-bg: transparent;
	--jaws-icon-circle-border: #e0e0e0;
	--jaws-icon-bg-hover: var(--jaws-primary);
	--jaws-icon-bg-active: var(--jaws-primary);
	--jaws-icon-border-hover: var(--jaws-icon-bg-hover);
	--jaws-icon-border-active: var(--jaws-icon-bg-active);

	--jaws-title-color: #1a1a1a;
	--jaws-title-color-hover: #1a1a1a;
	--jaws-title-color-active: #1a1a1a;

	--jaws-content-bg: transparent;

	display: block;
}

/* ---------------------------------------------------------------- Heading */

.jaws-tabs-heading {
	display: grid;
	grid-template-columns: repeat(var(--jaws-columns), minmax(0, 1fr));
	gap: var(--jaws-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Wrapper-prefixed + !important on layout props so theme/Case-Addons button
   rules can't flatten the icon-over-label stack. Direction is a variable so the
   "stacked" variant can flip it to a row without losing specificity. */
.elementor-widget-jaws-tabs .jaws-tab-title {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	font: inherit;
	cursor: pointer;
	text-align: center;
	width: 100%;

	position: relative;
	overflow: hidden;
	display: flex !important;
	flex-direction: var(--jaws-title-dir, column) !important;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 34px 20px;

	background: var(--jaws-cell-bg);
	border: var(--jaws-cell-border-width) solid var(--jaws-cell-border);
	color: var(--jaws-title-color);
	transition: background var(--jaws-transition) ease, color var(--jaws-transition) ease,
		border-color var(--jaws-transition) ease, box-shadow var(--jaws-transition) ease;
}

.elementor-widget-jaws-tabs .jaws-tab-title:focus-visible {
	outline: 2px solid var(--jaws-primary);
	outline-offset: -2px;
}

/* Colour "fill" curtain that sweeps in behind icon/label on hover + active. */
.jaws-tab-title::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--jaws-cell-bg-hover);
	transform: translateY(-100%);
	transition: transform var(--jaws-transition) ease, background var(--jaws-transition) ease;
	z-index: 0;
}

/* The animated indicator line. Axis (h|v) + draw origin (from) come from the
   Start/End position controls via data attributes on .jaws-tabs. */
.jaws-tab-title::after {
	content: "";
	position: absolute;
	background: var(--jaws-primary);
	z-index: 2;
	transition: transform var(--jaws-transition) ease;
	pointer-events: none;
}

.jaws-tabs[data-ind-axis="h"] .jaws-tab-title::after {
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--jaws-indicator-size);
	transform: scaleX(0);
}
.jaws-tabs[data-ind-axis="h"][data-ind-from="left"] .jaws-tab-title::after { transform-origin: left center; }
.jaws-tabs[data-ind-axis="h"][data-ind-from="right"] .jaws-tab-title::after { transform-origin: right center; }

.jaws-tabs[data-ind-axis="v"] .jaws-tab-title::after {
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--jaws-indicator-size);
	transform: scaleY(0);
}
.jaws-tabs[data-ind-axis="v"][data-ind-from="top"] .jaws-tab-title::after { transform-origin: center top; }
.jaws-tabs[data-ind-axis="v"][data-ind-from="bottom"] .jaws-tab-title::after { transform-origin: center bottom; }

.jaws-tabs[data-ind-axis="none"] .jaws-tab-title::after { display: none; }

/* keep label + icon above the curtain */
.jaws-tab-icon,
.jaws-tab-label {
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------- Icon */

.jaws-tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: var(--jaws-icon-box);
	height: var(--jaws-icon-box);
	border-radius: var(--jaws-icon-radius);
	background: var(--jaws-icon-circle-bg);
	border: 2px solid var(--jaws-icon-circle-border);
	color: var(--jaws-icon-color);
	transition: background var(--jaws-transition) ease, border-color var(--jaws-transition) ease,
		color var(--jaws-transition) ease, transform var(--jaws-transition) ease;
}

.jaws-tab-icon i,
.jaws-tab-icon svg {
	width: var(--jaws-icon-size);
	height: var(--jaws-icon-size);
	font-size: var(--jaws-icon-size);
	line-height: 1;
	color: inherit;
	fill: currentColor;
	transition: color var(--jaws-transition) ease, fill var(--jaws-transition) ease;
}

/* "greyscale -> full colour": glyph/SVG via colour above; raster img via filter */
.jaws-tab-icon img {
	width: var(--jaws-icon-size);
	height: var(--jaws-icon-size);
	object-fit: contain;
	filter: grayscale(1);
	transition: filter var(--jaws-transition) ease;
}

/* ---------------------------------------------------------------- Label */

.jaws-tab-label {
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.3;
	color: var(--jaws-title-color);
	transition: color var(--jaws-transition) ease;
}

/* ----------------------------------------------------------- Hover state */
/* hover applies only to NON-active tabs on pointer devices */
@media (hover: hover) {
	.jaws-tab-title:not([aria-selected="true"]):hover {
		color: var(--jaws-title-color-hover);
		border-color: var(--jaws-cell-border-hover);
	}
	.jaws-tab-title:not([aria-selected="true"]):hover::before {
		background: var(--jaws-cell-bg-hover);
		transform: translateY(0);
	}
	.jaws-tabs[data-ind-axis="h"] .jaws-tab-title:not([aria-selected="true"]):hover::after { transform: scaleX(1); }
	.jaws-tabs[data-ind-axis="v"] .jaws-tab-title:not([aria-selected="true"]):hover::after { transform: scaleY(1); }
	.jaws-tab-title:not([aria-selected="true"]):hover .jaws-tab-icon {
		background: var(--jaws-icon-bg-hover);
		border-color: var(--jaws-icon-border-hover);
		color: var(--jaws-icon-color-hover);
	}
	.jaws-tab-title:not([aria-selected="true"]):hover .jaws-tab-icon img { filter: grayscale(0); }
	.jaws-tab-title:not([aria-selected="true"]):hover .jaws-tab-label { color: var(--jaws-title-color-hover); }
}

/* ---------------------------------------------------------- Active state */

.jaws-tab-title[aria-selected="true"] {
	color: var(--jaws-title-color-active);
	border-color: var(--jaws-cell-border-active);
}
.jaws-tab-title[aria-selected="true"]::before {
	background: var(--jaws-cell-bg-active);
	transform: translateY(0);
}
.jaws-tabs[data-ind-axis="h"] .jaws-tab-title[aria-selected="true"]::after { transform: scaleX(1); }
.jaws-tabs[data-ind-axis="v"] .jaws-tab-title[aria-selected="true"]::after { transform: scaleY(1); }
.jaws-tab-title[aria-selected="true"] .jaws-tab-icon {
	background: var(--jaws-icon-bg-active);
	border-color: var(--jaws-icon-border-active);
	color: var(--jaws-icon-color-active);
}
.jaws-tab-title[aria-selected="true"] .jaws-tab-icon img { filter: grayscale(0); }
.jaws-tab-title[aria-selected="true"] .jaws-tab-label { color: var(--jaws-title-color-active); }

/* ---------------------------------------------------------------- Content */

.jaws-tabs-content {
	margin-top: var(--jaws-content-gap);
	background: var(--jaws-content-bg);
}

.jaws-tabs-content > [role="tabpanel"]:not(.jaws-active) {
	display: none;
}

.jaws-tab-panel {
	display: block;
}

.jaws-tab-panel__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	opacity: 0.6;
}

/* ------------------------------------------------- Content reveal anims */

.jaws-tabs[data-anim="fade"] > .jaws-tabs-content > .jaws-active { animation: jawsFade var(--jaws-anim-duration) ease both; }
.jaws-tabs[data-anim="slide-up"] > .jaws-tabs-content > .jaws-active { animation: jawsSlideUp var(--jaws-anim-duration) ease both; }
.jaws-tabs[data-anim="slide-down"] > .jaws-tabs-content > .jaws-active { animation: jawsSlideDown var(--jaws-anim-duration) ease both; }
.jaws-tabs[data-anim="zoom"] > .jaws-tabs-content > .jaws-active { animation: jawsZoom var(--jaws-anim-duration) ease both; }

@keyframes jawsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes jawsSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes jawsSlideDown { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes jawsZoom { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
	.jaws-tab-title,
	.jaws-tab-title::before,
	.jaws-tab-title::after,
	.jaws-tab-icon,
	.jaws-tab-icon img,
	.jaws-tabs-content > .jaws-active {
		transition-duration: 0.001s !important;
		animation-duration: 0.001s !important;
	}
}

/* ---------------------------------------------------------------- Variants */

/* framed — discrete rounded cards with a gap + shadow */
.jaws-tabs--framed .jaws-tab-title { border-radius: 6px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06); }
.jaws-tabs--framed .jaws-tabs-content { border: 1px solid var(--jaws-cell-border); border-radius: 6px; }

/* stacked — icon + label on one row */
.jaws-tabs--stacked { --jaws-title-dir: row; }
.elementor-widget-jaws-tabs .jaws-tabs--stacked .jaws-tab-title { justify-content: flex-start; text-align: left; gap: 14px; padding: 20px 22px; }
.jaws-tabs--stacked .jaws-tab-icon { --jaws-icon-box: 56px; --jaws-icon-size: 24px; }

/* ---------------------------------------------------------------- Dark mode */
/* Rides the theme's body.dark-mode switch. Neutrals invert; red accent stays.
   Per-instance dark controls (body.dark-mode {{WRAPPER}}) layer on top. */
body.dark-mode .jaws-tabs {
	--jaws-cell-bg: #262626;
	--jaws-cell-bg-hover: #303030;
	--jaws-cell-bg-active: #303030;
	--jaws-cell-border: rgba(229, 229, 229, 0.1);
	--jaws-icon-color: #8c8c8c;
	--jaws-icon-circle-border: rgba(229, 229, 229, 0.18);
	--jaws-title-color: #cfcfcf;
	--jaws-title-color-hover: #ffffff;
	--jaws-title-color-active: #ffffff;
	--jaws-content-bg: #1f1f1f;
}
body.dark-mode .jaws-tabs--framed .jaws-tab-title { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35); }

/* ---------------------------------------------------------------- Editor */
.elementor-editor-active .jaws-tabs-content > .e-con.e-empty { min-height: 120px; }

/* In the editor the widget re-renders constantly; don't replay the panel
   reveal animation on every render (added by the JS handler in edit mode). */
.jaws-tabs.jaws-editing > .jaws-tabs-content > .jaws-active { animation: none !important; }