/**
 * Base layout styles for the Custom Breadcrumb Widget.
 * Colors, typography, gaps, etc. are handled by Elementor's own
 * Style controls (inline via {{WRAPPER}} selectors) — this file only
 * provides the structural layout that Elementor controls don't cover.
 */

.cb-breadcrumb-list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 100%;
	overflow: hidden;
}

.cb-breadcrumb-item,
.cb-breadcrumb-sep-wrap {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

/* The last (current-page) item is the one most likely to be long, so it's
   the one allowed to shrink and truncate — everything before it (Home,
   category, etc.) always stays fully visible and on one line. */
.cb-breadcrumb-item.cb-current {
	flex-shrink: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin-bottom: 10px;
}

.cb-breadcrumb-item.cb-current span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline-block;
	max-width: 100%;
	vertical-align: middle;
}

.cb-breadcrumb-item a {
	text-decoration: none;
	transition: color 0.15s ease-in-out;
	vertical-align: middle;
}

.cb-breadcrumb-item a:hover {
	text-decoration: underline;
}

.cb-breadcrumb-item.cb-current span {
	font-weight: 500;
}
li.cb-breadcrumb-item.cb-current {
    margin-bottom: 10px;
}

.cb-breadcrumb-separator {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.cb-breadcrumb-separator svg {
	width: 0.7em;
	height: 0.7em;
}

/* RTL: mirror icon separators (e.g. chevrons) that imply direction */
body.rtl .cb-breadcrumb-separator svg {
	transform: scaleX(-1);
}