/* CT Suite — Product Tabs frontend styling.
 * Colours/font-size themselves come from an inline <style> built from the
 * saved settings (see CTSuite_Product_Tabs_Frontend::build_dynamic_css());
 * this file carries the structural rules those values need to look right,
 * the vertical-layout variant, the per-tab-type icons, and the smooth
 * open/switch transitions.
 */
.woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.tabs li a {
	transition: background-color .15s ease, color .15s ease;
}
.woocommerce-tabs ul.tabs li a {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ---------- Vertical layout ----------
 * Tabs stacked down the left, panel content beside them. WooCommerce only
 * ever shows one .panel at a time (the rest get display:none by its own
 * tabs script), so a simple flex row on ".woocommerce-tabs" itself lines
 * the tab list up next to whichever single panel is currently visible -
 * targeting just this one class (rather than also requiring
 * ".wc-tabs-wrapper") so it still works even if a theme's own tabs
 * template only keeps one of the two classes on the wrapper.
 */
.ctsuite-tabs-vertical .woocommerce-tabs {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}
.ctsuite-tabs-vertical .woocommerce-tabs ul.tabs {
	flex: 0 0 220px;
	display: flex;
	flex-direction: column;
	margin: 0;
	border-bottom: none;
	border-right: 1px solid #e2e2e2;
}
.ctsuite-tabs-vertical .woocommerce-tabs ul.tabs li {
	margin: 0 0 2px;
	border: none;
}
.ctsuite-tabs-vertical .woocommerce-tabs ul.tabs li a {
	padding: 10px 14px;
}
.ctsuite-tabs-vertical .woocommerce-tabs .panel {
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 640px) {
	/* Vertical tabs don't have room to sit beside the content on a phone
	 * screen, so fall back to a normal stacked (horizontal-style) layout. */
	.ctsuite-tabs-vertical .woocommerce-tabs {
		display: block;
	}
	.ctsuite-tabs-vertical .woocommerce-tabs ul.tabs {
		flex-direction: row;
		flex-wrap: wrap;
		border-right: none;
		border-bottom: 1px solid #e2e2e2;
	}
}

/* ---------- Per-tab-type icons ----------
 * Small line-icon before each tab label - Description / Additional
 * Information / Reviews are WooCommerce's own fixed tab keys, so they can
 * be targeted directly; the Extra Tabs (FAQ / Custom) fold their type into
 * the tab key itself (see CTSuite_Product_Tabs_Frontend::add_tabs()), which
 * WooCommerce's tabs.php template turns into a matching <li> class.
 * Drawn with CSS mask + currentColor so the icon always matches whatever
 * text colour is set (including on hover/active) with no extra images.
 */
.woocommerce-tabs ul.tabs li a::before {
	content: "";
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	opacity: .8;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}
.description_tab > a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h8l5 5v11a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3Cpath d='M9 13h6M9 17h6M9 9h2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h8l5 5v11a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3Cpath d='M9 13h6M9 17h6M9 9h2'/%3E%3C/svg%3E");
}
.additional_information_tab > a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01'/%3E%3Cpath d='M11 11.5h1v5.5h1'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01'/%3E%3Cpath d='M11 11.5h1v5.5h1'/%3E%3C/svg%3E");
}
.reviews_tab > a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.5l2.9 6.6 7.1.6-5.4 4.6 1.7 7-6.3-4-6.3 4 1.7-7L1 9.7l7.1-.6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.5l2.9 6.6 7.1.6-5.4 4.6 1.7 7-6.3-4-6.3 4 1.7-7L1 9.7l7.1-.6z'/%3E%3C/svg%3E");
}
li[class*="ctsuite_extra_tab_faq"] > a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 1 1 3.4 2.3c-.8.35-1.4 1.05-1.4 1.95v.25'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9a2.5 2.5 0 1 1 3.4 2.3c-.8.35-1.4 1.05-1.4 1.95v.25'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}
li[class*="ctsuite_extra_tab_custom"] > a::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l6 6v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 3v6h6'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l6 6v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 3v6h6'/%3E%3C/svg%3E");
}

/* ---------- Smooth transition on tab switch ----------
 * WooCommerce's own tabs script just swaps display:none/block instantly on
 * click, which can't be transitioned via CSS alone; ctsuite-product-tabs-
 * frontend.js adds this class to whichever .panel becomes visible right
 * after that swap happens, so a short fade/slide plays every time.
 */
.woocommerce-tabs .panel.ctsuite-panel-fade-in {
	animation: ctsuite-panel-fade-in .28s ease;
}
@keyframes ctsuite-panel-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@media (prefers-reduced-motion: reduce) {
	.woocommerce-tabs .panel.ctsuite-panel-fade-in {
		animation: none;
	}
}