/**
 * SoftTemplates library modal: follow the Elementor editor's UI theme (light, dark or auto).
 *
 * Elementor defines its editor palette as --e-a-* custom properties and swaps them for dark mode
 * (assets/css/theme-dark.css). Using them here keeps the modal consistent with the rest of the
 * editor. The fallbacks are Elementor's light values. Loaded after editor.css, which it overrides.
 */

#softtemplate-template-library-modal {
	--stc-lib-bg: var(--e-a-bg-default, #ffffff);
	--stc-lib-bg-soft: var(--e-a-bg-hover, #f1f2f3);
	--stc-lib-bg-strong: var(--e-a-bg-active, #e6e8ea);
	--stc-lib-text: var(--e-a-color-txt, #515962);
	--stc-lib-text-muted: var(--e-a-color-txt-muted, #69727d);
	--stc-lib-text-strong: var(--e-a-color-txt-accent, #0c0d0e);
	--stc-lib-border: var(--e-a-border-color, #e6e8ea);
	--stc-lib-border-bold: var(--e-a-border-color-bold, #d5d8dc);
	--stc-lib-accent: var(--e-a-border-color-accent, #0c0d0e);
	--stc-lib-success: var(--e-a-color-success, #0a875a);
}

#softtemplate-template-library-modal .dialog-widget-content {
	background-color: var(--stc-lib-bg);
	color: var(--stc-lib-text);
	border: 1px solid var(--stc-lib-border);
}

#softtemplate-template-library-modal .dialog-widget-header,
#softtemplate-template-library-modal .dialog-header {
	background-color: var(--stc-lib-bg);
	border-bottom: 1px solid var(--stc-lib-border);
	box-shadow: none;
}

/* Tabs: centred in the header (offset by the 45px close button so they sit in the middle of the modal) */
#softtemplate-template-library-header-tabs {
	text-align: center;
	padding-left: 45px;
}
#softtemplate-template-library-header .softtemplate-template-library-back + #softtemplate-template-library-header-tabs,
#softtemplate-template-library-header-tabs:empty {
	padding-left: 0;
}

/* Tabs */
#softtemplate-template-library-tabs-items .elementor-template-library-menu-item {
	color: var(--stc-lib-text-muted);
}
#softtemplate-template-library-tabs-items .elementor-template-library-menu-item:hover span,
#softtemplate-template-library-tabs-items .elementor-template-library-menu-item input:checked + span {
	background: var(--stc-lib-bg-soft);
	color: var(--stc-lib-text-strong);
	border-bottom-color: var(--stc-lib-accent);
}
#softtemplate-template-library-tabs-items .elementor-template-library-menu-item input:focus-visible + span {
	outline: 2px solid var(--stc-lib-accent);
	outline-offset: -2px;
}

/* Close and back buttons */
#softtemplate-template-library-header-close-modal {
	border-left-color: var(--stc-lib-border);
}
#softtemplate-template-library-header-close-modal i,
#softtemplate-template-library-header .softtemplate-template-library-back:not(:hover) {
	color: var(--stc-lib-text-muted);
}
#softtemplate-template-library-header-close-modal:hover i,
#softtemplate-template-library-header .softtemplate-template-library-back:hover {
	color: var(--stc-lib-text-strong);
}
#softtemplate-template-library-header .softtemplate-template-library-back {
	border-right-color: var(--stc-lib-border);
}

/* Category filters (left column) */
#softtemplate-template-library-content .softtemplate-template-library-filter-label {
	color: var(--stc-lib-text-muted);
}
#softtemplate-template-library-content .softtemplate-template-library-filter-label:hover span,
#softtemplate-template-library-content .softtemplate-template-library-filter-label input:checked + span {
	color: var(--stc-lib-text-strong);
}
#softtemplate-template-library-content .softtemplate-template-library-filter-label input:checked + span {
	font-weight: 600;
}
#softtemplate-template-library-content .softtemplate-filter-item {
	border-top-color: var(--stc-lib-border);
}

/* "Any Topic" keyword select: compact and right-aligned with the card grid (cards have a 15px margin) */
#softtemplate-template-library-content .softtemplate-keywords-list {
	display: flex;
	justify-content: flex-end;
	padding: 0 15px 0 10px;
}
#softtemplate-template-library-modal .softtemplate-library-keywords {
	width: 240px;
	max-width: 100%;
	min-height: 36px;
	padding: 0 32px 0 12px;
	border: 1px solid var(--stc-lib-border-bold);
	border-radius: var(--e-a-border-radius, 3px);
	background-color: var(--stc-lib-bg);
	color: var(--stc-lib-text);
	font-size: 13px;
}
#softtemplate-template-library-modal .softtemplate-library-keywords:focus {
	border-color: var(--e-a-border-color-focus, #9da5ae);
	outline: none;
}

/* Template cards */
#softtemplate-template-library-templates-container .elementor-template-library-template-remote {
	background-color: var(--stc-lib-bg);
	border: 1px solid var(--stc-lib-border-bold);
	border-radius: var(--e-a-border-radius, 3px);
	box-shadow: none;
	transition: border-color 0.2s, background-color 0.2s;
}
#softtemplate-template-library-templates-container .elementor-template-library-template-remote:hover,
#softtemplate-template-library-templates-container .elementor-template-library-template-remote:focus-within {
	background-color: var(--stc-lib-bg-soft);
	border-color: var(--e-a-border-color-focus, #9da5ae);
}
#softtemplate-template-library-templates-container .elementor-template-library-template-screenshot {
	background-color: var(--stc-lib-bg-strong);
}
#softtemplate-template-library-templates-container .elementor-template-library-template-name,
#softtemplate-template-library-templates-container .elementor-template-library-template-type {
	color: var(--stc-lib-text);
}
#softtemplate-template-library-content:not(.library-tab-local) #softtemplate-template-library-templates-container .elementor-template-library-template-controls {
	background-color: transparent;
}

/* Card actions: Insert and Clone to Library */
#softtemplate-template-library-content:not(.library-tab-local) #softtemplate-template-library-templates-container .softtemplate-template-library-template-insert {
	color: var(--stc-lib-success);
}
#softtemplate-template-library-content:not(.library-tab-local) #softtemplate-template-library-templates-container .softtemplate-template-library-template-insert:hover {
	color: var(--stc-lib-text-strong);
}
#softtemplate-template-library-content:not(.library-tab-local) #softtemplate-template-library-templates-container .softtemplate-clone-to-library {
	color: var(--stc-lib-text-muted);
}
#softtemplate-template-library-content:not(.library-tab-local) #softtemplate-template-library-templates-container .softtemplate-clone-to-library:hover {
	color: var(--stc-lib-text-strong);
}

/* Empty state, preview and scrollbars */
#softtemplate-template-library-modal .elementor-template-library-blank-title,
#softtemplate-template-library-modal .elementor-template-library-blank-message,
#softtemplate-template-library-modal .elementor-library-error-message {
	color: var(--stc-lib-text);
}
#softtemplate-template-library-modal a.elementor-template-library-blank-footer-link:hover {
	color: var(--stc-lib-text-strong);
}
#softtemplate-template-library-modal ::-webkit-scrollbar-thumb {
	background-color: var(--stc-lib-border-bold);
	border-color: var(--stc-lib-border-bold);
}
#softtemplate-template-library-modal ::-webkit-scrollbar-track {
	border-color: var(--stc-lib-bg);
}