/**
 * eBay template mapping (EBAY-07).
 *
 * @package MOMCS_Sync
 */

.momcs-ebay-template-mapping {
	max-width: 960px;
}

.momcs-template-mapping-ebay-col {
	flex: 1;
	margin-left: 10px;
}

.momcs-category-chip-ebay {
	background: #dbeafe;
	color: #1e40af;
	border: 1px solid #bfdbfe;
	max-width: 600px;
	text-wrap: auto;
}

.momcs-category-chip .momcs-schedule-card-logo--ebay {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.momcs-ebay-tm-actions-toolbar,
.momcs-ebay-tm-save-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

/* Toolbar buttons: same height and radius as category row controls */
.momcs-ebay-template-mapping .momcs-ebay-tm-actions-toolbar .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 36px;
	min-height: 36px;
	padding: 0 14px;
	margin: 0;
	line-height: 1;
	border-radius: 6px;
	font-size: 13px;
	vertical-align: middle;
}

.momcs-ebay-tm-section {
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid #dcdcde;
}

.momcs-ebay-tm-section-title {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

/**
 * Category row: both columns use MOMCS_SearchableSelect (amazon-template-mapping.css).
 */
.momcs-ebay-template-mapping .momcs-template-mapping-row {
	align-items: stretch;
}

.momcs-ebay-template-mapping .momcs-template-mapping-wc-col,
.momcs-ebay-template-mapping .momcs-template-mapping-ebay-col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.momcs-ebay-template-mapping .momcs-template-mapping-wc-col .momcs-searchable-wrapper,
.momcs-ebay-template-mapping .momcs-template-mapping-ebay-col .momcs-searchable-wrapper {
	width: 100%;
	max-width: 100%;
}

.momcs-ebay-status {
	margin-left: 8px;
}

.momcs-ebay-status--error {
	color: #b32d2e;
}

/*
 * Let SearchableSelect dropdowns extend past the table boundary on eBay mapping rows.
 * The shared table skin uses overflow hidden for rounded corners, which clips open menus.
 */
.momcs-ebay-template-mapping .momcs-field-mapping-table {
	table-layout: fixed;
	overflow: visible;
}

.momcs-ebay-template-mapping .momcs-field-mapping-table th:first-child,
.momcs-ebay-template-mapping .momcs-field-mapping-table td:first-child {
	width: 44%;
}

.momcs-ebay-template-mapping .momcs-field-mapping-table th:last-child,
.momcs-ebay-template-mapping .momcs-field-mapping-table td:last-child {
	width: 56%;
}

.momcs-ebay-template-mapping .momcs-field-mapping-table tbody tr,
.momcs-ebay-template-mapping .momcs-field-mapping-table tbody td {
	position: relative;
	overflow: visible;
}

.momcs-ebay-template-mapping #momcs-ebay-field-mapping-rows select.momcs-mapping-select {
	display: none !important;
}

.momcs-ebay-template-mapping #momcs-ebay-field-mapping-rows .momcs-searchable-wrapper {
	display: flex;
	width: 100% !important;
	min-width: 0;
	height: 38px;
	margin: 0;
	background: #fff;
	box-shadow: none;
	z-index: auto;
}

.momcs-ebay-template-mapping #momcs-ebay-field-mapping-rows .momcs-searchable-input,
.momcs-ebay-template-mapping #momcs-ebay-field-mapping-rows .momcs-searchable-selected-display {
	min-width: 0;
	width: auto;
	background: none !important;
}

.momcs-ebay-template-mapping #momcs-ebay-field-mapping-rows .momcs-searchable-dropdown {
	z-index: 1005;
}

.momcs-ebay-template-mapping #momcs-ebay-field-mapping-rows .momcs-searchable-wrapper:focus-within,
.momcs-ebay-template-mapping #momcs-ebay-field-mapping-rows .momcs-searchable-wrapper:has(.momcs-searchable-dropdown.is-open) {
	z-index: 1006;
}

/* Inline errors under chips: readable notice instead of plain text */
#momcs-ebay-template-feedback.momcs-ebay-status--error,
.momcs-ebay-template-feedback.momcs-ebay-status--error {
	display: block;
	margin: 8px 0 0;
	padding: 8px 12px;
	background: #fcf0f1;
	border: 1px solid #f0b0b4;
	border-left-width: 4px;
	border-left-color: #d63638;
	border-radius: 4px;
	color: #1d2327;
	font-size: 13px;
	line-height: 1.45;
}

/* Empty state: loading hint + Add template always visible while list loads */
.momcs-ebay-template-list-loading {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
}

.momcs-ebay-template-list-loading .spinner {
	float: none;
	margin: 0;
}

/* In-page template name dialog (replaces window.prompt) */
.momcs-ebay-tm-dialog {
	display: none;
	position: fixed;
	z-index: 100000;
	inset: 0;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
}

.momcs-ebay-tm-dialog.momcs-is-open {
	display: flex;
}

.momcs-ebay-tm-dialog__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
}

.momcs-ebay-tm-dialog__panel {
	position: relative;
	z-index: 1;
	min-width: min(360px, 100%);
	max-width: 480px;
	padding: 20px 24px;
	background: #fff;
	border: 1px solid #c3c4c7;
	border-radius: 4px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.momcs-ebay-tm-dialog__title {
	margin: 0 0 12px;
	padding: 0;
	font-size: 16px;
	line-height: 1.4;
}

.momcs-ebay-tm-dialog__field {
	margin: 0 0 16px;
}

.momcs-ebay-tm-dialog__field label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.momcs-ebay-tm-dialog__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Merchant locations section (template mapping) — mirrors eBay policies table UI */
.momcs-ebay-merchant-locations-section {
	margin-top: 24px;
}

.momcs-ebay-tm-selected-location {
	margin: 0 0 12px;
	padding: 10px 12px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}

.momcs-ebay-merchant-location-selected-label {
	font-weight: 500;
}

.momcs-ebay-location-row--selected td {
	background-color: #e7f5fe !important;
}

.momcs-ebay-merchant-locations-section .momcs-ebay-policy-editor-wrap {
	margin-top: 16px;
	padding: 16px;
	border: 1px solid #dcdcde;
	border-radius: 4px;
	background: #fff;
}
