/**
 * Breadcrumbs for Elementor - Frontend Styles
 *
 * @package Breadcrumbs_For_Elementor
 * @since 1.0.0
 */

/* Breadcrumbs Wrapper */
.bfe-breadcrumbs-wrapper {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Breadcrumbs Container */
.bfe-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Breadcrumb Items */
.bfe-breadcrumb-item {
	display: inline-block;
	text-decoration: none;
	transition: color 0.3s ease, opacity 0.3s ease;
}

.bfe-breadcrumb-item:hover {
	text-decoration: none;
	opacity: 0.8;
}

/* Current Breadcrumb */
.bfe-breadcrumb-current {
	font-weight: 600;
	cursor: default;
}

/* Separator */
.bfe-breadcrumb-separator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 10px;
	line-height: 1;
	vertical-align: middle;
}

.bfe-breadcrumb-separator i,
.bfe-breadcrumb-separator svg {
	display: inline-block;
	vertical-align: middle;
}

/* RTL Support */
.rtl .bfe-breadcrumbs {
	direction: rtl;
}

.rtl .bfe-breadcrumb-separator {
	transform: scaleX(-1);
}

/* Responsive */
@media screen and (max-width: 768px) {
	.bfe-breadcrumbs {
		font-size: 14px;
	}

	.bfe-breadcrumb-separator {
		margin: 0 8px;
	}
}

@media screen and (max-width: 480px) {
	.bfe-breadcrumbs {
		font-size: 13px;
	}

	.bfe-breadcrumb-separator {
		margin: 0 6px;
	}
}



/* Preset Designs */
/* 1) Minimal */
.bfe-preset-minimal .bfe-breadcrumbs { gap: 8px; }

/* 2) Underline */
.bfe-preset-underline .bfe-breadcrumb-item { padding-bottom: 2px; border-bottom: 1px solid currentColor; }
.bfe-preset-underline .bfe-breadcrumb-item.bfe-breadcrumb-current { border-bottom-color: transparent; }

/* 3) Pills */
.bfe-preset-pill .bfe-breadcrumb-item { background: #f5f7fb; padding: 6px 10px; border-radius: 9999px; }
.bfe-preset-pill .bfe-breadcrumb-item.bfe-breadcrumb-current { background: #e9eef7; font-weight: 600; }

/* 4) Boxed */
.bfe-preset-boxed .bfe-breadcrumb-item { background: #f7f7f7; border: 1px solid #e5e7eb; padding: 6px 10px; border-radius: 6px; }

/* 5) Gradient container */
.bfe-preset-gradient .bfe-breadcrumbs { background: linear-gradient(90deg, #eef2ff 0%, #f5f3ff 100%); padding: 10px 12px; border-radius: 8px; }
.bfe-preset-gradient .bfe-breadcrumb-item { color: #374151; }

/* 6) Soft Shadow */
.bfe-preset-shadow .bfe-breadcrumbs { background: #ffffff; padding: 10px 12px; border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,0.06); }

/* 7) Arrow Trail */
.bfe-preset-arrow .bfe-breadcrumb-item { position: relative; background: #f7f7fb; padding: 6px 14px; margin-right: 14px; }
.bfe-preset-arrow .bfe-breadcrumb-item:not(.bfe-breadcrumb-current)::after { content: ""; position: absolute; top: 0; right: -14px; width: 0; height: 0; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-left: 14px solid #f7f7fb; }
.bfe-preset-arrow .bfe-breadcrumb-current { background: #e9eef7; }
.rtl .bfe-preset-arrow .bfe-breadcrumb-item { margin-left: 14px; margin-right: 0; }
.rtl .bfe-preset-arrow .bfe-breadcrumb-item:not(.bfe-breadcrumb-current)::after { left: -14px; right: auto; border-left: 0; border-right: 14px solid #f7f7fb; }

/* 8) Dot Separated */
.bfe-preset-dot .bfe-breadcrumb-separator { font-size: 10px; opacity: 0.7; margin: 0 6px; }

/* 9) Uppercase */
.bfe-preset-uppercase .bfe-breadcrumbs { text-transform: uppercase; letter-spacing: .02em; }

/* 10) Rounded Bar */
.bfe-preset-rounded .bfe-breadcrumbs { background: #f9fafb; padding: 8px 12px; border-radius: 9999px; }