/* ==========================================================================
   [wooforge_tabs] / [wooforge_tab] shortcode styles
   ========================================================================== */

.wooforge-tabs {
	--wf-tabs-active-color: var(--wf-accent, #1a1a1a);
	--wf-tabs-hover-bg: rgba(0, 0, 0, .05);
	--wf-tabs-active-bg: rgba(0, 0, 0, .06);
	--wf-tabs-nav-width: 220px;
}

.wooforge-tabs-inner {
	display: flex;
}

.wooforge-tab-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	border: none;
	background: none;
	text-align: left;
	line-height: 1.3;
	font: inherit;
	font-size: .9rem;
	user-select: none;
	transition: background-color .15s, border-color .15s;
}
.wooforge-tab-btn:hover {
	background-color: var(--wf-tabs-hover-bg);
}

.wooforge-tab-icon {
	display: block;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   TOP layout
   -------------------------------------------------------------------------- */

.wooforge-tabs--top .wooforge-tabs-inner {
	flex-direction: column;
	gap: 20px;
}
.wooforge-tabs--top .wooforge-tabs-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.wooforge-tabs--top .wooforge-tab-btn {
	padding: 10px 18px;
	border: 2px solid transparent;
}
.wooforge-tabs--top .wooforge-tab-btn.is-active {
	border-color: var(--wf-tabs-active-color);
	background-color: var(--wf-tabs-active-bg);
}

/* --------------------------------------------------------------------------
   LEFT & RIGHT layouts — shared
   -------------------------------------------------------------------------- */

.wooforge-tabs--left .wooforge-tabs-inner,
.wooforge-tabs--right .wooforge-tabs-inner {
	flex-direction: row;
	gap: 24px;
	align-items: flex-start;
}
.wooforge-tabs--right .wooforge-tabs-inner {
	flex-direction: row-reverse;
}

.wooforge-tabs--left .wooforge-tabs-nav,
.wooforge-tabs--right .wooforge-tabs-nav {
	flex: 0 0 var(--wf-tabs-nav-width);
	width: var(--wf-tabs-nav-width);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.wooforge-tabs--left .wooforge-tabs-content,
.wooforge-tabs--right .wooforge-tabs-content {
	flex: 1 1 0;
	min-width: 0;
}

.wooforge-tabs--left .wooforge-tab-btn {
	padding: 10px 14px;
	border-left: 3px solid transparent;
}
.wooforge-tabs--left .wooforge-tab-btn.is-active {
	border-left-color: var(--wf-tabs-active-color);
	background-color: var(--wf-tabs-active-bg);
}

.wooforge-tabs--right .wooforge-tab-btn {
	padding: 10px 14px;
	border-right: 3px solid transparent;
	justify-content: flex-end;
	text-align: right;
}
.wooforge-tabs--right .wooforge-tab-btn.is-active {
	border-right-color: var(--wf-tabs-active-color);
	background-color: var(--wf-tabs-active-bg);
}

/* --------------------------------------------------------------------------
   Panels — desktop: only the active one shows
   -------------------------------------------------------------------------- */

.wooforge-tab-panel {
	display: none;
}
.wooforge-tab-panel.is-active {
	display: block;
}

/* ==========================================================================
   Mobile accordion (added by js/content/tabs.js below data-mobile-break)

   Buttons and panels normally live in two separate containers
   (.wooforge-tabs-nav / .wooforge-tabs-content) so desktop can show "all
   buttons, one active panel". The accordion needs each panel directly under
   its own button instead - rather than having JS physically move DOM nodes,
   each button/panel already carries an inline `order` (button[i] = i*2,
   panel[i] = i*2+1, set in PHP) and collapsing both containers to
   `display: contents` here dissolves them into .wooforge-tabs-inner's own
   flex flow, so `order` alone produces btn0, panel0, btn1, panel1, ...
   ========================================================================== */

.wooforge-tabs--accordion .wooforge-tabs-inner {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.wooforge-tabs--accordion .wooforge-tabs-nav,
.wooforge-tabs--accordion .wooforge-tabs-content {
	display: contents;
}

.wooforge-tabs--accordion .wooforge-tab-btn {
	width: 100%;
	justify-content: space-between;
	padding: 14px 16px;
	border: none;
	border-bottom: 1px solid #eee;
	border-radius: 0;
}
.wooforge-tabs--accordion .wooforge-tab-btn.is-active {
	background-color: var(--wf-tabs-active-bg);
}
.wooforge-tabs--accordion .wooforge-tab-btn::after {
	content: '';
	flex-shrink: 0;
	width: 10px;
	height: 10px;
	margin-left: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s;
}
.wooforge-tabs--accordion .wooforge-tab-btn.is-active::after {
	transform: rotate(-135deg);
}

.wooforge-tabs--accordion .wooforge-tab-panel {
	padding: 14px 16px;
	border-bottom: 1px solid #eee;
}