/* =================================================================
   File: inc/elementor/widgets/tabs/style.css
   CSS-only tabs using sibling-selector trick on hidden radio inputs.
   ================================================================= */
.liqui-tabs { padding-block: var(--space-5); display: grid; gap: var(--space-4); }

/* Horizontal default */
.liqui-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 6px;
	border-radius: var(--radius-pill);
	width: max-content;
	max-width: 100%;
}
.liqui-tabs__tab {
	padding: 8px 18px;
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--c-ink-muted);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.liqui-tabs__tab:hover { color: var(--c-ink); }

/* Panel — all hidden by default; CSS shows the active one */
.liqui-tabs__panels { position: relative; padding: var(--space-4) 0; }
.liqui-tabs__panel { display: none; line-height: 1.7; color: var(--c-ink); }
.liqui-tabs__panel p:last-child { margin-bottom: 0; }

/* The radio:checked sibling drives both the label and the panel.
   Pattern: nth-of-type aligns label N with panel N. */
.liqui-tabs__nav input[type="radio"]:nth-of-type(1):checked ~ label:nth-of-type(1),
.liqui-tabs__nav input[type="radio"]:nth-of-type(2):checked ~ label:nth-of-type(2),
.liqui-tabs__nav input[type="radio"]:nth-of-type(3):checked ~ label:nth-of-type(3),
.liqui-tabs__nav input[type="radio"]:nth-of-type(4):checked ~ label:nth-of-type(4),
.liqui-tabs__nav input[type="radio"]:nth-of-type(5):checked ~ label:nth-of-type(5),
.liqui-tabs__nav input[type="radio"]:nth-of-type(6):checked ~ label:nth-of-type(6) {
	background: var(--c-accent);
	color: #fff;
}
.liqui-tabs:has(.liqui-tabs__nav input:nth-of-type(1):checked) .liqui-tabs__panel[data-tab="0"],
.liqui-tabs:has(.liqui-tabs__nav input:nth-of-type(2):checked) .liqui-tabs__panel[data-tab="1"],
.liqui-tabs:has(.liqui-tabs__nav input:nth-of-type(3):checked) .liqui-tabs__panel[data-tab="2"],
.liqui-tabs:has(.liqui-tabs__nav input:nth-of-type(4):checked) .liqui-tabs__panel[data-tab="3"],
.liqui-tabs:has(.liqui-tabs__nav input:nth-of-type(5):checked) .liqui-tabs__panel[data-tab="4"],
.liqui-tabs:has(.liqui-tabs__nav input:nth-of-type(6):checked) .liqui-tabs__panel[data-tab="5"] { display: block; }

/* Vertical variant */
.liqui-tabs--vertical { grid-template-columns: 220px 1fr; align-items: start; gap: var(--space-5); }
.liqui-tabs--vertical .liqui-tabs__nav { flex-direction: column; width: 100%; border-radius: var(--radius-lg); padding: 8px; }
.liqui-tabs--vertical .liqui-tabs__tab { text-align: start; }
@media (max-width: 768px) {
	.liqui-tabs--vertical { grid-template-columns: 1fr; }
	.liqui-tabs--vertical .liqui-tabs__nav { width: max-content; }
}