/* ==========================================================================
   [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-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);
}

/* --------------------------------------------------------------------------
   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);
}

/* style="plus" (or the General -> Layout -> Accordion icon default): a plus
   sign that becomes a minus when open, instead of the chevron drawn out of
   two borders above - same idea as [wooforge_product_wc_tabs style="plus"]
   and the coupon accordion. Everything the chevron sets has to be undone
   here: it is the same ::after box, not a second element. */
.wooforge-tabs--accordion.wooforge-tabs--icon-plus .wooforge-tab-btn::after {
	content: '+';
	width: auto;
	height: auto;
	border: none;
	transform: none;
	font-size: 20px;
	line-height: 1;
}

.wooforge-tabs--accordion.wooforge-tabs--icon-plus .wooforge-tab-btn.is-active::after {
	content: '\2212';
	transform: none;
}

/* Opens and closes with the same grid-template-rows 0fr/1fr collapse as
   the product tabs, the category accordion and the coupon accordion -
   this was the one accordion in the theme that snapped open instead.
   Needs exactly one child (.wooforge-tab-panel-inner) with min-height:0
   so the row can reach true zero.

   Padding and border live where they will not survive the collapse: on
   the panel they would leave 28px of empty box and a stray hairline
   under every closed row - a grid row of 0fr zeroes the track, not the
   box around it. The vertical padding is transitioned so it shrinks
   together with the height rather than snapping off at the start. */
.wooforge-tabs--accordion .wooforge-tab-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s ease;
	padding: 0;
}

.wooforge-tabs--accordion .wooforge-tab-panel.is-active {
	grid-template-rows: 1fr;
	border-bottom: 1px solid #eee;
}

.wooforge-tabs--accordion .wooforge-tab-panel-inner {
	min-height: 0;
	overflow: hidden;
	padding: 0 16px;
	transition: padding .3s ease;
}

.wooforge-tabs--accordion .wooforge-tab-panel.is-active .wooforge-tab-panel-inner {
	padding: 14px 16px;
}