/**
 * Bosa Template Library — Frontend Widget Styles
 * Scope: .bosa-tl-widget
 *
 * Palette/spacing mirrors the BEW Template Library modal's light theme
 * (Elementor's --e-a-* editor tokens, resolved to their light-mode values —
 * this widget runs outside the editor so those custom properties aren't
 * available here, hence the literal colors below instead of var()).
 */

/* ── Widget shell ──────────────────────────────────────────────────────────── */

.bosa-tl-widget {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 700px;
	min-height: 400px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e6e8ea;
	border-radius: 4px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	color: #515962;
	box-sizing: border-box;
}

.bosa-tl-widget *,
.bosa-tl-widget *::before,
.bosa-tl-widget *::after {
	box-sizing: border-box;
}

/* ── Views ─────────────────────────────────────────────────────────────────── */

.bosa-tl-widget .btl-view {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	height: 100%;
}

.bosa-tl-widget .btl-view[hidden] {
	display: none !important;
}

/* ── Header / Tabs ─────────────────────────────────────────────────────────── */

.bosa-tl-widget .btl-header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #1e1e1e;
}

.bosa-tl-widget .btl-tabs {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 0 20px;
}

/* Sync button — only ever rendered in the Elementor editor, never on the front-end. */
.bosa-tl-widget .btl-header-actions {
	display: flex;
	align-items: center;
	padding: 0 16px;
	flex-shrink: 0;
}

.bosa-tl-widget .btl-sync {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: #9a9a9a;
	cursor: pointer;
	padding: 6px 8px;
	line-height: 1;
	border-radius: 4px;
	transition: color 0.15s;
}

.bosa-tl-widget .btl-sync:hover {
	color: #fff;
}

.bosa-tl-widget .btl-sync:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.bosa-tl-widget .btl-sync-icon {
	display: inline-block;
	font-size: 18px;
}

.bosa-tl-widget .btl-sync--spinning .btl-sync-icon {
	animation: btl-spin 0.7s linear infinite;
}

.bosa-tl-widget .btl-tab {
	position: relative;
	padding: 16px 0 14px;
	border: none;
	border-radius: 0;
	background: transparent;
	color: #9a9a9a;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	transition: color 0.15s;
	white-space: nowrap;
}

.bosa-tl-widget .btl-tab--active {
	color: #fff;
}

.bosa-tl-widget .btl-tab--active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: #fff;
}

/* ── Toolbar ───────────────────────────────────────────────────────────────── */

.bosa-tl-widget .btl-toolbar {
	flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2%;
    padding: 0 20px 15px;
    background: #ffffff;
    border-bottom: 1px solid #e6e8ea;
}

.bosa-tl-widget .btl-category-wrap {
	flex-shrink: 0;
}

.bosa-tl-widget .btl-category-field {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.bosa-tl-widget .btl-category {
	min-width: 150px;
    height: 32px;
    margin-top: 15px;
    padding: 0 32px 0 14px;
    border: 1px solid #e6e8ea;
    border-radius: 3px;
    background: #fff;
    color: #515962;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition: border-color 0.15s;
}

.bosa-tl-widget .btl-category option {
	background: #fff;
	color: #515962;
}

.bosa-tl-widget .btl-category:focus {
	border-color: #d5d8dc;
}

.bosa-tl-widget .btl-category-field .eicon-chevron-down {
	position: absolute;
	right: 8px;
	font-size: 11px;
	color: #515962;
	pointer-events: none;
	top: 25px;
}

.bosa-tl-widget .btl-search-wrap {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 1 240px;
	min-width: 160px;
	height: 30px;
	padding: 0 32px 0 5px;
	border-bottom: 1px solid #e6e8ea;
	border-radius: 0;
	transition: border-color 0.15s;
	margin-top: 17px;
}

.bosa-tl-widget .btl-search-wrap:focus-within {
	border-color: #d5d8dc;
}

.bosa-tl-widget .btl-search {
	width: 100%;
	padding: 0;
	border: none;
	background: transparent;
	color: #515962;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	outline: none;
}

.bosa-tl-widget .btl-search::placeholder {
	color: #818a96;
	opacity: 1;
}

.bosa-tl-widget .btl-search-wrap .eicon-search {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 13px;
	color: #515962;
	pointer-events: none;
}

/* ── Scrollable grid area ──────────────────────────────────────────────────── */

.bosa-tl-widget .btl-grid-scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 20px 20px 10px 20px;
	-webkit-overflow-scrolling: touch;
	display: flex;
	flex-direction: column;
}

.bosa-tl-widget .btl-grid-host,
.bosa-tl-widget .btl-kit-grid-host {
	flex: 1;
}

/* ── Grid (Masonry — column width/gutter are set by JS) ───────────────────── */

.bosa-tl-widget .btl-grid {
	position: relative;
	width: 100%;
}

.bosa-tl-widget .btl-grid-items {
	width: 100%;
}

.bosa-tl-widget .btl-grid-sizer {
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
}

/* ── Loading ───────────────────────────────────────────────────────────────── */

.bosa-tl-widget .btl-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.bosa-tl-widget .btl-loading-icon {
	font-size: 40px;
	line-height: 1;
	color: #818a96;
	animation: btl-spin 0.8s linear infinite;
	display: inline-block;
}

@keyframes btl-spin {
	to { transform: rotate(360deg); }
}

.bosa-tl-widget .btl-no-results {
	padding: 40px 20px;
	text-align: center;
	color: #818a96;
	font-size: 13px;
}

/* ── Card ──────────────────────────────────────────────────────────────────── */

.bosa-tl-widget .btl-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e6e8ea;
	border-radius: 3px;
	padding: 8px;
	margin-bottom: 20px;
	overflow: hidden;
	transition: border-color 0.15s, box-shadow 0.15s;
	cursor: pointer;
}

.bosa-tl-widget .btl-card:hover {
	border-color: #d5d8dc;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.bosa-tl-widget .btl-card__thumb {
	position: relative;
	max-height: 280px;
	overflow: hidden;
	flex-shrink: 0;
	cursor: pointer;
	width: 100%;
	margin-bottom: 4px;
	overflow: hidden;
	border-radius: 3px;
}

.bosa-tl-widget .btl-card__thumb img {
	width: 100%;
    height: auto;
    display: block;
    vertical-align: top;
}

.bosa-tl-widget .btl-card__no-thumb {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #eef0f4 0%, #dde1e8 100%);
}

.bosa-tl-widget .btl-card__preview-overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.2s;
	pointer-events: none;
}

.bosa-tl-widget .btl-card:hover .btl-card__preview-overlay {
	opacity: 1;
	pointer-events: auto;
}

.bosa-tl-widget .btl-card__preview-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.35);
	color: #fff;
	font-size: 16px;
}

/* Badges */
.bosa-tl-widget .btl-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	z-index: 1;
}

.bosa-tl-widget .btl-badge--free { background: #27ae60; color: #fff; }
.bosa-tl-widget .btl-badge--pro  { background: #8382f3; color: #fff; }

/* Card info bar */
.bosa-tl-widget .btl-card__info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 2px;
	min-height: 38px;
}

.bosa-tl-widget .btl-card__info:not(.btl-card__info--kit) {
	justify-content: center;
}

.bosa-tl-widget .btl-card__title {
	font-size: 11px;
	font-weight: 400;
	color: #515962;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}

.bosa-tl-widget .btl-card__info:not(.btl-card__info--kit) .btl-card__title {
	text-align: center;
}

.bosa-tl-widget .btl-card__count {
	flex-shrink: 0;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
}

/* ── Load more / end of list ──────────────────────────────────────────────── */

.bosa-tl-widget .btl-load-more {
	display: none;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 16px 0 4px;
}

.bosa-tl-widget .btl-load-more--visible {
	display: flex;
}

.bosa-tl-widget .btl-load-more-icon {
	font-size: 22px;
	line-height: 1;
	color: #818a96;
	animation: btl-spin 0.8s linear infinite;
	display: inline-block;
}

.bosa-tl-widget .btl-end-notice {
	display: none;
	flex-shrink: 0;
	margin: 16px 0 4px;
	padding: 0;
	text-align: center;
	color: #818a96;
	font-size: 12px;
}

.bosa-tl-widget .btl-end-notice--visible {
	display: block;
}

/* ── Kit details ───────────────────────────────────────────────────────────── */

.bosa-tl-widget .btl-view--kit-details {
	flex-direction: column;
}

.bosa-tl-widget .btl-kit-header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 20px;
	min-height: 52px;
	background: #1e1e1e;
}

.bosa-tl-widget .btl-kit-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
	border: none;
	background: transparent;
	color: #babfc5;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s;
	flex-shrink: 0;
}

.bosa-tl-widget .btl-kit-back:hover,
.bosa-tl-widget .btl-kit-back:active,
.bosa-tl-widget .btl-kit-back:focus {
    background: transparent;
}

.bosa-tl-widget .btl-kit-back:hover {
	color: #fff;
}

.bosa-tl-widget .btl-kit-back .eicon-chevron-left {
	font-size: 14px;
}

.bosa-tl-widget .btl-kit-title {
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	text-align: center;
}

/* ── Preview view ──────────────────────────────────────────────────────────── */

.bosa-tl-widget .btl-view--preview {
	flex-direction: column;
}

.bosa-tl-widget .btl-preview-header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 0 18px;
	min-height: 52px;
	background: #1e1e1e;
	border-bottom: 1px solid #e6e8ea;
}

.bosa-tl-widget .btl-preview-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
	border: none;
	background: transparent;
	color: #babfc5;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s;
}

.bosa-tl-widget .btl-preview-back:hover {
	color: #fff;
	background: transparent;
}

.bosa-tl-widget .btl-preview-back .eicon-chevron-left {
	font-size: 14px;
}

.bosa-tl-widget .btl-preview-live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	background: transparent;
	color: #d8d8e8;
	text-decoration: none !important;
	font-size: 12px;
	font-weight: 500;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	white-space: nowrap;
}

.bosa-tl-widget .btl-preview-live:hover {
	background: rgba(255,255,255,0.1);
	color: #fff;
	border: 1px solid #7968e455;
}

.bosa-tl-widget .btl-preview-live .eicon-preview-medium {
	font-size: 14px;
}

.bosa-tl-widget .btl-preview-scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 22px 20px 28px;
	background: #ffffff;
}

.bosa-tl-widget .btl-preview-shot {
	width: 100%;
	margin: 0;
}

.bosa-tl-widget .btl-preview-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.12);
}

.bosa-tl-widget .btl-preview-no-img {
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 200px;
	background: #dde1e8;
	border-radius: 4px;
}