/* ECS Dynamic Repeater Builder — Elementor AI–style UI */

:root {
	/* Mapped to Elementor panel vars — update automatically in dark mode */
	--drb-white       : var(--e-a-bg-default, #ffffff);
	--drb-bg          : var(--e-a-bg-default, #ffffff);
	--drb-text        : var(--e-a-color-txt-accent, #0c0d0e);
	--drb-text-sec    : var(--e-a-color-txt, #515962);
	--drb-text-ter    : var(--e-a-color-txt-muted, #69727d);
	--drb-border      : var(--e-a-border-color, #d5d8dc);
	--drb-border-focus: #9747ff;
	--drb-surface     : var(--e-a-bg-hover, #f7f7f7);
	--drb-cta-bg      : #f0abfc;
	--drb-cta-bg-hover: #e879f9;
	--drb-cta-text    : #0c0d0e;
	--drb-chip-active : #f3e8ff;
	--drb-chip-active-border: #9747ff;
	--drb-chip-active-text: #6d28d9;
	--drb-tag-bg      : #fdf4ff;
	--drb-tag-border  : #e9d5ff;
	--drb-tag-text    : #7e22ce;
	--drb-shadow      : 0px 11px 15px -7px rgba(0,0,0,.2), 0px 24px 38px 3px rgba(0,0,0,.14), 0px 9px 46px 8px rgba(0,0,0,.12);
	--drb-font        : Roboto, Arial, Helvetica, sans-serif;
	--drb-radius      : 4px;
	--drb-radius-sm   : 3px;
}

/* ── Inject button (in Elementor panel) ──────────────────────────────────── */

.ecs-drb-inject-btn {
	display     : inline-flex;
	align-items : center;
	justify-content: center;
	gap         : 5px;
	width       : 100%;
	margin-top  : 8px;
	padding     : 0 10px;
	height      : 28px;
	background  : var(--e-a-bg-hover);
	border      : 1px solid var(--e-a-border-color);
	border-radius: 3px;
	color       : var(--e-a-color-txt);
	font-size   : 12px;
	font-weight : 500;
	font-family : inherit;
	line-height : 1;
	cursor      : pointer;
	white-space : nowrap;
	transition  : background 0.15s, border-color 0.15s, color 0.15s;
	box-sizing  : border-box;
}

.ecs-drb-inject-btn:hover {
	background : var(--e-a-bg-active);
}

/* ── Modal overlay ───────────────────────────────────────────────────────── */

#ecs-drb-modal {
	display  : none;
	position : fixed;
	inset    : 0;
	z-index  : 999999;
}

#ecs-drb-modal.ecs-drb-open {
	display         : flex;
	align-items     : center;
	justify-content : center;
}

.ecs-drb-backdrop {
	position   : absolute;
	inset      : 0;
	background : transparent;
}

/* ── Dialog ──────────────────────────────────────────────────────────────── */

.ecs-drb-dialog {
	position       : relative;
	display        : flex;
	flex-direction : column;
	width          : min(640px, 96vw);
	height         : min(600px, 90vh);
	max-height     : 90vh;
	background     : var(--drb-bg);
	border-radius  : var(--drb-radius);
	box-shadow     : var(--drb-shadow);
	overflow       : hidden;
	color          : var(--drb-text);
	font-family    : var(--drb-font);
	font-size      : 13px;
}

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

.ecs-drb-header {
	display       : flex;
	align-items   : center;
	gap           : 8px;
	padding       : 12px 16px 10px;
	flex-shrink   : 0;
	border-bottom : 1px solid var(--drb-border);
}

.ecs-drb-header-icon {
	width           : 28px;
	height          : 28px;
	background      : #0c0d0e;
	border-radius   : 50%;
	display         : flex;
	align-items     : center;
	justify-content : center;
	flex-shrink     : 0;
	color           : #fff;
	font-size       : 11px;
	font-weight     : 700;
	letter-spacing  : -0.5px;
}

.ecs-drb-title {
	font-size   : 13px;
	font-weight : 600;
	color       : var(--drb-text);
}

.ecs-drb-badge {
	padding       : 2px 6px;
	background    : var(--drb-surface);
	border        : 1px solid var(--drb-border);
	border-radius : 100px;
	font-size     : 10px;
	font-weight   : 500;
	color         : var(--drb-text-ter);
	letter-spacing: .02em;
}

.ecs-drb-header-left {
	display     : flex;
	align-items : center;
	gap         : 8px;
	flex-shrink : 0;
}

.ecs-drb-header-title-wrap {
	display     : flex;
	align-items : center;
	gap         : 6px;
}

.ecs-drb-header-meta {
	font-size     : 11px;
	color         : var(--drb-text-ter);
	margin-left   : 4px;
	overflow      : hidden;
	text-overflow : ellipsis;
	white-space   : nowrap;
	flex          : 1;
}

.ecs-drb-header-actions {
	display     : flex;
	align-items : center;
	gap         : 2px;
	margin-left : auto;
	flex-shrink : 0;
}

.ecs-drb-icon-btn {
	display         : flex;
	align-items     : center;
	justify-content : center;
	width           : 28px;
	height          : 28px;
	background      : transparent;
	border          : none;
	border-radius   : 50%;
	color           : var(--drb-text-sec);
	font-size       : 16px;
	cursor          : pointer;
	transition      : background .15s, color .15s;
}

.ecs-drb-icon-btn:hover {
	background : var(--e-a-bg-active, rgba(0,0,0,.06));
	color      : var(--drb-text);
}

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

.ecs-drb-tabs {
	display        : flex;
	border-bottom  : 1px solid var(--drb-border);
	flex-shrink    : 0;
	overflow-x     : auto;
	padding        : 0 8px;
	scrollbar-width: none;
}

.ecs-drb-tabs::-webkit-scrollbar { display: none; }

.ecs-drb-tab {
	padding       : 10px 12px;
	background    : none;
	border        : none;
	border-bottom : 2px solid transparent;
	color         : var(--drb-text-sec);
	font-family   : var(--drb-font);
	font-size     : 12px;
	font-weight   : 500;
	cursor        : pointer;
	white-space   : nowrap;
	transition    : color .15s, border-color .15s;
	margin-bottom : -1px;
}

.ecs-drb-tab:hover { color: var(--drb-text); }

.ecs-drb-tab.active {
	color        : #9747ff;
	border-bottom-color: #9747ff;
}

/* ── Tab body ────────────────────────────────────────────────────────────── */

.ecs-drb-tab-body {
	flex     : 1;
	overflow : auto;
	padding  : 16px;
}

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

.ecs-drb-loading-overlay {
	position        : absolute;
	inset           : 0;
	background      : rgba(255, 255, 255, 0.8);
	display         : flex;
	align-items     : center;
	justify-content : center;
	color           : #9747ff;
	font-size       : 13px;
	font-family     : var(--drb-font);
	z-index         : 10;
}

/* ── Term autocomplete dropdown ──────────────────────────────────────────── */

.ecs-drb-field--autocomplete-wrap {
	position : relative;
}

.ecs-drb-ac-dropdown {
	display       : none;
	position      : absolute;
	top           : 100%;
	left          : 0;
	right         : 0;
	z-index       : 99999;
	background    : var(--drb-bg);
	border        : 1px solid var(--drb-border);
	border-radius : var(--drb-radius);
	box-shadow    : 0 4px 16px rgba(0,0,0,.12);
	max-height    : 180px;
	overflow-y    : auto;
}

.ecs-drb-ac-item {
	display     : flex;
	align-items : center;
	gap         : 8px;
	padding     : 6px 10px;
	cursor      : pointer;
	font-size   : 12px;
	color       : var(--drb-text);
	transition  : background .1s;
}

.ecs-drb-ac-item:hover {
	background : var(--drb-chip-active);
}

.ecs-drb-ac-slug {
	font-family  : 'Courier New', monospace;
	font-size    : 11px;
	color        : var(--drb-tag-text);
	background   : var(--drb-tag-bg);
	border       : 1px solid var(--drb-tag-border);
	border-radius: 3px;
	padding      : 1px 5px;
	flex-shrink  : 0;
}

.ecs-drb-ac-name {
	flex       : 1;
	color      : var(--drb-text-sec);
	overflow   : hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ecs-drb-ac-count {
	font-size  : 10px;
	color      : var(--drb-text-ter);
	flex-shrink: 0;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.ecs-drb-footer {
	display       : flex;
	align-items   : center;
	gap           : 8px;
	padding       : 8px 16px;
	border-top    : 1px solid var(--drb-border);
	flex-shrink   : 0;
	background    : var(--drb-bg);
}

.ecs-drb-status {
	flex        : 1;
	font-size   : 11px;
	color       : var(--drb-text-ter);
	font-family : var(--drb-font);
}

.ecs-drb-status--error { color: #dc2626; }

.ecs-drb-footer-actions {
	display     : flex;
	align-items : center;
	gap         : 6px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.ecs-drb-btn-primary,
.ecs-drb-btn-secondary,
.ecs-drb-btn-danger {
	padding       : 5px 12px;
	height        : 28px;
	border-radius : var(--drb-radius-sm);
	font-family   : var(--drb-font);
	font-size     : 12px;
	font-weight   : 500;
	cursor        : pointer;
	border        : 1px solid transparent;
	transition    : background .15s, border-color .15s, color .15s;
	line-height   : 1;
	white-space   : nowrap;
}

.ecs-drb-btn-primary {
	background   : var(--drb-cta-bg);
	color        : var(--drb-cta-text);
	border-color : var(--drb-cta-bg);
}
.ecs-drb-btn-primary:hover:not(:disabled) {
	background   : var(--drb-cta-bg-hover);
	border-color : var(--drb-cta-bg-hover);
}
.ecs-drb-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

.ecs-drb-btn-secondary {
	background   : transparent;
	color        : var(--drb-text-sec);
	border-color : transparent;
}
.ecs-drb-btn-secondary:hover:not(:disabled) {
	background   : var(--drb-surface);
	color        : var(--drb-text);
}
.ecs-drb-btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; }

.ecs-drb-btn-danger {
	background   : transparent;
	color        : #dc2626;
	border-color : #fca5a5;
}
.ecs-drb-btn-danger:hover { background: #fef2f2; }

/* ── Form fields ─────────────────────────────────────────────────────────── */

.ecs-drb-field {
	margin-bottom : 12px;
}

.ecs-drb-field > label:first-child,
.ecs-drb-field > span.ecs-drb-label {
	display        : block;
	font-size      : 11px;
	font-weight    : 500;
	color          : var(--drb-text-sec);
	margin-bottom  : 5px;
	text-transform : uppercase;
	letter-spacing : .04em;
}

.ecs-drb-field input[type="text"],
.ecs-drb-field input[type="number"],
.ecs-drb-field select,
.ecs-drb-field textarea {
	width         : 100%;
	background    : var(--drb-white);
	border        : 1px solid var(--drb-border);
	border-radius : var(--drb-radius-sm);
	color         : var(--drb-text-sec);
	font-family   : var(--drb-font);
	font-size     : 12px;
	padding       : 5px 8px;
	box-sizing    : border-box;
	transition    : border-color .15s;
}

.ecs-drb-field textarea { font-family: 'Courier New', monospace; resize: vertical; }

.ecs-drb-field input:focus,
.ecs-drb-field select:focus,
.ecs-drb-field textarea:focus {
	outline      : none;
	border-color : var(--drb-border-focus);
}

.ecs-drb-field--toggle label {
	display        : flex;
	align-items    : center;
	gap            : 6px;
	font-size      : 12px;
	font-weight    : 400;
	text-transform : none !important;
	letter-spacing : 0 !important;
	cursor         : pointer;
	color          : var(--drb-text-sec) !important;
}

.ecs-drb-radio-group { display: flex; flex-direction: column; gap: 6px; }

.ecs-drb-radio-group label {
	display        : flex;
	align-items    : center;
	gap            : 6px;
	font-size      : 12px;
	font-weight    : 400 !important;
	text-transform : none !important;
	letter-spacing : 0 !important;
	cursor         : pointer;
	color          : var(--drb-text-sec) !important;
}

.ecs-drb-hidden { display: none !important; }

.ecs-drb-source-error {
	margin        : 0 0 12px;
	padding       : 8px 12px;
	background    : #fff5f5;
	border        : 1px solid #fecaca;
	border-radius : var(--drb-radius-sm);
	font-size     : 11px;
	line-height   : 1.6;
	color         : #dc2626;
	font-family   : var(--drb-font);
}

.ecs-drb-source-info {
	margin        : 0 0 12px;
	padding       : 8px 12px;
	background    : var(--drb-surface);
	border        : 1px solid var(--drb-border);
	border-radius : var(--drb-radius-sm);
	font-size     : 11px;
	line-height   : 1.6;
	color         : var(--drb-text-ter);
	font-family   : var(--drb-font);
}

.ecs-drb-hint {
	color       : var(--drb-text-ter);
	font-size   : 12px;
	font-family : var(--drb-font);
	margin      : 0;
	padding     : 20px 0;
	text-align  : center;
}

/* ── Source tab ──────────────────────────────────────────────────────────── */

.ecs-drb-src-types {
	display       : flex;
	flex-wrap     : wrap;
	gap           : 6px;
	margin-bottom : 16px;
}

.ecs-drb-src-type {
	display       : inline-flex;
	align-items   : center;
	padding       : 4px 12px;
	height        : 28px;
	background    : var(--drb-white);
	border        : 1px solid var(--drb-border);
	border-radius : 100px;
	color         : var(--drb-text-sec);
	font-family   : var(--drb-font);
	font-size     : 12px;
	font-weight   : 400;
	cursor        : pointer;
	transition    : border-color .15s, background .15s, color .15s;
}

.ecs-drb-src-type:hover:not(.active) {
	border-color : #9747ff;
	color        : #7e22ce;
	background   : var(--drb-tag-bg);
}

.ecs-drb-src-type.active {
	background   : var(--drb-chip-active);
	border-color : var(--drb-chip-active-border);
	color        : var(--drb-chip-active-text);
	font-weight  : 500;
}

/* ── Mapping tab ─────────────────────────────────────────────────────────── */

.ecs-drb-mapping-toolbar {
	display       : flex;
	gap           : 6px;
	margin-bottom : 12px;
}

.ecs-drb-map-header {
	display               : grid;
	grid-template-columns : 150px 1fr 240px;
	gap                   : 8px;
	padding               : 6px 10px;
	background            : var(--drb-surface);
	border                : 1px solid var(--drb-border);
	border-radius         : var(--drb-radius-sm) var(--drb-radius-sm) 0 0;
	font-size             : 10px;
	font-weight           : 600;
	color                 : var(--drb-text-ter);
	text-transform        : uppercase;
	letter-spacing        : .05em;
}

.ecs-drb-map-hint {
	font-style     : italic;
	font-weight    : 400;
	text-transform : none;
	letter-spacing : 0;
	color          : var(--drb-text-ter);
	margin-left    : 4px;
}

.ecs-drb-map-rows {
	border        : 1px solid var(--drb-border);
	border-top    : none;
	border-radius : 0 0 var(--drb-radius-sm) var(--drb-radius-sm);
}

.ecs-drb-map-row {
	display               : grid;
	grid-template-columns : 150px 1fr 240px;
	gap                   : 8px;
	align-items           : center;
	padding               : 8px 10px;
	border-bottom         : 1px solid var(--drb-border);
}

.ecs-drb-map-row:last-child { border-bottom: none; }
.ecs-drb-map-row:nth-child(even) { background: var(--drb-surface); }

.ecs-drb-map-row--image {
	grid-template-columns : 150px 1fr;
}

.ecs-drb-map-subrows {
	display        : flex;
	flex-direction : column;
	gap            : 4px;
}

.ecs-drb-map-subrow {
	display     : flex;
	align-items : center;
	gap         : 6px;
}

.ecs-drb-map-sublabel {
	font-size   : 10px;
	font-weight : 600;
	color       : var(--drb-text-ter);
	text-transform: uppercase;
	letter-spacing: .04em;
	width       : 28px;
	flex-shrink : 0;
}

.ecs-drb-map-rfield {
	display        : flex;
	flex-direction : column;
	gap            : 1px;
	overflow       : hidden;
}

.ecs-drb-map-rfield-label {
	font-size     : 12px;
	color         : var(--drb-text);
	overflow      : hidden;
	text-overflow : ellipsis;
	white-space   : nowrap;
}

.ecs-drb-map-rfield-key {
	font-family   : 'Courier New', monospace;
	font-size     : 10px;
	color         : #9747ff;
	overflow      : hidden;
	text-overflow : ellipsis;
	white-space   : nowrap;
}

/* ── Expression input + tag button ──────────────────────────────────────── */

.ecs-drb-map-expr-wrap {
	display  : flex;
	position : relative;
}

.ecs-drb-map-expr {
	flex          : 1;
	min-width     : 0;
	background    : var(--drb-white);
	border        : 1px solid var(--drb-border);
	border-right  : none;
	border-radius : var(--drb-radius-sm) 0 0 var(--drb-radius-sm);
	color         : var(--drb-text-sec);
	font-family   : 'Courier New', monospace;
	font-size     : 11px;
	padding       : 5px 8px;
	transition    : border-color .15s;
}

.ecs-drb-map-expr:focus {
	outline      : none;
	border-color : var(--drb-border-focus);
}

.ecs-drb-map-expr:focus + .ecs-drb-map-tag-btn {
	border-color : var(--drb-border-focus);
}

.ecs-drb-map-tag-btn {
	flex-shrink   : 0;
	width         : 28px;
	background    : var(--drb-surface);
	border        : 1px solid var(--drb-border);
	border-radius : 0 var(--drb-radius-sm) var(--drb-radius-sm) 0;
	color         : #9747ff;
	font-size     : 13px;
	font-weight   : 600;
	cursor        : pointer;
	transition    : background .15s, border-color .15s;
}

.ecs-drb-map-tag-btn:hover:not(:disabled) {
	background   : var(--drb-chip-active);
	border-color : var(--drb-chip-active-border);
}

.ecs-drb-map-tag-btn:disabled { opacity: .35; cursor: not-allowed; }

.ecs-drb-map-opts {
	display     : flex;
	flex-wrap   : wrap;
	gap         : 4px;
	align-items : center;
}

.ecs-drb-map-opts input[type="text"] {
	width         : 60px;
	background    : var(--drb-white);
	border        : 1px solid var(--drb-border);
	border-radius : var(--drb-radius-sm);
	color         : var(--drb-text-sec);
	font-family   : var(--drb-font);
	font-size     : 11px;
	padding       : 4px 5px;
	transition    : border-color .15s;
}

.ecs-drb-map-opts input:focus {
	outline      : none;
	border-color : var(--drb-border-focus);
}

.ecs-drb-map-skip {
	display     : flex;
	align-items : center;
	gap         : 4px;
	font-size   : 11px;
	color       : var(--drb-text-ter);
	cursor      : pointer;
	white-space : nowrap;
}

/* ── Tag Picker panel ────────────────────────────────────────────────────── */

#ecs-drb-tag-picker {
	display        : none;
	position       : fixed;
	z-index        : 1000001;
	width          : 260px;
	max-height     : 280px;
	background     : var(--drb-white);
	border         : 1px solid var(--drb-border);
	border-radius  : var(--drb-radius);
	box-shadow     : 0 4px 20px rgba(0,0,0,.12);
	flex-direction : column;
	overflow       : hidden;
}

#ecs-drb-tag-picker.ecs-drb-tp-open { display: flex; }

.ecs-drb-tp-search {
	padding       : 8px;
	border-bottom : 1px solid var(--drb-border);
	flex-shrink   : 0;
}

.ecs-drb-tp-search-input {
	width         : 100%;
	background    : var(--drb-surface);
	border        : 1px solid var(--drb-border);
	border-radius : var(--drb-radius-sm);
	color         : var(--drb-text-sec);
	font-family   : var(--drb-font);
	font-size     : 12px;
	padding       : 5px 8px;
	box-sizing    : border-box;
}

.ecs-drb-tp-search-input:focus {
	outline      : none;
	border-color : var(--drb-border-focus);
}

.ecs-drb-tp-list {
	overflow-y : auto;
	flex       : 1;
	padding    : 4px 0;
}

.ecs-drb-tp-item {
	display     : flex;
	align-items : center;
	gap         : 8px;
	width       : 100%;
	padding     : 5px 10px;
	background  : none;
	border      : none;
	cursor      : pointer;
	text-align  : left;
	transition  : background .1s;
	font-family : var(--drb-font);
}

.ecs-drb-tp-item:hover { background: var(--drb-tag-bg); }

.ecs-drb-tp-chip {
	flex-shrink   : 0;
	padding       : 1px 6px;
	background    : var(--drb-tag-bg);
	border        : 1px solid var(--drb-tag-border);
	border-radius : var(--drb-radius-sm);
	color         : var(--drb-tag-text);
	font-family   : 'Courier New', monospace;
	font-size     : 10px;
	white-space   : nowrap;
}

.ecs-drb-tp-label {
	font-size     : 12px;
	color         : var(--drb-text-sec);
	overflow      : hidden;
	text-overflow : ellipsis;
	white-space   : nowrap;
}

.ecs-drb-tp-empty {
	padding     : 12px;
	font-size   : 12px;
	color       : var(--drb-text-ter);
	text-align  : center;
	font-family : var(--drb-font);
	margin      : 0;
}

/* ── Presets tab ─────────────────────────────────────────────────────────── */

.ecs-drb-save-preset {
	display       : flex;
	gap           : 6px;
	margin-bottom : 16px;
}

.ecs-drb-preset-name-input {
	flex          : 1;
	background    : var(--drb-white);
	border        : 1px solid var(--drb-border);
	border-radius : var(--drb-radius-sm);
	color         : var(--drb-text-sec);
	font-family   : var(--drb-font);
	font-size     : 12px;
	padding       : 5px 8px;
	transition    : border-color .15s;
}

.ecs-drb-preset-name-input:focus {
	outline      : none;
	border-color : var(--drb-border-focus);
}

.ecs-drb-preset-list { display: flex; flex-direction: column; gap: 4px; }

.ecs-drb-preset-item {
	display       : flex;
	align-items   : center;
	gap           : 8px;
	padding       : 8px 10px;
	background    : var(--drb-white);
	border        : 1px solid var(--drb-border);
	border-radius : var(--drb-radius-sm);
}

.ecs-drb-preset-name { flex: 1; font-size: 12px; color: var(--drb-text); font-family: var(--drb-font); }

.ecs-drb-btn-save-preset {
	background   : var(--drb-surface);
	border-color : var(--drb-border);
	color        : var(--drb-text-sec);
}

.ecs-drb-btn-save-preset:hover:not(:disabled) {
	border-color : #9747ff;
	color        : #7e22ce;
	background   : var(--drb-tag-bg);
}

.ecs-drb-btn-load-preset {
	padding       : 3px 10px;
	background    : var(--drb-surface);
	border        : 1px solid var(--drb-border);
	border-radius : var(--drb-radius-sm);
	color         : var(--drb-text-sec);
	font-family   : var(--drb-font);
	font-size     : 11px;
	cursor        : pointer;
}

.ecs-drb-btn-load-preset:hover { border-color: #9747ff; color: #7e22ce; background: #fdf4ff; }

.ecs-drb-btn-delete-preset {
	background  : none;
	border      : none;
	color       : var(--drb-text-ter);
	cursor      : pointer;
	font-size   : 15px;
	line-height : 1;
	padding     : 2px 4px;
	border-radius: 50%;
}

.ecs-drb-btn-delete-preset:hover { color: #dc2626; background: #fef2f2; }

/* ── Binding tab ─────────────────────────────────────────────────────────── */

.ecs-drb-binding-status {
	padding       : 10px 14px;
	background    : var(--drb-surface);
	border        : 1px solid var(--drb-border);
	border-radius : var(--drb-radius-sm);
	font-size     : 12px;
	color         : var(--drb-text-sec);
	margin-bottom : 12px;
	font-family   : var(--drb-font);
}

.ecs-drb-binding-status--active {
	background   : #f0fdf4;
	border-color : #bbf7d0;
	color        : #15803d;
}

.ecs-drb-binding-actions { display: flex; gap: 6px; margin-bottom: 12px; }

.ecs-drb-binding-help {
	font-size   : 12px;
	color       : var(--drb-text-ter);
	line-height : 1.6;
	margin      : 0;
	font-family : var(--drb-font);
}