/*!
 * TPMeta Customizer Parity
 * ----------------------------------------------------------------------------
 * Brings the FULL option-panel UI to the Customizer for the two field widgets
 * whose styles only live in tpmeta-options.css (typography + radio_image).
 *
 * Every rule below is auto-prefixed with `.wp-customizer` so the styles can
 * ONLY match inside the WP Customizer pane — they CANNOT affect the options
 * page, the metabox screen, the front-end, or any other admin context.
 *
 * The Customizer field control wraps its template in <div class="tpmeta-panel-field">
 * (see TPMeta_Customize_Field_Control::render_content), so the `.tpmeta-panel-field`
 * descendant selectors used by the option panel apply unchanged.
 *
 * CSS variables (--tp-*) are normally declared on `.tpmeta-options-wrap` which
 * does not exist in the Customizer DOM — we re-declare them at the top of this
 * file so the ported rules can resolve them.
 * ----------------------------------------------------------------------------
 */

/* CSS variables — same tokens as the option panel, scoped to the Customizer
   so they can never leak into the front-end or any other admin page. */
.wp-customizer .tpmeta-panel-field {
	--tp-blue:      #3362FF;
	--tp-blue-lt:   #eef2ff;
	--tp-purple:    #5F4AFE;
	--tp-text:      #010F1C;
	--tp-muted:     #6b7280;
	--tp-border:    #e5e7eb;
	--tp-bg:        #f4f6fb;
	--tp-white:     #ffffff;
	--tp-danger:    #d63638;
	--tp-success:   #1a8455;
	--tp-radius:    10px;
	--tp-radius-sm: 6px;
}

/* ===== Radio Image (ported from tpmeta-options.css §radio-image) ============
   Customizer sidebar is ~300px wide. The options-page layout puts cards in
   a single nowrap row (each flexing to equal share), which collapses thumbs
   to slivers here. Stack cards vertically so every image renders at the
   full pane width. DOM/names/value unchanged. */
.wp-customizer .tpmeta-panel-field .tm-ri-wrap {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 10px;
	padding: 4px 2px;
	align-items: stretch;
}

/* Empty state */
.wp-customizer .tpmeta-panel-field .tm-ri-empty {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	background: var(--tp-bg);
	border: 1.5px dashed var(--tp-border);
	border-radius: var(--tp-radius-sm);
	color: var(--tp-muted);
	font-size: 12px;
}
.wp-customizer .tpmeta-panel-field .tm-ri-empty .dashicons {
	font-size: 20px; width: 20px; height: 20px; opacity: .4; flex-shrink: 0;
}
.wp-customizer .tpmeta-panel-field .tm-ri-empty p { margin: 0; }

/* Card — one full-width block per option, stacked vertically */
.wp-customizer .tpmeta-panel-field .tm-ri-card {
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	cursor: pointer;
	user-select: none;
	transition: transform .22s cubic-bezier(.34,.95,.64,1);
}
.wp-customizer .tpmeta-panel-field .tm-ri-card:hover { transform: translateY(-2px); }

/* Hide native radio input */
.wp-customizer .tpmeta-panel-field .tm-ri-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0; height: 0;
	pointer-events: none;
}

/* Thumbnail wrapper — full pane width, taller so the image is readable */
.wp-customizer .tpmeta-panel-field .tm-ri-thumb {
	position: relative;
	display: block;
	width: 100%;
	height: 40px;
	border-radius: var(--tp-radius-sm);
	overflow: hidden;
	border: 2.5px solid var(--tp-border);
	background: var(--tp-bg);
	transition:
		border-color .22s cubic-bezier(.34,.95,.64,1),
		box-shadow   .22s cubic-bezier(.34,.95,.64,1);
}
.wp-customizer .tpmeta-panel-field .tm-ri-thumb img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform .3s ease;
}
.wp-customizer .tpmeta-panel-field .tm-ri-card:hover .tm-ri-thumb img { transform: scale(1.05); }

/* No-image placeholder */
.wp-customizer .tpmeta-panel-field .tm-ri-thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.wp-customizer .tpmeta-panel-field .tm-ri-thumb-placeholder .dashicons {
	font-size: 18px; width: 18px; height: 18px;
	color: var(--tp-muted); opacity: .3;
}

/* Checkmark badge — springs in when selected */
.wp-customizer .tpmeta-panel-field .tm-ri-badge {
	position: absolute;
	top: 6px; right: 6px;
	display: flex;
	opacity: 0;
	transform: scale(0.3) rotate(-25deg);
	transition:
		opacity   .22s cubic-bezier(.34,.95,.64,1),
		transform .28s cubic-bezier(.34,.95,.64,1);
	filter: drop-shadow(0 1px 4px rgba(0,0,0,.22));
	pointer-events: none;
	z-index: 2;
}

/* Hover ring */
.wp-customizer .tpmeta-panel-field .tm-ri-card:hover .tm-ri-thumb {
	border-color: rgba(51,98,255,.5);
	box-shadow: 0 0 0 3px rgba(51,98,255,.10);
}

/* Active / selected */
.wp-customizer .tpmeta-panel-field .tm-ri-card.is-active .tm-ri-thumb,
.wp-customizer .tpmeta-panel-field .tm-ri-card:has(input:checked) .tm-ri-thumb {
	border-color: var(--tp-blue);
	box-shadow:
		0 0 0 3.5px rgba(51,98,255,.25),
		0 6px 20px rgba(51,98,255,.18);
}
.wp-customizer .tpmeta-panel-field .tm-ri-card.is-active .tm-ri-badge,
.wp-customizer .tpmeta-panel-field .tm-ri-card:has(input:checked) .tm-ri-badge {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}
.wp-customizer .tpmeta-panel-field .tm-ri-card.is-active,
.wp-customizer .tpmeta-panel-field .tm-ri-card:has(input:checked) { transform: translateY(-3px); }

/* Label */
.wp-customizer .tpmeta-panel-field .tm-ri-label {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	font-weight: 600;
	color: var(--tp-muted);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	transition: color .2s ease;
}
.wp-customizer .tpmeta-panel-field .tm-ri-card:hover .tm-ri-label { color: var(--tp-blue); }
.wp-customizer .tpmeta-panel-field .tm-ri-card.is-active .tm-ri-label,
.wp-customizer .tpmeta-panel-field .tm-ri-card:has(input:checked) .tm-ri-label {
	color: var(--tp-blue);
	font-weight: 700;
}

/* ===== Typography (ported from tpmeta-options.css §typography) ============= */
.wp-customizer .tpmeta-panel-field .tm-ri-card:has(input:checked) .tm-ri-thumb {
	border-color: var(--tp-blue);
	box-shadow:
		0 0 0 3.5px rgba(51,98,255,.25),
		0 6px 20px rgba(51,98,255,.18);
}
.wp-customizer .tpmeta-panel-field .tm-ri-card.is-active .tm-ri-badge,
.wp-customizer .tpmeta-panel-field .tm-ri-card:has(input:checked) .tm-ri-badge {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}
.wp-customizer .tpmeta-panel-field .tm-ri-card.is-active,
.wp-customizer .tpmeta-panel-field .tm-ri-card:has(input:checked) { transform: translateY(-3px); }

/* Label */
.wp-customizer .tpmeta-panel-field .tm-ri-label {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	font-weight: 600;
	color: var(--tp-muted);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	transition: color .2s ease;
}
.wp-customizer .tpmeta-panel-field .tm-ri-card:hover .tm-ri-label { color: var(--tp-blue); }
.wp-customizer .tpmeta-panel-field .tm-ri-card.is-active .tm-ri-label,
.wp-customizer .tpmeta-panel-field .tm-ri-card:has(input:checked) .tm-ri-label {
	color: var(--tp-blue);
	font-weight: 700;
}

/* ============================================================
   Dimension field
   ============================================================ */
.wp-customizer .tpmeta-panel-field .tm-dimension-wrap {
	display: inline-flex;
	align-items: stretch;
	max-width: 180px;
	width: 100%;
}
.wp-customizer .tpmeta-panel-field .tm-dim-num {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px !important;
	padding: 0 10px !important;
	border: 1.5px solid var(--tp-border) !important;
	border-right: none !important;
	border-radius: var(--tp-radius-sm) 0 0 var(--tp-radius-sm) !important;
	font-size: 13px !important;
	box-sizing: border-box !important;
	transition: border-color .15s !important;
}
.wp-customizer .tpmeta-panel-field .tm-dim-num:focus {
	border-color: var(--tp-blue) !important;
	outline: none !important;
	box-shadow: -3px 0 0 rgba(51,98,255,.12), 0 -3px 0 rgba(51,98,255,.12), 0 3px 0 rgba(51,98,255,.12) !important;
}
.wp-customizer .tpmeta-panel-field .tm-dim-unit {
	flex: 0 0 62px;
	width: 62px !important;
	height: 40px !important;
	padding: 0 6px !important;
	border: 1.5px solid var(--tp-border) !important;
	border-radius: 0 var(--tp-radius-sm) var(--tp-radius-sm) 0 !important;
	font-size: 12px !important;
	font-weight: 600;
	color: var(--tp-muted);
	background: var(--tp-bg) !important;
	box-sizing: border-box !important;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	text-align: center;
}
.wp-customizer .tpmeta-panel-field .tm-dim-unit:focus {
	border-color: var(--tp-blue) !important;
	outline: none !important;
}

/* Slider variant — [num | unit] pill on top, range below. Stacks naturally
   in the narrow Customizer pane. Hidden input + names unchanged. */
.wp-customizer .tpmeta-panel-field .tm-dimension-wrap.tm-dimension-slider {
	display: flex !important;
	flex-direction: column;
	gap: 8px;
	max-width: 100%;
	width: 100%;
	align-items: stretch;
}
.wp-customizer .tpmeta-panel-field .tm-dimension-wrap.tm-dimension-slider .tm-dim-input-pair {
	display: inline-flex;
	align-items: stretch;
	max-width: 180px;
}
/* Input transparent — gradient lives on the track pseudo-element so WP's
   sidebar input bg reset can't wipe it. */
.wp-customizer .tpmeta-panel-field .tm-dim-range {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 100%;
	height: 22px;
	margin: 4px 0 8px;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none;
	cursor: pointer;
}
.wp-customizer .tpmeta-panel-field .tm-dim-range::-webkit-slider-runnable-track {
	height: 6px;
	background: linear-gradient(90deg, var(--tp-blue) 0%, var(--tp-purple) 100%);
	border-radius: 999px;
	border: 0;
}
.wp-customizer .tpmeta-panel-field .tm-dim-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	margin-top: -5px;
	border-radius: 50%;
	background: var(--tp-white);
	border: 3px solid var(--tp-blue);
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(51,98,255,.35);
	transition: transform .15s ease, box-shadow .15s ease;
}
.wp-customizer .tpmeta-panel-field .tm-dim-range::-webkit-slider-thumb:hover {
	transform: scale(1.12);
	box-shadow: 0 3px 10px rgba(51,98,255,.5);
}
.wp-customizer .tpmeta-panel-field .tm-dim-range::-moz-range-track {
	height: 6px;
	background: linear-gradient(90deg, var(--tp-blue) 0%, var(--tp-purple) 100%);
	border-radius: 999px;
	border: 0;
}
.wp-customizer .tpmeta-panel-field .tm-dim-range::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--tp-white);
	border: 3px solid var(--tp-blue);
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(51,98,255,.35);
}

/* ============================================================
   Typography field — table-style refactor
   ------------------------------------------------------------
   Structure:
   .tptypo-wrap            outer card
     └ .tptypo-section     section card (head + rows)
        ├ .tptypo-section-head   section title row
        └ .tptypo-row            label | control grid row
   Class hooks consumed by JS are unchanged.
   ============================================================ */

.wp-customizer .tpmeta-panel-field .tptypo-wrap {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius);
	overflow: hidden;
	background: var(--tp-white);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

/* ── Sections ───────────────────────────────────────────── */
.wp-customizer .tpmeta-panel-field .tptypo-section {
	border-bottom: 1px solid var(--tp-border);
}
.wp-customizer .tpmeta-panel-field .tptypo-section:last-child { border-bottom: 0; }

.wp-customizer .tpmeta-panel-field .tptypo-section-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 10px 16px;
	background: linear-gradient(180deg, rgba(15,23,42,.025) 0%, rgba(15,23,42,.01) 100%);
	border-bottom: 1px solid var(--tp-border);
}
.wp-customizer .tpmeta-panel-field .tptypo-section-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--tp-text);
}
.wp-customizer .tpmeta-panel-field .tptypo-section-hint {
	font-size: 11px;
	color: var(--tp-muted);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

/* ── Row: label | control grid ──────────────────────────── */
.wp-customizer .tpmeta-panel-field .tptypo-row {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 16px;
	align-items: center;
	padding: 10px 16px;
	border-bottom: 1px solid rgba(15, 23, 42, .04);
}
.wp-customizer .tpmeta-panel-field .tptypo-row:last-child { border-bottom: 0; }
.wp-customizer .tpmeta-panel-field .tptypo-row-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--tp-text);
	line-height: 1.4;
}
.wp-customizer .tpmeta-panel-field .tptypo-row-ctrl {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Tag rows breathe slightly less vertically */
.wp-customizer .tpmeta-panel-field .tptypo-row--tags { padding-top: 8px; padding-bottom: 8px; }

@media (max-width: 640px) {
	.wp-customizer .tpmeta-panel-field .tptypo-row {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

/* ── Source tabs ────────────────────────────────────────── */
.wp-customizer .tpmeta-panel-field .tptypo-source-tabs {
	display: inline-flex;
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius-sm);
	overflow: hidden;
	background: var(--tp-bg);
	width: fit-content;
	max-width: 100%;
}
.wp-customizer .tpmeta-panel-field .tptypo-src-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 14px;
	font-size: 12px;
	font-weight: 600;
	color: var(--tp-muted);
	background: none;
	border: 0;
	border-right: 1px solid var(--tp-border);
	cursor: pointer;
	transition: color .15s, background .15s;
}
.wp-customizer .tpmeta-panel-field .tptypo-src-tab:last-child { border-right: 0; }
.wp-customizer .tpmeta-panel-field .tptypo-src-tab:hover { color: var(--tp-blue); background: var(--tp-blue-lt); }
.wp-customizer .tpmeta-panel-field .tptypo-src-tab:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--tp-blue);
}
.wp-customizer .tpmeta-panel-field .tptypo-src-tab.is-active {
	color: #fff;
	background: linear-gradient(135deg, var(--tp-blue) 0%, var(--tp-purple) 100%);
}
.wp-customizer .tpmeta-panel-field .tptypo-src-tab svg { flex-shrink: 0; }

/* ── Panels (only the active source's panel is visible) ── */
.wp-customizer .tpmeta-panel-field .tptypo-panel {
	display: block;
}
.wp-customizer .tpmeta-panel-field .tptypo-panel[hidden] { display: none; }

/* ── Searchable Google Fonts combobox ───────────────────── */
.wp-customizer .tpmeta-panel-field .tptypo-combo {
	position: relative;
	width: 100%;
	max-width: 380px;
}
.wp-customizer .tpmeta-panel-field .tptypo-combo-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	height: 36px;
	padding: 0 12px;
	background: var(--tp-white);
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius-sm);
	color: var(--tp-text);
	font-size: 13px;
	cursor: pointer;
	text-align: left;
	transition: border-color .15s, box-shadow .15s;
}
.wp-customizer .tpmeta-panel-field .tptypo-combo-trigger:hover {
	border-color: var(--tp-blue);
}
.wp-customizer .tpmeta-panel-field .tptypo-combo-trigger:focus-visible,
.wp-customizer .tpmeta-panel-field .tptypo-combo-trigger.is-open {
	border-color: var(--tp-blue);
	box-shadow: 0 0 0 3px rgba(51,98,255,.12);
	outline: none;
}
.wp-customizer .tpmeta-panel-field .tptypo-combo-current {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
}
.wp-customizer .tpmeta-panel-field .tptypo-combo-current.is-placeholder {
	color: var(--tp-muted);
	font-style: italic;
	font-family: inherit !important;
}
.wp-customizer .tpmeta-panel-field .tptypo-combo-caret {
	flex-shrink: 0;
	color: var(--tp-muted);
	transition: transform .18s;
}
.wp-customizer .tpmeta-panel-field .tptypo-combo-trigger.is-open .tptypo-combo-caret {
	transform: rotate(180deg);
	color: var(--tp-blue);
}

/* Popover */
.wp-customizer .tpmeta-panel-field .tptypo-combo-pop {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 50;
	background: var(--tp-white);
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius-sm);
	box-shadow: 0 12px 30px -8px rgba(15, 23, 42, .18), 0 4px 10px rgba(15, 23, 42, .06);
	padding: 8px;
	min-width: 280px;
}

/* Search input inside popover */
.wp-customizer .tpmeta-panel-field .tptypo-gf-search-wrap {
	position: relative;
	margin-bottom: 8px;
}
.wp-customizer .tpmeta-panel-field .tptypo-gf-search-icon {
	position: absolute;
	left: 10px; top: 50%;
	transform: translateY(-50%);
	color: var(--tp-muted);
	pointer-events: none;
	display: flex;
}
.wp-customizer .tpmeta-panel-field .tptypo-gf-search {
	width: 100%;
	height: 32px;
	padding: 0 10px 0 32px;
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius-sm);
	font-size: 12px;
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
}
.wp-customizer .tpmeta-panel-field .tptypo-gf-search:focus {
	border-color: var(--tp-blue);
	box-shadow: 0 0 0 3px rgba(51,98,255,.12);
	outline: none;
}

/* Dropdown list — items are stacked rows with a sample */
.wp-customizer .tpmeta-panel-field .tptypo-gf-list {
	display: flex;
	flex-direction: column;
	max-height: 260px;
	overflow-y: auto;
	gap: 2px;
}
.wp-customizer .tpmeta-panel-field .tptypo-gf-list::-webkit-scrollbar { width: 6px; }
.wp-customizer .tpmeta-panel-field .tptypo-gf-list::-webkit-scrollbar-thumb { background: var(--tp-border); border-radius: 3px; }

.wp-customizer .tpmeta-panel-field .tptypo-gf-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 7px 10px;
	font-size: 13px;
	border: 1px solid transparent;
	border-radius: var(--tp-radius-sm);
	background: transparent;
	cursor: pointer;
	color: var(--tp-text);
	text-align: left;
	transition: background .12s, color .12s, border-color .12s;
	width: 100%;
}
.wp-customizer .tpmeta-panel-field .tptypo-gf-item-name {
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wp-customizer .tpmeta-panel-field .tptypo-gf-item-sample {
	flex-shrink: 0;
	font-size: 14px;
	color: var(--tp-muted);
	opacity: .8;
}
.wp-customizer .tpmeta-panel-field .tptypo-gf-item:hover {
	background: var(--tp-blue-lt);
	color: var(--tp-blue);
}
.wp-customizer .tpmeta-panel-field .tptypo-gf-item.is-active {
	background: linear-gradient(135deg, var(--tp-blue) 0%, var(--tp-purple) 100%);
	color: #fff;
}
.wp-customizer .tpmeta-panel-field .tptypo-gf-item.is-active .tptypo-gf-item-sample { color: rgba(255,255,255,.85); }

.wp-customizer .tpmeta-panel-field .tptypo-gf-empty {
	font-size: 12px; color: var(--tp-muted); padding: 12px 8px; text-align: center;
}

/* ── Custom font upload row ─────────────────────────────── */
.wp-customizer .tpmeta-panel-field .tptypo-custom-row {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
}
.wp-customizer .tpmeta-panel-field .tptypo-custom-preview {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12px;
	color: var(--tp-muted);
	padding: 0 12px;
	height: 36px;
	display: flex;
	align-items: center;
	background: var(--tp-bg);
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius-sm);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wp-customizer .tpmeta-panel-field .tptypo-upload-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	height: 36px !important;
	padding: 0 14px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	white-space: nowrap;
	flex-shrink: 0;
}
.wp-customizer .tpmeta-panel-field .tptypo-upload-remove {
	width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
	background: none; border: 1px solid var(--tp-border);
	border-radius: 50%; cursor: pointer; color: var(--tp-muted);
	font-size: 13px; transition: all .15s; flex-shrink: 0;
}
.wp-customizer .tpmeta-panel-field .tptypo-upload-remove:hover { background: #fbeaea; border-color: var(--tp-danger); color: var(--tp-danger); }

/* ── System fonts — rendered inside the .tptypo-combo popover ─────
   Buttons carry both .tptypo-gf-item AND .tptypo-system-btn. The
   .tptypo-gf-item rules above handle the look; this block resets the
   legacy pill rules so they don't conflict with dropdown rendering. */
.wp-customizer .tpmeta-panel-field .tptypo-gf-list .tptypo-system-btn {
	padding: 7px 10px;
	font-size: 13px;
	border: 1px solid transparent;
	border-radius: var(--tp-radius-sm);
	background: transparent;
	transform: none;
}
.wp-customizer .tpmeta-panel-field .tptypo-gf-list .tptypo-system-btn:hover {
	background: var(--tp-blue-lt);
	color: var(--tp-blue);
	border-color: transparent;
	transform: none;
}
.wp-customizer .tpmeta-panel-field .tptypo-gf-list .tptypo-system-btn.is-active {
	background: linear-gradient(135deg, var(--tp-blue) 0%, var(--tp-purple) 100%);
	color: #fff;
	border-color: transparent;
	box-shadow: none;
}

/* ── Generic inputs / selects inside tptypo ─────────────── */
.wp-customizer .tpmeta-panel-field .tptypo-input {
	height: 36px;
	padding: 0 12px;
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius-sm);
	font-size: 13px;
	color: var(--tp-text);
	background: var(--tp-white);
	box-sizing: border-box;
	width: 100%;
	max-width: 220px;
	transition: border-color .15s, box-shadow .15s;
}
.wp-customizer .tpmeta-panel-field .tptypo-input:focus {
	border-color: var(--tp-blue);
	box-shadow: 0 0 0 3px rgba(51,98,255,.12);
	outline: none;
}
.wp-customizer .tpmeta-panel-field .tptypo-num { text-align: center; }

/* Size number + unit combined control */
.wp-customizer .tpmeta-panel-field .tptypo-size-wrap {
	display: inline-flex;
	width: 180px;
	max-width: 100%;
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius-sm);
	overflow: hidden;
	background: var(--tp-white);
	transition: border-color .15s, box-shadow .15s;
}
.wp-customizer .tpmeta-panel-field .tptypo-size-wrap:focus-within {
	border-color: var(--tp-blue);
	box-shadow: 0 0 0 3px rgba(51,98,255,.12);
}
.wp-customizer .tpmeta-panel-field .tptypo-size-wrap .tptypo-input {
	flex: 1 1 auto;
	max-width: none;
	border: 0;
	border-radius: 0;
	box-shadow: none !important;
}
.wp-customizer .tpmeta-panel-field .tptypo-unit-sel {
	flex: 0 0 64px;
	height: 36px;
	border: 0;
	border-left: 1px solid var(--tp-border);
	border-radius: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--tp-text);
	background: var(--tp-bg)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%236b7280' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E")
		no-repeat right 8px center;
	cursor: pointer;
	padding: 0 20px 0 8px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	outline: none;
	transition: color .15s, background-color .15s;
}
.wp-customizer .tpmeta-panel-field .tptypo-unit-sel:hover {
	color: var(--tp-blue);
	background-color: var(--tp-blue-lt);
}

.wp-customizer .tpmeta-panel-field .tptypo-select {
	height: 36px;
	padding: 0 32px 0 12px;
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius-sm);
	font-size: 13px;
	color: var(--tp-text);
	background: var(--tp-white)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%236b7280' d='M0 0l5 7 5-7z'/%3E%3C/svg%3E")
		no-repeat right 12px center;
	appearance: none;
	width: 100%;
	max-width: 220px;
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
	cursor: pointer;
}
.wp-customizer .tpmeta-panel-field .tptypo-select:focus {
	border-color: var(--tp-blue);
	box-shadow: 0 0 0 3px rgba(51,98,255,.12);
	outline: none;
}

/* ── Toggle groups (Style / Transform) ──────────────────── */
.wp-customizer .tpmeta-panel-field .tptypo-toggle-grp label,
.wp-customizer .tpmeta-panel-field .tptypo-toggle {
	display: inline-flex !important;
	margin-bottom: 0 !important;
}
.wp-customizer .tpmeta-panel-field .tptypo-toggle-grp {
	display: inline-flex;
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius-sm);
	overflow: hidden;
	height: 36px;
	background: var(--tp-white);
	width: fit-content;
}
.wp-customizer .tpmeta-panel-field .tptypo-toggle {
	min-width: 56px;
	padding: 0 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--tp-muted);
	background: var(--tp-white);
	border-right: 1px solid var(--tp-border);
	cursor: pointer;
	transition: background .18s, color .18s;
	user-select: none;
}
.wp-customizer .tpmeta-panel-field .tptypo-toggle:last-child { border-right: 0; }
.wp-customizer .tpmeta-panel-field .tptypo-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.wp-customizer .tpmeta-panel-field .tptypo-toggle:hover { background: var(--tp-blue-lt); color: var(--tp-blue); }
.wp-customizer .tpmeta-panel-field .tptypo-toggle.is-active,
.wp-customizer .tpmeta-panel-field .tptypo-toggle:has(input:checked) {
	background: linear-gradient(135deg, var(--tp-blue) 0%, var(--tp-purple) 100%);
	color: #fff;
}
.wp-customizer .tpmeta-panel-field .tptypo-toggle:focus-within {
	box-shadow: inset 0 0 0 2px rgba(51,98,255,.45);
}

/* ── Color row ──────────────────────────────────────────── */
.wp-customizer .tpmeta-panel-field .tptypo-color-row {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.wp-customizer .tpmeta-panel-field .tptypo-color-native {
	width: 0; height: 0;
	opacity: 0;
	position: absolute;
	pointer-events: none;
}
.wp-customizer .tpmeta-panel-field .tptypo-color-swatch {
	width: 36px; height: 36px;
	flex-shrink: 0;
	border-radius: var(--tp-radius-sm);
	border: 1px solid var(--tp-border);
	cursor: pointer;
	transition: box-shadow .15s, transform .12s;
}
.wp-customizer .tpmeta-panel-field .tptypo-color-swatch:hover {
	box-shadow: 0 0 0 3px rgba(51,98,255,.15);
	transform: scale(1.03);
}
.wp-customizer .tpmeta-panel-field .tptypo-color-text {
	flex: 0 0 160px;
	width: 160px;
	max-width: 160px;
	font-family: ui-monospace, Menlo, Consolas, monospace !important;
	font-size: 12px !important;
	letter-spacing: .04em;
}

/* ── Apply To: tag rows, selector input, active pills ───── */
.wp-customizer .tpmeta-panel-field .tptypo-tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.wp-customizer .tpmeta-panel-field .tptypo-tag-btn {
	padding: 4px 11px;
	font-size: 12px;
	font-weight: 600;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	border: 1px solid var(--tp-border);
	border-radius: 16px;
	background: var(--tp-bg);
	color: var(--tp-text);
	cursor: pointer;
	transition: border-color .15s, background .15s, color .15s, transform .12s, box-shadow .15s;
	white-space: nowrap;
	line-height: 1.4;
}
.wp-customizer .tpmeta-panel-field .tptypo-tag-btn:hover {
	border-color: var(--tp-blue);
	background: var(--tp-blue-lt);
	color: var(--tp-blue);
	transform: translateY(-1px);
}
.wp-customizer .tpmeta-panel-field .tptypo-tag-btn.is-active {
	border-color: transparent;
	background: linear-gradient(135deg, var(--tp-blue) 0%, var(--tp-purple) 100%);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(51,98,255,.28);
}
.wp-customizer .tpmeta-panel-field .tptypo-tag-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(51,98,255,.25);
}

/* Selector input row */
.wp-customizer .tpmeta-panel-field .tptypo-selector-row {
	display: flex;
	align-items: center;
	gap: 0;
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius-sm);
	overflow: hidden;
	background: var(--tp-white);
	transition: border-color .15s, box-shadow .15s;
}
.wp-customizer .tpmeta-panel-field .tptypo-selector-row:focus-within {
	border-color: var(--tp-blue);
	box-shadow: 0 0 0 3px rgba(51,98,255,.12);
}
.wp-customizer .tpmeta-panel-field .tptypo-selector-icon {
	display: flex;
	align-items: center;
	padding: 0 8px 0 12px;
	color: var(--tp-muted);
	flex-shrink: 0;
}
.wp-customizer .tpmeta-panel-field .tptypo-selector-input {
	flex: 1 1 auto;
	max-width: none !important;
	height: 36px;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: ui-monospace, Menlo, Consolas, monospace !important;
	font-size: 12px !important;
	padding-left: 0 !important;
	background: transparent !important;
}
.wp-customizer .tpmeta-panel-field .tptypo-selector-clear {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	border-left: 1px solid var(--tp-border);
	cursor: pointer;
	font-size: 13px;
	color: var(--tp-muted);
	transition: background .12s, color .12s;
}
.wp-customizer .tpmeta-panel-field .tptypo-selector-clear:hover {
	background: #fbeaea;
	color: var(--tp-danger);
}

/* Active selector pills */
.wp-customizer .tpmeta-panel-field .tptypo-selector-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 0;
}
.wp-customizer .tpmeta-panel-field .tptypo-selector-pills:empty { display: none; }
.wp-customizer .tpmeta-panel-field .tptypo-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 4px 3px 10px;
	background: var(--tp-blue-lt);
	border: 1px solid rgba(51,98,255,.2);
	border-radius: 20px;
	font-size: 12px;
	color: var(--tp-blue);
}
.wp-customizer .tpmeta-panel-field .tptypo-pill code {
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 12px;
	background: none;
	color: inherit;
	padding: 0;
}
.wp-customizer .tpmeta-panel-field .tptypo-pill-remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background: rgba(51,98,255,.15);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	font-size: 12px;
	line-height: 1;
	color: var(--tp-blue);
	transition: background .12s, color .12s;
	padding: 0;
}
.wp-customizer .tpmeta-panel-field .tptypo-pill-remove:hover {
	background: var(--tp-danger);
	color: #fff;
}

/* ── Preview card ───────────────────────────────────────── */
.wp-customizer .tpmeta-panel-field .tptypo-preview-wrap {
	background: linear-gradient(135deg, rgba(51,98,255,.04) 0%, rgba(95,74,254,.03) 100%);
}
.wp-customizer .tpmeta-panel-field .tptypo-preview-card {
	margin: 12px 16px 16px;
	padding: 20px 22px;
	background: var(--tp-white);
	border: 1px dashed var(--tp-border);
	border-radius: var(--tp-radius);
	position: relative;
	overflow: hidden;
}
.wp-customizer .tpmeta-panel-field .tptypo-preview-text {
	font-size: 22px;
	line-height: 1.45;
	color: var(--tp-text);
	min-height: 36px;
	word-break: break-word;
	transition: all .25s ease;
}
.wp-customizer .tpmeta-panel-field .tptypo-preview-meta {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(15, 23, 42, .06);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tp-muted);
}

/* ============================================================
   Typography — sidebar compaction (≈300px Customizer pane)
   ------------------------------------------------------------
   • Drops source-tab icons, section headers, and most row
     labels so the control fits a narrow pane.
   • Restores labels for Size / Weight / Line Height /
     Text Transform — these inputs are too generic to identify
     without a label.
   • Hides the Apply-To tag-button rows; the companion JS in
     tpmeta-customizer-fields.js mounts a <select> per group
     that drives the same .tptypo-tag-btn click pipeline, so
     selectors / pills / saved value are unchanged.
   ============================================================ */

/* 1) Icons inside the Google / Custom / System tabs */
.wp-customizer .tpmeta-panel-field .tptypo-source-tabs .tptypo-src-tab svg {
	display: none;
}
.wp-customizer .tpmeta-panel-field .tptypo-source-tabs .tptypo-src-tab {
	padding: 7px 10px;
	gap: 0;
}

/* 2) Section title bars ("Font Source", "Typography", "Apply To"…) */
.wp-customizer .tpmeta-panel-field .tptypo-wrap .tptypo-section-head {
	display: none;
}

/* 3) Row labels — single column by default, label hidden */
.wp-customizer .tpmeta-panel-field .tptypo-wrap .tptypo-row {
	grid-template-columns: 1fr;
	gap: 6px;
}
.wp-customizer .tpmeta-panel-field .tptypo-wrap .tptypo-row > .tptypo-row-label {
	display: none;
}

/* 3a) Restore label + 2-column grid for size / weight / line-height /
       text-transform rows. Targets the row by sniffing the control's
       suffix-ID (the typography template uses uid + '_size'/'_weight'/
       '_lh'/'_tx', and those suffixes are part of the documented
       contract). */
.wp-customizer .tpmeta-panel-field .tptypo-wrap .tptypo-row:has(.tptypo-row-ctrl [id$="_size"]),
.wp-customizer .tpmeta-panel-field .tptypo-wrap .tptypo-row:has(.tptypo-row-ctrl [id$="_weight"]),
.wp-customizer .tpmeta-panel-field .tptypo-wrap .tptypo-row:has(.tptypo-row-ctrl [id$="_lh"]),
.wp-customizer .tpmeta-panel-field .tptypo-wrap .tptypo-row:has(.tptypo-row-ctrl [id$="_tx"]) {
	grid-template-columns: 90px 1fr;
	gap: 10px;
	align-items: center;
}
.wp-customizer .tpmeta-panel-field .tptypo-wrap .tptypo-row:has(.tptypo-row-ctrl [id$="_size"]) > .tptypo-row-label,
.wp-customizer .tpmeta-panel-field .tptypo-wrap .tptypo-row:has(.tptypo-row-ctrl [id$="_weight"]) > .tptypo-row-label,
.wp-customizer .tpmeta-panel-field .tptypo-wrap .tptypo-row:has(.tptypo-row-ctrl [id$="_lh"]) > .tptypo-row-label,
.wp-customizer .tpmeta-panel-field .tptypo-wrap .tptypo-row:has(.tptypo-row-ctrl [id$="_tx"]) > .tptypo-row-label {
	display: block;
}

/* 4) Apply-To: hide the tag-button rows; the JS-mounted select
       replaces them. Tag-button DOM stays in place — its click handler
       still drives the selector text input and active-pill rendering. */
.wp-customizer .tpmeta-panel-field .tptypo-apply-wrap .tptypo-tag-row {
	display: none;
}

/* JS-injected dropdown wrapper holding one <select> per tag group */
.wp-customizer .tpmeta-panel-field .tptypo-tag-select-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.wp-customizer .tpmeta-panel-field .tptypo-tag-select-row {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 8px;
	align-items: center;
}
.wp-customizer .tpmeta-panel-field .tptypo-tag-select-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--tp-text);
}
.wp-customizer .tpmeta-panel-field .tptypo-tag-select {
	height: 32px;
	padding: 0 28px 0 10px;
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius-sm);
	font-size: 12px;
	color: var(--tp-text);
	background: var(--tp-white)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%236b7280' d='M0 0l5 7 5-7z'/%3E%3C/svg%3E")
		no-repeat right 10px center;
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
.wp-customizer .tpmeta-panel-field .tptypo-tag-select:focus {
	border-color: var(--tp-blue);
	box-shadow: 0 0 0 3px rgba(51,98,255,.12);
	outline: none;
}
.wp-customizer .tpmeta-panel-field .tptypo-tag-select option[data-active="1"] {
	font-weight: 700;
	color: var(--tp-blue);
}

/* ============================================================
   Button Set / Tabs / Radio Buttonset — segmented pill
   ------------------------------------------------------------
   Ported from tpmeta-options.css §"Button set / Tabs /
   Radio Buttonset". The field types route through the custom
   control in the Customizer (see TPMeta_Customizer::$field_map)
   so the same .tm-button-groups markup the options page emits
   lands inside .tpmeta-panel-field here. DOM/names/value
   unchanged.
   ============================================================ */
.wp-customizer .tpmeta-panel-field .tm-button-groups {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 3px;
	padding: 4px;
	background: linear-gradient(135deg, rgba(51,98,255,.06) 0%, rgba(95,74,254,.04) 100%);
	border-radius: calc(var(--tp-radius-sm) + 3px);
	border: 1.5px solid rgba(51,98,255,.18);
	box-shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 4px rgba(51,98,255,.07);
	max-width: 100%;
}

.wp-customizer .tpmeta-panel-field .tm-button-groups .tm-button-radio {
	display: inline-flex;
	align-items: center;
	border: 0 !important;
	margin: 0 !important;
	border-radius: var(--tp-radius-sm);
	cursor: pointer;
	transition:
		background  .22s cubic-bezier(.34,.95,.64,1),
		box-shadow  .22s cubic-bezier(.34,.95,.64,1),
		transform   .22s cubic-bezier(.34,.95,.64,1);
}

.wp-customizer .tpmeta-panel-field .tm-button-groups input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.wp-customizer .tpmeta-panel-field .tm-button-groups .tm-button-radio span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 7px 14px !important;
	font-size: 11px !important;
	font-weight: 600;
	color: var(--tp-muted);
	white-space: nowrap;
	user-select: none;
	letter-spacing: .01em;
	transition: color .22s cubic-bezier(.34,.95,.64,1);
	pointer-events: none;
}

.wp-customizer .tpmeta-panel-field .tm-button-groups .tm-button-radio:hover {
	background: rgba(51,98,255,.10);
	transform: translateY(-1px);
}
.wp-customizer .tpmeta-panel-field .tm-button-groups .tm-button-radio:hover span {
	color: var(--tp-blue);
}

.wp-customizer .tpmeta-panel-field .tm-button-groups .tm-button-radio:has(input:checked) {
	background: linear-gradient(135deg, var(--tp-blue) 0%, var(--tp-purple) 100%);
	box-shadow: 0 4px 16px rgba(51,98,255,.42), 0 1px 4px rgba(0,0,0,.14);
	transform: translateY(-1.5px) scale(1.03);
}
.wp-customizer .tpmeta-panel-field .tm-button-groups .tm-button-radio:has(input:checked) span {
	color: #fff;
}

/* Icon variant (radio_buttonset with dashicons) */
.wp-customizer .tpmeta-panel-field .tm-rbs-group .tm-button-radio .tm-rbs-icon {
	font-size: 14px;
	width: 14px;
	height: 14px;
	transition: transform .22s cubic-bezier(.34,.95,.64,1);
}
.wp-customizer .tpmeta-panel-field .tm-rbs-group .tm-button-radio:has(input:checked) .tm-rbs-icon {
	transform: scale(1.18);
}

/* ============================================================
   Spacing field — narrow-pane layout
   ------------------------------------------------------------
   Options-page styles put grid+footer side-by-side (≈280px),
   which doesn't fit cleanly in the 300px Customizer pane and
   was never ported into the parity layer, so the field was
   rendering as a vertical pile of full-width inputs with WP's
   default control labels glued on top of each one.
   Stack grid above footer; render the four sides as a tight
   4-column row. DOM/names/hidden inputs/JS contract unchanged.
   ============================================================ */
.select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 0 !important;
	float: left;
}
.wp-customizer .tpmeta-panel-field .tm-spacing-wrap {
	display: flex !important;
	flex-direction: row;
	gap: 8px;
	align-items: start;
	width: 100%;
	min-width: 0;
	flex-wrap: wrap;
}

.wp-customizer .tpmeta-panel-field .tm-spacing-grid {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	width: 65%;
}

.wp-customizer .tpmeta-panel-field .tm-spc-target label.tm-spc-target-label {
    margin-bottom: 7px;
    display: inline-block;
}
.wp-customizer .tpmeta-panel-field .tm-spacing-grid > * { width: auto; }

.wp-customizer .tpmeta-panel-field .tm-spc-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	max-width: none;
	min-width: 0;
}

/* Override WP's .customize-control input width: 100% — fine, but kill the
   default min-height + border styling so spinners look consistent. */
.wp-customizer .tpmeta-panel-field .tm-spacing-grid input[type="number"].tm-spc-num {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: 32px !important;
	margin: 0 !important;
	text-align: center !important;
	padding: 0 4px !important;
	font-size: 12px !important;
	color: var(--tp-text) !important;
	background: var(--tp-white) !important;
	border: 1.5px solid var(--tp-border) !important;
	border-radius: var(--tp-radius-sm) !important;
	box-sizing: border-box !important;
	box-shadow: none !important;
	appearance: textfield !important;
	-moz-appearance: textfield !important;
}
.wp-customizer .tpmeta-panel-field .tm-spacing-grid input[type="number"].tm-spc-num::-webkit-inner-spin-button,
.wp-customizer .tpmeta-panel-field .tm-spacing-grid input[type="number"].tm-spc-num::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.wp-customizer .tpmeta-panel-field .tm-spacing-grid input[type="number"].tm-spc-num:focus {
	border-color: var(--tp-blue) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(51,98,255,.12) !important;
}

.wp-customizer .tpmeta-panel-field .tm-spc-lbl {
	font-size: 9px;
	font-weight: 700;
	color: var(--tp-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
	line-height: 1;
}

.wp-customizer .tpmeta-panel-field .tm-spacing-footer {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 30%;
}

.wp-customizer .tpmeta-panel-field .tm-spc-link {
	width: 25px;
	height: 25px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tp-bg);
	border: 1.5px solid var(--tp-border);
	border-radius: 50%;
	cursor: pointer;
	color: var(--tp-muted);
	transition: border-color .15s, color .15s, background .15s;
	padding: 0;
}
.wp-customizer .tpmeta-panel-field .tm-spc-link.is-linked {
	background: var(--tp-blue-lt);
	border-color: var(--tp-blue);
	color: var(--tp-blue);
}
.wp-customizer .tpmeta-panel-field .tm-spc-link:hover {
	border-color: var(--tp-blue);
	color: var(--tp-blue);
}
.wp-customizer .tpmeta-panel-field .tm-spc-link .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

.wp-customizer .tpmeta-panel-field .tm-spc-unit-sel {
	flex: 1 1 auto;
	height: 30px !important;
	padding: 0 24px 0 8px !important;
	font-size: 12px !important;
	font-weight: 600;
	text-align: left;
	color: var(--tp-text) !important;
	background: var(--tp-bg)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%236b7280' d='M0 0l5 7 5-7z'/%3E%3C/svg%3E")
		no-repeat right 8px center !important;
	border: 1.5px solid var(--tp-border) !important;
	border-radius: var(--tp-radius-sm) !important;
	box-sizing: border-box !important;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	box-shadow: none !important;
	max-width: none;
	width: 100%;
}
.wp-customizer .tpmeta-panel-field .tm-spc-unit-sel:focus {
	border-color: var(--tp-blue) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(51,98,255,.12) !important;
}