/* ========================================
   STORE LISTING PAGE FILTERS & STYLING
   ======================================== */

/* HIDE the top search/filter/sort bar completely */
#dokan-store-listing-filter-wrap {
	display: none !important;
}

/* HIDE the original Dokan search field inside the form */
#dokan-store-listing-filter-form-wrap .store-search,
#dokan-store-listing-filter-form-wrap .store-search.grid-item {
	display: none !important;
}

/* Make the filter form always visible and styled */
#dokan-store-listing-filter-form-wrap {
	display: block !important;
	background: transparent !important;
	padding: 25px 25px 0 25px !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	border-radius: 4px !important;
	border: none !important;
	box-shadow: none !important;
}

/* Remove the arrow */
#dokan-store-listing-filter-form-wrap:before {
	display: none !important;
}

/* Container for all filter fields - 6-COLUMN TOP ROW */
.store-lists-other-filter-wrap {
	display: grid !important;
	grid-template-columns: minmax(180px, 220px) minmax(180px, 220px) minmax(180px, 220px) minmax(180px, 220px) auto auto auto !important;
	gap: 10px 16px !important;
	background: transparent !important;
	padding: 0 !important;
	align-items: end !important;
	margin-top: 0 !important;
}

/* Visual order: Search → Category → Country → Level → Featured → Verified → Actions */
.store-lists-other-filter-wrap .store-search-field                        { order: 1; }
.store-lists-other-filter-wrap .store-lists-category                      { order: 2; }
.store-lists-other-filter-wrap .tm-country-filter-wrap                    { order: 3; }
.store-lists-other-filter-wrap .tm-level-filter-wrap                      { order: 4; }
.store-lists-other-filter-wrap .featured.item                             { order: 5; }
.store-lists-other-filter-wrap .open-now.item:not(.tm-profile-level-filter) { order: 6; }
.store-lists-other-filter-wrap #filter-actions-cell                       { order: 7; }

/* Style all filter items consistently */
.store-lists-other-filter-wrap .item,
.filter-group-items .filter-item {
	display: flex !important;
	flex-direction: column !important;
	gap: 5px !important;
}

/* Style all labels consistently - gold color */
.store-lists-other-filter-wrap .item label,
.store-lists-other-filter-wrap .item .category-label,
.filter-group-items .filter-item label {
	color: #D4AF37 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	margin-bottom: 5px !important;
}

/* Hide the Search: label */
.store-search-field label[for="dokan_seller_search"] {
	display: none !important;
}

/* Style all select dropdowns and inputs consistently */
.store-lists-other-filter-wrap select,
.store-lists-other-filter-wrap input[type="text"],
.store-lists-other-filter-wrap input[type="search"],
.store-lists-other-filter-wrap .category-input,
.filter-group-items .filter-item select,
.filter-group-items .filter-item input {
	background: #000000 !important;
	color: #C0C0C0 !important;
	border: 1px solid #D4AF37 !important;
	padding: 10px !important;
	border-radius: 3px !important;
	width: 100% !important;
	height: 42px !important;
	box-sizing: border-box !important;
}

/* Category dropdown special styling */
.store-lists-category .category-input {
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

.store-lists-category {
	position: relative;
}

.store-lists-category .category-label {
	margin-right: 5px !important;
}

.store-lists-category .category-items {
	color: #C0C0C0 !important;
	flex-grow: 1 !important;
}

/* Style when no category selected */
.store-lists-category .category-items:empty::before {
	content: "Select a category" !important;
	color: #999 !important;
}

/* Category multi-select dropdown styling */
.store-lists-category .category-box {
	background: #1a1a1a !important;
	border: 1px solid #D4AF37 !important;
	border-radius: 3px !important;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35) !important;
	left: 0 !important;
	margin-top: 0 !important;
	max-height: 320px !important;
	min-width: 380px !important;
	overflow-y: auto !important;
	padding: 10px !important;
	position: absolute;
	top: calc(100% + 5px);
	width: 100% !important;
	z-index: 100;
}

.store-lists-category .category-box ul {
	background: #1a1a1a !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 5px !important;
}

.store-lists-category .category-box ul li {
	background: #000000 !important;
	color: #C0C0C0 !important;
	padding: 6px 10px !important;
	margin-bottom: 0 !important;
	border: 1px solid #333 !important;
	border-radius: 3px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	text-align: center !important;
	font-size: 12px !important;
}

.store-lists-category .category-box ul li:hover {
	background: #222 !important;
	border-color: #D4AF37 !important;
}

/* Selected category - gold background */
.store-lists-category .category-box ul li.selected {
	background: #D4AF37 !important;
	color: #000000 !important;
	border-color: #D4AF37 !important;
	font-weight: 600 !important;
}

/* Toggle switches styling for Featured and Verified — vertical: label on top, toggle below */
.store-lists-other-filter-wrap .featured.item,
.store-lists-other-filter-wrap .open-now.item:not(.tm-profile-level-filter) {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 6px !important;
	white-space: nowrap !important;
}

/* ========================================
   DATEPICKER (EDIT BIRTH DATE MODAL)
   ======================================== */
body.tm-birthdate-modal-open .ui-datepicker .ui-datepicker-prev,
body.tm-birthdate-modal-open .ui-datepicker .ui-datepicker-next {
	display: none;
}

/* Toggle label — gold, centred above the switch */
.store-lists-other-filter-wrap .featured.item > label[for="featured"],
.store-lists-other-filter-wrap .open-now.item:not(.tm-profile-level-filter) > label[for="verified"] {
	color: #D4AF37 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	margin: 0 !important;
	text-align: center !important;
}

/* Create a wrapper for the toggle switch - smaller size */
.store-lists-other-filter-wrap .featured.item input[type="checkbox"],
.store-lists-other-filter-wrap .open-now.item:not(.tm-profile-level-filter) input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	position: relative !important;
	width: 44px !important;
	height: 22px !important;
	background: #333 !important;
	border: 1px solid #666 !important;
	border-radius: 22px !important;
	cursor: pointer !important;
	transition: all 0.3s ease !important;
	outline: none !important;
	display: block !important;
	flex-shrink: 0 !important;
}

/* Toggle switch slider/knob using ::before */
.store-lists-other-filter-wrap .featured.item input[type="checkbox"]::before,
.store-lists-other-filter-wrap .open-now.item:not(.tm-profile-level-filter) input[type="checkbox"]::before {
	content: "" !important;
	position: absolute !important;
	top: 2px !important;
	left: 2px !important;
	width: 16px !important;
	height: 16px !important;
	background: #fff !important;
	border-radius: 50% !important;
	transition: all 0.3s ease !important;
	box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Toggle switch when checked - GOLD color */
.store-lists-other-filter-wrap .featured.item input[type="checkbox"]:checked,
.store-lists-other-filter-wrap .open-now.item:not(.tm-profile-level-filter) input[type="checkbox"]:checked {
	background: #D4AF37 !important;
	border-color: #D4AF37 !important;
}

/* Move slider to right when checked */
.store-lists-other-filter-wrap .featured.item input[type="checkbox"]:checked::before,
.store-lists-other-filter-wrap .open-now.item:not(.tm-profile-level-filter) input[type="checkbox"]:checked::before {
	left: 24px !important;
}

/* Hide rating element completely */
.store-ratings,
.store-ratings.item,
div.store-ratings,
.store-lists-other-filter-wrap .store-ratings {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	position: absolute !important;
	left: -9999px !important;
}

/* ========================================
   GENERIC CUSTOM FILTER GROUP STYLES
   Reusable for any category-specific filters
   ======================================== */

/* Filter Group Container */
.custom-filter-group {
	width: 100% !important;
	margin-top: 20px !important;
	padding-top: 20px !important;
	border-top: 1px solid #333 !important;
	display: none; /* Hidden by default - shown via JavaScript based on category */
}

/* Filter Group Title */
.filter-group-title {
	width: 100% !important;
	margin-bottom: 15px !important;
	padding-bottom: 8px !important;
	border-bottom: 1px solid #444 !important;
}

.filter-group-heading {
	color: #D4AF37 !important;
	font-weight: bold !important;
	font-size: 15px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

/* Filter Group Items Container */
.filter-group-items {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 15px !important;
}

/* Individual Filter Item */
.filter-group-items .filter-item {
	display: flex !important;
	flex-direction: column !important;
	gap: 5px !important;
}

/* Filter item labels */
.filter-group-items .filter-item label {
	color: #D4AF37 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	margin-bottom: 5px !important;
}

/* Filter item selects and inputs */
.filter-group-items .filter-item select,
.filter-group-items .filter-item input {
	background: #000000 !important;
	color: #C0C0C0 !important;
	border: 1px solid #D4AF37 !important;
	padding: 10px !important;
	border-radius: 3px !important;
	width: 100% !important;
	height: 42px !important;
	box-sizing: border-box !important;
}

/* Legacy support for old class names */
.physical-attributes-filters {
	/* Inherits from .custom-filter-group */
}

/* ── 6th column: actions cell (GO button + View/Clear links) ── */
#filter-actions-cell {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-end !important;
	justify-content: flex-end !important;
	gap: 10px !important;
	white-space: nowrap !important;
}

/* Links sub-cell — right-aligned text, sits to the left of GO */
#filter-links-wrap {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	justify-content: center !important;
	align-self: center !important;
	gap: 2px !important;
	text-align: right !important;
	margin: 0 !important;
	float: none !important;
	line-height: 1 !important;
}

/* GO button — square, matches input height */
#apply-filter-btn {
	background: #D4AF37 !important;
	color: #000000 !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 52px !important;
	height: 42px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 1px !important;
	border-radius: 3px !important;
	cursor: pointer !important;
	float: none !important;
	line-height: 1 !important;
}

#apply-filter-btn:hover {
	background: #C09F2F !important;
}

a.dokan-clear-filters-link {
	display: inline-block;
	color: #aaaaaa !important;
	text-decoration: none !important;
	font-size: 0.85em;
	font-weight: 400;
	cursor: pointer;
	line-height: 1.2;
}

a.dokan-clear-filters-link:hover {
	color: #ffffff !important;
	text-decoration: underline !important;
}

/* ==========================================================================
   VENDOR PROFILE COMPLETION & PUBLISH STRIP
   Overlaid in the center of the banner hero area.
   Visible to vendor owner + admin-editing only (PHP-gated; no extra JS needed).
   ========================================================================== */

/* ── Profile level badge (talent info panel, below the name) ──────────────── */
.tm-level-badge {
	display: flex !important;           /* consistent with .store-name-wrapper siblings */
	justify-content: center !important;
	align-items: center;
	padding: 3px 11px 3px 9px;
	border-radius: 20px;
	font-size: 11px !important;         /* explicit px — avoids broken em inheritance */
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin-top: 2px;
	margin-bottom: 6px;
	border: 1px solid transparent;
	pointer-events: none;
	user-select: none;
}

/* Basic (Level 1) — cool blue */
.tm-level-badge--basic {
	background: rgba(30, 90, 255, 0.18);
	border-color: rgba(90, 150, 255, 0.45) !important;
	color: #a8c8ff !important;
}

/* Mediatic (Level 2) — teal */
.tm-level-badge--mediatic {
	background: rgba(0, 170, 148, 0.20);
	border-color: rgba(0, 205, 178, 0.48) !important;
	color: #7df2dc !important;
}

/* Cinematic (Level 3) — violet (future) */
.tm-level-badge--cinematic {
	background: rgba(155, 90, 255, 0.20);
	border-color: rgba(190, 140, 255, 0.48) !important;
	color: #d4b0ff !important;
}

.tm-publish-strip {
	position: fixed;
	/* Desktop: WP admin bar (32px) + Astra transparent header (90px) = 122px */
	top: 122px;
	left: 50%;
	transform: translateX(-50%);
	width: min(80%, 700px);
	z-index: 1500;  /* above Astra header (≈1000), below tm-account-modal (2000), below WP admin bar (99999) */
	border-radius: 0 0 10px 10px;
	overflow: hidden;
	pointer-events: auto;
}
/* Mobile (≤782px): WP admin bar grows to 46px; Astra header shrinks */
@media (max-width: 782px) {
	.tm-publish-strip {
		top: calc(46px + 60px); /* 46px mobile admin bar + ~60px Astra mobile header */
		width: min(95%, 700px);
	}
}

.tm-publish-strip__inner {
	display: flex;
	flex-direction: column;  /* stack: message → levels (full-width) → hint */
	align-items: stretch;
	gap: 7px;
	padding: 8px 14px 10px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* ── Incomplete state (amber warning) ─────────────────────────────────────── */
.tm-publish-strip--incomplete .tm-publish-strip__inner {
	background: rgba(35, 17, 0, 0.88);
	border: 1px solid rgba(255, 160, 30, 0.55);
	box-shadow:
		0 6px 32px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 200, 100, 0.12);
}

/* ── Ready state (green success) ──────────────────────────────────────────── */
.tm-publish-strip--ready .tm-publish-strip__inner {
	background: rgba(0, 30, 12, 0.90);
	border: 1px solid rgba(50, 200, 100, 0.60);
	box-shadow:
		0 6px 32px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(80, 220, 130, 0.18);
}

/* ── Published confirmation flash ─────────────────────────────────────────── */
.tm-publish-strip--published .tm-publish-strip__inner {
	background: rgba(10, 60, 20, 0.92);
	border: 1px solid rgba(80, 220, 120, 0.70);
	box-shadow: 0 6px 32px rgba(0, 0, 0, 0.5);
}

/* ── Active / Live vendor — level status display (teal-blue, informational) ── */
.tm-publish-strip--active .tm-publish-strip__inner {
	background: rgba(0, 22, 38, 0.88);
	border: 1px solid rgba(30, 160, 215, 0.48);
	box-shadow:
		0 6px 32px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(60, 190, 235, 0.12);
}

/* ── Message row ──────────────────────────────────────────────────────────── */
.tm-publish-strip__message {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-wrap: wrap;
}

.tm-strip-icon {
	font-size: 1em;
	flex-shrink: 0;
	line-height: 1;
}

.tm-strip-text {
	flex: 1;
	font-size: 0.78em;
	line-height: 1.4;
}

.tm-publish-strip--incomplete .tm-strip-text {
	color: #ffd8a0;
}

.tm-publish-strip--ready .tm-strip-text,
.tm-publish-strip--published .tm-strip-text {
	color: #b8f5cc;
}

.tm-publish-strip--active .tm-strip-text {
	color: #a8e8f8;
}

.tm-strip-missing {
	display: inline;
	margin-top: 0;
	margin-left: 4px;
	font-size: 0.9em;
	color: #f9c07a;
	opacity: 0.8;
}

/* ── Active-state "next level" hint (sits below progress bars) ─────────────── */
.tm-strip-hint {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.74em;
	line-height: 1.4;
	color: #a8e8f8;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 5px;
	margin-top: 1px;
}
.tm-strip-hint strong {
	color: #c8f0ff;
}

/* ── Visibility toggle button (publish / unpublish) ──────────────────────── */
.tm-visibility-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	width: 100%;
	padding: 8px 14px;
	border-radius: 7px;
	font-size: 0.75em;
	font-weight: 600;
	text-align: center;
	border: 1px solid transparent;
	transition: filter 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
	margin-top: 7px;
	user-select: none;
	-webkit-user-select: none;
}

/* Locked: L1 incomplete — grey, not interactive */
.tm-visibility-btn--locked {
	background: rgba(100, 100, 115, 0.20);
	border-color: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.32);
	cursor: default;
	pointer-events: none;
}

/* Hidden: L1 done but not yet published — amber/orange */
.tm-visibility-btn--hidden {
	background: linear-gradient(135deg, rgba(200, 95, 10, 0.72) 0%, rgba(165, 58, 0, 0.72) 100%);
	border-color: rgba(255, 155, 45, 0.48);
	color: #ffddb0;
	cursor: pointer;
	box-shadow: 0 3px 14px rgba(190, 80, 0, 0.30);
}
.tm-visibility-btn--hidden:hover {
	filter: brightness(1.18);
	transform: translateY(-1px);
	box-shadow: 0 5px 20px rgba(190, 80, 0, 0.50);
}

/* Live: currently published — green */
.tm-visibility-btn--live {
	background: linear-gradient(135deg, rgba(22, 120, 62, 0.78) 0%, rgba(14, 90, 44, 0.78) 100%);
	border-color: rgba(55, 195, 110, 0.42);
	color: #b8f5cc;
	cursor: pointer;
	box-shadow: 0 3px 14px rgba(15, 110, 55, 0.30);
}
.tm-visibility-btn--live:hover {
	filter: brightness(1.14);
	transform: translateY(-1px);
	box-shadow: 0 5px 20px rgba(15, 110, 55, 0.50);
}

/* In-flight / loading state */
.tm-visibility-btn.is-loading {
	opacity: 0.65;
	pointer-events: none;
	cursor: default;
}

.tm-vbtn__main {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	flex-wrap: wrap;
	transition: opacity 0.18s ease;
}

.tm-vbtn__status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* Pulsing live dot when published */
.tm-visibility-btn--live .fa-circle {
	font-size: 0.65em;
	color: #4deb90;
	animation: tm-vbtn-pulse 2.4s ease-in-out infinite;
}
@keyframes tm-vbtn-pulse {
	0%, 100% { opacity: 1;   transform: scale(1);   }
	50%       { opacity: 0.5; transform: scale(0.8); }
}

.tm-vbtn__sep {
	color: rgba(255, 255, 255, 0.30);
	font-weight: 300;
}

.tm-vbtn__action {
	font-style: italic;
	opacity: 0.82;
}

/* ── Publish button ───────────────────────────────────────────────────────── */
.tm-publish-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 13px;
	border: none;
	border-radius: 6px;
	background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
	color: #fff !important;
	font-size: 0.78em;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s;
	box-shadow: 0 2px 8px rgba(40, 167, 69, 0.45);
	flex-shrink: 0;
	white-space: nowrap;
	text-decoration: none !important;
}

.tm-publish-btn:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 5px 18px rgba(40, 167, 69, 0.65);
}

.tm-publish-btn:active:not(:disabled) {
	transform: translateY(0);
}

.tm-publish-btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

/* ── Progress levels row ──────────────────────────────────────────────────── */
.tm-publish-strip__levels {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.tm-level-row {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.tm-level-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 4px;
}

.tm-level-name {
	font-size: 0.68em;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.65);
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tm-level-pct {
	font-size: 0.68em;
	color: rgba(255, 255, 255, 0.50);
	white-space: nowrap;
}

.tm-level-soon {
	font-size: 0.65em;
	color: rgba(255, 255, 255, 0.28);
	white-space: nowrap;
	font-style: italic;
}

/* Progress track + fill */
.tm-level-track {
	height: 5px;
	background: rgba(255, 255, 255, 0.10);
	border-radius: 3px;
	overflow: hidden;
}

.tm-level-fill {
	height: 100%;
	border-radius: 3px;
	transition: width 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Incomplete: orange fill for active level */
.tm-publish-strip--incomplete .tm-level-row:not(.is-locked) .tm-level-fill {
	background: linear-gradient(90deg, #f0ad4e, #e86a00);
}

/* Ready/complete: green fill for level 1 */
.tm-level-row.is-complete .tm-level-fill,
.tm-publish-strip--ready .tm-level-row:first-child .tm-level-fill {
	background: linear-gradient(90deg, #28a745, #20c997);
}

/* Level 2 active fill: teal */
.tm-publish-strip--ready .tm-level-row:nth-child(2):not(.is-locked) .tm-level-fill,
.tm-publish-strip--incomplete .tm-level-row:nth-child(2):not(.is-locked) .tm-level-fill {
	background: linear-gradient(90deg, #17a2b8, #20c997);
}

/* Active (published) vendor: teal fills for all levels */
.tm-publish-strip--active .tm-level-row.is-complete .tm-level-fill,
.tm-publish-strip--active .tm-level-row:first-child .tm-level-fill {
	background: linear-gradient(90deg, #17a2b8, #0dcaf0);
}

.tm-publish-strip--active .tm-level-row:nth-child(2):not(.is-locked) .tm-level-fill {
	background: linear-gradient(90deg, #0d6efd, #17a2b8);
}

/* Locked levels: heavily dimmed */
.tm-level-row.is-locked .tm-level-name,
.tm-level-row.is-locked .tm-level-pct {
	color: rgba(255, 255, 255, 0.22);
}

.tm-level-row.is-locked .tm-level-track {
	background: rgba(255, 255, 255, 0.05);
}

/* Complete level label color: green */
.tm-level-row.is-complete .tm-level-name {
	color: rgba(90, 220, 140, 0.85);
}

.tm-level-row.is-complete .tm-level-pct {
	color: rgba(90, 220, 140, 0.65);
}

/* ── Mobile adjustments ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
	.tm-publish-strip {
		width: 100%;
		border-radius: 0;
	}

	.tm-publish-strip__inner {
		flex-direction: column;
		gap: 8px;
		padding: 8px 12px;
	}

	.tm-publish-strip__levels {
		width: 100%;
	}

	.tm-level-row {
		flex-direction: row;
		align-items: center;
		gap: 8px;
	}

	.tm-level-meta {
		flex-direction: column;
		align-items: flex-start;
		flex-shrink: 0;
		width: 95px;
		gap: 1px;
	}

	.tm-level-track {
		flex: 1;
		height: 4px;
	}
}



/* Fix right-side gap on vendor cards grid - ONLY IN GRID VIEW */
/* Add top margin to separate from filter section */
/* Override Dokan negative margins that cause the right gap */
#dokan-seller-listing-wrap.grid-view {
	margin-top: 40px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* 20px side padding baked into the server-rendered wrap so the width is
   correct from first paint — no reflow when JS creates #tm-card-pager. */
#dokan-seller-listing-wrap.grid-view {
	padding-left: 20px !important;
	padding-right: 20px !important;
}
#dokan-seller-listing-wrap.grid-view .seller-listing-content {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Reset the ul container */
#dokan-seller-listing-wrap.grid-view ul.dokan-seller-wrap {
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	display: flex !important;
	flex-wrap: wrap !important;
	row-gap: 60px !important; /* 40px avatar overhang (translateY 50% of 80px) + 20px breathing room */
	column-gap: 0 !important; /* columns are separated via li padding-left/right, not gap */
}

/* Fix Dokan cards - use box-sizing so 15px padding is included in width.
 * padding-left/right replaces Dokan's float-based gutters (15px each side = 30px gutter). */
#dokan-seller-listing-wrap.grid-view ul.dokan-seller-wrap li {
	box-sizing: border-box !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
}

/* ── Store card grid: responsive column count ──────────────────────────────
 * Dokan always outputs li.coloum-3 regardless of the shortcode columns attr,
 * so we override width here for each breakpoint.
 *
 *  TV / Desktop + Laptop (>=1101px) ..... 4 columns  (25%)
 *  Tablet Landscape (933-1100px) ....... 3 columns  (33.333%)
 *  Tablet Portrait (601-932px) ......... 2 columns  (50%)
 *  Phone (<= 600px) .................... 1 column   (100%)
 * ────────────────────────────────────────────────────────────────────────── */

#dokan-seller-listing-wrap.grid-view.ecomcine-store-grid {
	--tm-grid-columns: 4;
}

/* Default: 4 columns — TV, full desktops, laptops >= 1101px */
#dokan-seller-listing-wrap.grid-view ul.dokan-seller-wrap li.coloum-3 {
	width: calc(100% / var(--tm-grid-columns, 4)) !important;
	box-sizing: border-box !important;
	margin-bottom: 0 !important;
}

/* 3 columns — tablet landscape */
@media (max-width: 1100px) {
	#dokan-seller-listing-wrap.grid-view ul.dokan-seller-wrap li.coloum-3 {
		width: 33.3333% !important;
	}
}

/* 2 columns — tablet portrait and large phones */
@media (max-width: 932px) {
	#dokan-seller-listing-wrap.grid-view ul.dokan-seller-wrap li.coloum-3 {
		width: 50% !important;
	}
}

/* 1 column — phones */
@media (max-width: 600px) {
	#dokan-seller-listing-wrap.grid-view ul.dokan-seller-wrap li.coloum-3 {
		width: 100% !important;
	}
}

/* GRID VIEW STYLING - Match List View */
/* Gold vendor name */
#dokan-seller-listing-wrap.grid-view .store-data h2,
#dokan-seller-listing-wrap.grid-view .store-data h2 a {
	color: #D4AF37 !important;
}

/* Silver location/info text */
#dokan-seller-listing-wrap.grid-view .store-data p,
#dokan-seller-listing-wrap.grid-view .store-data {
	color: #C0C0C0 !important;
}

/* Make vendor card fully transparent — no white box, no shadow.
 * position:relative makes it the CSS anchor for store-content and
 * store-footer absolute children.  overflow:visible lets the avatar
 * poke below the bottom edge. */
#dokan-seller-listing-wrap ul.dokan-seller-wrap li .store-wrapper {
	box-shadow: none !important;
	background: transparent !important;
	position: relative !important;
	overflow: visible !important;
}

/* li also needs overflow visible so the avatar isn't clipped */
#dokan-seller-listing-wrap ul.dokan-seller-wrap li.dokan-single-seller {
	overflow: visible !important;
}

/* 16:9 card ratio — drives the wrapper height via normal block flow.
 * overflow:hidden clips the banner image to the 16:9 box. */
#dokan-seller-listing-wrap .dokan-single-seller .store-wrapper .store-header .store-banner {
	aspect-ratio: 16 / 9 !important;
	min-height: 0 !important;
	position: relative !important;
	overflow: hidden !important;
}

#dokan-seller-listing-wrap .dokan-single-seller .store-wrapper .store-header .store-banner a,
#dokan-seller-listing-wrap .dokan-single-seller .store-wrapper .store-header .store-banner img,
#dokan-seller-listing-wrap .dokan-single-seller .store-wrapper .store-header .store-banner .tm-store-fallback-banner {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

#dokan-seller-listing-wrap .dokan-single-seller .store-wrapper .store-header .store-banner img {
	object-fit: cover !important;
	object-position: center center !important;
}

/* store-content: dark gradient overlay at the bottom of the banner card.
 * position:absolute takes it out of flow so .store-wrapper height == .store-header height.
 * padding-bottom: 48px lifts the text above the avatar's visible region (avatar top edge is
 * ~40px above the card bottom due to translateY(50%) on an 80px-tall store-footer). */
#dokan-seller-listing-wrap.grid-view .store-content {
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.6) 55%, transparent 100%) !important;
	padding: 0 12px 38px 12px !important; /* top row is now mechanically anchored by .store-data-container top:5px */
	z-index: 5 !important;
	text-align: left !important;
	display: block !important;
}

/* .store-data-container fills the full width and stacks content left-to-right */
#dokan-seller-listing-wrap.grid-view .store-content .store-data-container {
	position: absolute !important;
	top: 5px !important;
	left: 12px !important;
	right: 12px !important;
	width: auto !important;
	text-align: left !important;
}

/* Force all text inside the overlay to be left-aligned */
#dokan-seller-listing-wrap.grid-view .store-content .store-data,
#dokan-seller-listing-wrap.grid-view .store-content .store-data h2,
#dokan-seller-listing-wrap.grid-view .store-content .store-data h2 a,
#dokan-seller-listing-wrap.grid-view .store-content .store-data p,
#dokan-seller-listing-wrap.grid-view .store-content .store-categories-wrapper,
#dokan-seller-listing-wrap.grid-view .store-content .location-wrapper {
	text-align: left !important;
	display: block !important;
	width: 100% !important;
}

/* Vendor name h2 font size — matches the live reference */
#dokan-seller-listing-wrap.grid-view .store-content .store-data h2 {
	margin: 0 0 4px 0 !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
}

/* Category and location text size */
#dokan-seller-listing-wrap.grid-view .store-content .store-data p,
#dokan-seller-listing-wrap.grid-view .store-content .store-data span {
	font-size: 12px !important;
	margin: 0 !important;
}

/* store-footer: pin the avatar to bottom-left, centred on the card's bottom edge */
#dokan-seller-listing-wrap ul.dokan-seller-wrap li .store-footer {
	position: absolute !important;
	bottom: 0 !important;
	left: 15px !important;
	transform: translateY(50%) !important;
	height: auto !important;
	padding: 0 !important;
	background: transparent !important;
	overflow: visible !important;
	z-index: 10 !important;
}

/* Circle profile avatar with double border (black + gold) and white glow.
 * Removed the old top:-50px hack — positioning now done by store-footer. */
#dokan-seller-listing-wrap.grid-view .store-footer .seller-avatar {
	width: 80px !important;
	height: 80px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	border: 3px solid #D4AF37 !important;
	background: #000 !important;
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.3) !important;
	position: relative !important;
	top: 0 !important;
}

#dokan-seller-listing-wrap.grid-view .store-footer .seller-avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 50% !important;
}

/* Standalone Talents listing contract */
#ecomcine-person-listing.grid-view {
	margin-top: 40px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
}

#ecomcine-person-listing.grid-view .ecomcine-person-listing__content {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

#ecomcine-person-listing.grid-view ul.ecomcine-person-cards {
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	display: flex !important;
	flex-wrap: wrap !important;
	row-gap: 60px !important;
	column-gap: 0 !important;
}

#ecomcine-person-listing.grid-view ul.ecomcine-person-cards li {
	box-sizing: border-box !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
}

#ecomcine-person-listing.grid-view.ecomcine-store-grid {
	--tm-grid-columns: 4;
}

#ecomcine-person-listing.grid-view ul.ecomcine-person-cards li.ecomcine-person-card--grid {
	width: calc(100% / var(--tm-grid-columns, 4)) !important;
	box-sizing: border-box !important;
	margin-bottom: 0 !important;
}

@media (max-width: 1100px) {
	#ecomcine-person-listing.grid-view ul.ecomcine-person-cards li.ecomcine-person-card--grid {
		width: 33.3333% !important;
	}
}

@media (max-width: 932px) {
	#ecomcine-person-listing.grid-view ul.ecomcine-person-cards li.ecomcine-person-card--grid {
		width: 50% !important;
	}
}

@media (max-width: 600px) {
	#ecomcine-person-listing.grid-view ul.ecomcine-person-cards li.ecomcine-person-card--grid {
		width: 100% !important;
	}
}

#ecomcine-person-listing.grid-view .store-data h2,
#ecomcine-person-listing.grid-view .store-data h2 a {
	color: #D4AF37 !important;
}

#ecomcine-person-listing.grid-view .store-data p,
#ecomcine-person-listing.grid-view .store-data {
	color: #C0C0C0 !important;
}

#ecomcine-person-listing ul.ecomcine-person-cards li .store-wrapper {
	box-shadow: none !important;
	background: transparent !important;
	position: relative !important;
	overflow: visible !important;
}

#ecomcine-person-listing ul.ecomcine-person-cards li.ecomcine-person-card {
	overflow: visible !important;
}

#ecomcine-person-listing .ecomcine-person-card .store-wrapper .store-header .store-banner {
	aspect-ratio: 16 / 9 !important;
	min-height: 0 !important;
	position: relative !important;
	overflow: hidden !important;
}

#ecomcine-person-listing .ecomcine-person-card .store-wrapper .store-header .store-banner a,
#ecomcine-person-listing .ecomcine-person-card .store-wrapper .store-header .store-banner img,
#ecomcine-person-listing .ecomcine-person-card .store-wrapper .store-header .store-banner .tm-store-fallback-banner {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

#ecomcine-person-listing .ecomcine-person-card .store-wrapper .store-header .store-banner img {
	object-fit: cover !important;
	object-position: center center !important;
}

#ecomcine-person-listing.grid-view .store-content {
	position: absolute !important;
	top: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.6) 55%, transparent 100%) !important;
	padding: 0 12px 38px 12px !important;
	z-index: 5 !important;
	text-align: left !important;
	display: block !important;
}

#ecomcine-person-listing.grid-view .store-content .store-data-container {
	position: absolute !important;
	top: 5px !important;
	left: 12px !important;
	right: 12px !important;
	width: auto !important;
	text-align: left !important;
}

#ecomcine-person-listing.grid-view .store-content .store-data,
#ecomcine-person-listing.grid-view .store-content .store-data h2,
#ecomcine-person-listing.grid-view .store-content .store-data h2 a,
#ecomcine-person-listing.grid-view .store-content .store-data p,
#ecomcine-person-listing.grid-view .store-content .store-categories-wrapper,
#ecomcine-person-listing.grid-view .store-content .location-wrapper {
	text-align: left !important;
	display: block !important;
	width: 100% !important;
}

#ecomcine-person-listing.grid-view .store-content .store-data h2 {
	margin: 0 0 4px 0 !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
}

#ecomcine-person-listing.grid-view .store-content .store-data p,
#ecomcine-person-listing.grid-view .store-content .store-data span {
	font-size: 12px !important;
	margin: 0 !important;
}

#ecomcine-person-listing ul.ecomcine-person-cards li .store-footer {
	position: absolute !important;
	bottom: 0 !important;
	left: 15px !important;
	transform: translateY(50%) !important;
	height: auto !important;
	padding: 0 !important;
	background: transparent !important;
	overflow: visible !important;
	z-index: 10 !important;
}

#ecomcine-person-listing.grid-view .store-footer .seller-avatar {
	width: 80px !important;
	height: 80px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	border: 3px solid #D4AF37 !important;
	background: #000 !important;
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.3) !important;
	position: relative !important;
	top: 0 !important;
}

#ecomcine-person-listing.grid-view .store-footer .seller-avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 50% !important;
}

#tm-card-pager > #ecomcine-person-listing {
	width: 100%;
}

#ecomcine-person-listing.ecomcine-store-listing-wrap .store-wrapper {
	position: relative;
}

#ecomcine-person-listing.ecomcine-store-listing-wrap .store-wrapper .tm-store-card-link {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: block;
	text-decoration: none;
}

#ecomcine-person-listing.ecomcine-store-listing-wrap .store-wrapper > *:not(.tm-store-card-link) {
	position: relative;
	z-index: 5;
}

#ecomcine-person-listing .store-data {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

#ecomcine-person-listing .store-data .vendor-name-featured {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
	min-width: 0;
}

#ecomcine-person-listing .store-data .vendor-name-featured h2 {
	margin: 0;
	max-width: 100%;
	min-width: 0;
	line-height: 1.2;
	text-align: left !important;
}

#ecomcine-person-listing .store-data .vendor-name-featured .vendor-name-pill {
	display: inline-block;
	max-width: 100%;
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.72);
	color: #D4AF37;
	border: 1px solid rgba(212, 175, 55, 0.35);
	white-space: normal;
	word-break: break-word;
}

#ecomcine-person-listing .store-data .vendor-name-featured .tm-card-status-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 22px;
	align-items: center;
}

#ecomcine-person-listing .store-data .vendor-name-featured .tm-card-status-row.tm-card-status-row--empty {
	visibility: hidden;
	margin: 0;
}

#ecomcine-person-listing .store-data .vendor-name-featured .tm-card-status-row .featured-label,
#ecomcine-person-listing .store-data .vendor-name-featured .tm-card-status-row .verified-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
}

#ecomcine-person-listing .store-data .store-categories-wrapper,
#ecomcine-person-listing .store-data .location-wrapper {
	margin-top: 0 !important;
	min-width: 0;
}

#ecomcine-person-listing .store-data .store-categories-wrapper .field-display,
#ecomcine-person-listing .store-data .location-wrapper .field-display {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-width: 0;
	width: 100%;
}

#ecomcine-person-listing .store-data .store-categories-display,
#ecomcine-person-listing .store-data .location-display {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	max-width: 100%;
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	padding: 4px 10px;
	color: #f5f5f5;
}

#ecomcine-person-listing .store-data .location-display .geo-address {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.ecomcine-person-listing__empty,
.dokan-error {
	padding: 16px 20px;
	border-radius: 14px;
	background: rgba(10, 10, 10, 0.86);
	border: 1px solid rgba(212, 175, 55, 0.2);
	color: #f4efe2;
}

.ecomcine-person-listing__filters {
	display: block;
	margin: 0 20px 12px;
}

.ecomcine-form-control {
	width: 100%;
	min-height: 40px;
	padding: 8px 12px;
	border-radius: 10px;
	border: 1px solid rgba(212, 175, 55, 0.25);
	background: rgba(15, 15, 15, 0.86);
	color: #f3ede0;
}

.ecomcine-toggle-checkbox {
	accent-color: #d4af37;
}

.ecomcine-filter-link {
	color: #d4af37;
	text-decoration: none;
	font-size: 13px;
}

.ecomcine-filter-apply {
	min-height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	border: 1px solid rgba(212, 175, 55, 0.45);
	background: linear-gradient(180deg, #2f2610 0%, #171208 100%);
	color: #f4e4b8;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Featured and Verified badges styling */
/* Container now absolutely positioned inside the avatar wrapper for Profile Header */
.profile-img .featured-favourite-avatar {
    position: absolute !important;
    top: 50% !important;
    left: 70% !important; /* Start at 70% width of the avatar */
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important; /* Stack them if multiple */
    gap: 4px !important;
    z-index: 20 !important;
    width: max-content !important;
    pointer-events: none !important; /* Let clicks pass through to avatar edit button if underneath */
}

.profile-img {
    overflow: visible !important; /* Allow badges to extend outside */
    position: relative !important;
}

.featured-favourite {
	display: none !important; /* Hide old container if it exists anywhere else */
}

/* Featured badge - blueish with 65% transparency */
.featured-label {
	background: rgba(41, 128, 185, 0.85) !important; /* Slightly more opaque for overlay visibility */
	color: #ffffff !important;
	padding: 4px 12px 4px 16px !important; /* More padding left to "merge" visual with circle */
	border-radius: 4px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	min-height: 24px !important;
	display: inline-flex !important;
	align-items: center !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
    white-space: nowrap !important;
    /* Optional: Curve the left side to hug the circle? - Keep simple box for now as per blue outline */
}

/* Verified badge - greenish with 65% transparency */
.verified-label {
	background: rgba(39, 174, 96, 0.65) !important;
	color: #ffffff !important;
	padding: 4px 12px !important;
	border-radius: 4px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

/* ========================================
   PRODUCT PAGE VENDOR INFO STYLING
   ======================================== */

/* Gold vendor/talent name on product page */
.dokan-product-seller-info .profile-info .store-name,
.dokan-product-seller-info .profile-info .store-name a,
.dokan-product-seller h2,
.dokan-product-seller h2 a,
.dokan-store-name,
.dokan-store-name a,
.sold-by-meta .store-name,
.sold-by-meta .store-name a {
	color: #D4AF37 !important;
}

/* Silver vendor/talent info text */
.dokan-product-seller-info .profile-info p,
.dokan-product-seller-info .profile-info .store-address,
.dokan-product-seller p,
.dokan-product-seller .store-data,
.sold-by-meta p {
	color: #C0C0C0 !important;
}

/* Circle avatar container - gold outer border with black background */
.dokan-product-seller-info .profile-img,
.dokan-product-seller .store-avatar,
.dokan-store-sidebar .profile-img,
.seller-avatar,
.mp-vendor-avatar-badge {
	width: 86px !important;
	height: 86px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	border: 3px solid #D4AF37 !important;
	background: #000 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.3) !important;
}

/* Product page avatar overlay - needs absolute positioning */
.mp-vendor-avatar-badge {
	position: absolute !important;
	top: 20px !important;
	left: 20px !important;
	z-index: 10 !important;
}

/* Circle avatar image - smaller to show black ring */
.dokan-product-seller-info .profile-img img,
.dokan-product-seller .store-avatar img,
.dokan-store-sidebar .profile-img img,
.seller-avatar img,
.mp-vendor-avatar-badge img {
	width: 74px !important;
	height: 74px !important;
	border-radius: 50% !important;
	border: none !important;
	object-fit: cover !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ========================================
   INLINE EDITING FOR VENDOR ATTRIBUTES
   ======================================== */

/* Edit button - hidden by default, shown on hover when owner */
.edit-attr-btn {
	display: none;
	margin-left: 8px;
	padding: 2px 6px;
	font-size: 11px;
	color: #999;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 3px;
	cursor: pointer;
	transition: all 0.2s ease;
	vertical-align: middle;
}

.owner-viewing .edit-attr-btn {
	display: inline-block;
	opacity: 1;
}

.owner-viewing .attribute-display:hover .edit-attr-btn {
	opacity: 1;
}

.tab-edit-icon {
	margin-left: 6px;
	font-size: 11px;
	color: #D4AF37;
	opacity: 0.9;
	vertical-align: middle;
}

.owner-viewing .bottom-tab-label .tab-edit-icon {
	color: #D4AF37;
}

.edit-attr-btn:hover {
	background: rgba(212, 175, 55, 0.2);
	border-color: #D4AF37;
	color: #D4AF37;
}

.edit-attr-btn i {
	font-size: 10px;
}

/* Help tooltip toggle (mobile-friendly) */
.help-icon-wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
}

/* Modal-specific: remove relative positioning so tooltip can escape */
.tm-field-editor-dialog .modal-help-wrapper {
	position: static;
}

.help-toggle-btn {
	background: none;
	border: none;
	padding: 0;
	color: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 0.2s ease;
}

.help-toggle-btn:hover {
	color: #D4AF37 !important;
}

@media (pointer: coarse) and (hover: none) {
	.help-toggle-btn {
		min-width: 44px;
		min-height: 44px;
		padding: 6px;
		border-radius: 50%;
	}

	.help-toggle-btn:focus,
	.help-toggle-btn:focus-visible {
		outline: 3px solid #D4AF37;
		outline-offset: 4px;
		box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
	}
}

/* Base tooltip styling - standardized dimensions */
.help-tooltip {
	position: absolute;
	top: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	width: 280px;
	height: auto;
	background: rgba(0, 0, 0, 0.95);
	color: #fff;
	padding: 14px 18px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 400;
	white-space: normal;
	text-align: left;
	line-height: 1.6;
	border: 2px solid #D4AF37;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
	z-index: 100520;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* Modal-specific help tooltip - positioned relative to viewport */
body > .help-tooltip,
.tm-field-editor-dialog .modal-help-wrapper .help-tooltip {
	position: fixed !important;
	top: 50vh !important;
	left: 50vw !important;
	transform: translate(-50%, -50%) !important;
	width: 60vw !important;
	max-width: 60vw !important;
	height: 60vh !important;
	max-height: 60vh !important;
	padding: 20px 24px !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	overflow-y: auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	z-index: 999999 !important;
	pointer-events: auto !important;
	opacity: 0;
	transition: opacity 0.2s ease;
}

body > .help-tooltip.visible,
.tm-field-editor-dialog .modal-help-wrapper .help-tooltip.visible {
	opacity: 1 !important;
}

.help-tooltip.visible {
	opacity: 1;
}

/* Tooltip arrow */
.help-tooltip::after {
	display: none;
}

/* Save states */
.attribute-wrapper.saving {
	opacity: 0.5;
	pointer-events: none;
	position: relative;
}

.attribute-wrapper.saving::after {
	content: "Saving...";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.9);
	color: #D4AF37;
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	border: 1px solid #D4AF37;
	z-index: 10;
}

.attribute-wrapper.save-success .attr-value {
	animation: highlight 0.6s ease;
}

@keyframes highlight {
	0%, 100% {
		background: transparent;
		color: #D4AF37;
	}
	50% {
		background: rgba(212, 175, 55, 0.3);
		color: #fff;
		padding: 2px 6px;
		border-radius: 3px;
	}
}

/* Owner hint text */
.owner-edit-hint {
	font-size: 11px;
	color: #666;
	font-weight: normal;
	margin-left: 12px;
	font-style: italic;
}

/* Hide Hair Style from Physical Attributes panel — gives a clean 2×4 grid layout.
   The field remains editable via the attribute editor when owner-viewing. */
.stat-item[data-field="talent_hair_style"] {
	display: none !important;
}
/* Owner exception: keep it visible in edit mode so the owner can manage the value */
.owner-viewing .attribute-wrapper.editing .stat-item[data-field="talent_hair_style"],
.owner-viewing .stat-item[data-field="talent_hair_style"].is-editing {
	display: flex !important;
}

/* Legacy rule for backward compatibility */
.attribute-slide-section:has(.attribute-wrapper.editing) {
	overflow: visible !important;
}

/* Allow help tooltip to escape overflow container */
.attribute-slide-section:has(.help-tooltip) {
	overflow-y: visible !important;
	overflow-x: visible !important;
}

/* Ensure section title has high z-index only when help tooltip is active */
.section-title {
	position: relative;
	z-index: 1;
}

.section-title:has(.help-tooltip) {
	z-index: 10002;
}

.help-icon-wrapper {
	position: relative;
	display: inline-block;
	z-index: 10003;
}

/* ===================================================================
   Profile Info Inline Editing (Avatar, Name, Location)
   =================================================================== */

/* Positioning anchors — replace rules formerly provided by Dokan's stylesheet.
   .profile-info-box spans the full cinematic banner height and is the
   intended anchor for all absolute-positioned edit controls. */
.profile-info-box {
	position: relative;
}

.profile-info-summery-wrapper {
	position: relative;
}

.profile-info-summery {
	position: relative;
}

/* Avatar Edit Button */
.profile-img.editable-avatar {
	position: relative;
	cursor: pointer;
}

.profile-img.editable-avatar:hover {
	opacity: 0.9;
}

.edit-avatar-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(212, 175, 55, 0.95);
	border: 2px solid #D4AF37;
	color: #000;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	line-height: 1;
	padding: 0;
	transition: all 0.3s ease;
	z-index: 10;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.edit-avatar-btn:hover {
	background: #D4AF37;
	transform: translate(-50%, -50%) scale(1.05);
	box-shadow: 0 4px 12px rgba(212, 175, 55, 0.5);
}

.edit-avatar-btn i {
	pointer-events: none;
}

.banner-edit-actions {
	display: flex;
	gap: 8px;
	z-index: 90;
	pointer-events: auto;
	--panel-width: clamp(280px, calc(50vh / 1.618), 360px);
	width: var(--panel-width) !important;
	max-width: var(--panel-width) !important;
	/* Fixed positioning mirrors .profile-info-head so the bar always aligns
	   with the top-left of the sidebar panel regardless of DOM parent height. */
	position: fixed !important;
	left: 0 !important;
	top: calc(50vh - 50vh / 2 - 34px) !important;
	transform: translateX(0) !important;
	justify-content: center;
}

body.tm-mobile-portrait .banner-edit-actions {
	left: 50% !important;
	top: 10vh !important;
	transform: translate(-50%, 0) !important;
}

body.tm-mobile-landscape .banner-edit-actions {
	left: 50% !important;
	top: 25vh !important;
	transform: translate(-50%, 0) !important;
}

body.tm-mobile-landscape.tm-talent-panel-open .banner-edit-actions {
	left: auto !important;
	right: 0 !important;
	transform: none !important;
}

.edit-banner-btn,
.edit-media-btn {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(212, 175, 55, 0.95);
	border: 2px solid #D4AF37;
	color: #000;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	padding: 0;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	pointer-events: auto;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.edit-banner-btn:hover,
.edit-media-btn:hover {
	transform: scale(1.06);
	box-shadow: 0 4px 14px rgba(212, 175, 55, 0.5);
}

.banner-edit-actions--showcase {
	width: auto !important;
	max-width: none !important;
	padding-inline: 12px;
}

.showcase-edit-profile-btn {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	min-height: 44px;
	border-radius: 999px;
	background: rgba(212, 175, 55, 0.95);
	border: 2px solid #D4AF37;
	color: #000;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0 16px;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	pointer-events: auto;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.showcase-edit-profile-btn:hover,
.showcase-edit-profile-btn:focus-visible {
	transform: scale(1.03);
	box-shadow: 0 4px 14px rgba(212, 175, 55, 0.5);
	color: #000;
	text-decoration: none;
}

/* Safety fallback: suppress any leaking edit UI on actual Showcase takeover pages.
 * IMPORTANT: Use page-template-template-talent-showcase (WP template body class) NOT
 * tm-showcase-page, because person profile pages also get tm-showcase-page due to
 * their queried object being the showcase home page. */
body.page-template-template-talent-showcase .editable-field,
body.page-template-template-talent-showcase .editable-avatar,
body.page-template-template-talent-showcase .edit-avatar-btn,
body.page-template-template-talent-showcase .edit-banner-btn,
body.page-template-template-talent-showcase .edit-media-btn,
body.page-template-template-talent-showcase .edit-field-btn,
body.page-template-template-talent-showcase .tab-edit-icon,
body.page-template-template-talent-showcase .edit-attr-btn,
body.page-template-template-talent-showcase .tm-onboard-actions {
	display: none !important;
}

.edit-banner-btn__pen {
	position: absolute;
	bottom: 6px;
	right: 7px;
	font-size: 10px;
}



/* ===================================================================
   Branded Media Library (Avatar picker)
   =================================================================== */

.media-modal {
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(6px);
}

#wp-media-modal {
	width: 70vw;
	height: 70vh;
	max-width: 1200px;
	max-height: 760px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

body.tm-media-editor-open #wp-media-modal {
	width: 90vw;
	height: 90vh;
	max-width: none;
	max-height: none;
}

.media-modal .media-modal-content {
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 
		0 8px 32px 0 rgba(0, 0, 0, 0.37),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

/* Mobile-only: larger size for better visibility */
@media (max-width: 480px) {
	#wp-media-modal {
		width: 90vw;
		height: 90vh;
	}
}

.media-modal .media-frame {
	background: rgba(10, 10, 10, 0.85);
	color: #e7e3d9;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.media-modal .media-frame-title {
	background: linear-gradient(90deg, rgba(212, 175, 55, 0.25), rgba(0, 0, 0, 0));
	color: #d4af37;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	flex: 0 0 10%;
	min-height: 50px;
	max-height: 80px;
	display: flex;
	align-items: center;
	padding: 0 20px;
}

.media-modal .media-frame-title h1 {
	margin: 0;
	color: #D4AF37;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
}

.media-modal .media-frame-title .media-help-wrapper {
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
}

.media-modal .media-frame-title .media-help-wrapper .help-toggle-btn {
	font-size: 16px;
	color: #888;
	cursor: pointer;
}

.media-modal .media-frame-router,
.media-modal .media-frame-toolbar {
	background: #101010;
	border-bottom: 1px solid rgba(212, 175, 55, 0.25);
}

/* Playlist editor: hide left sidebar/menu to match banner media layout */
body.tm-media-playlist-editor .media-frame-menu,
body.tm-media-playlist-editor .media-menu,
body.tm-media-playlist-editor .media-frame-menu-heading,
body.tm-media-playlist-editor .media-frame-menu-toggle {
	display: none !important;
}

body.tm-media-playlist-editor .media-frame-content {
	left: 0 !important;
}

/* Fix the left gap by resetting position for title, router, and toolbar */
body.tm-media-playlist-editor .media-frame-title,
body.tm-media-playlist-editor .media-frame-router,
body.tm-media-playlist-editor .media-frame-toolbar {
	left: 0 !important;
}

.media-modal .media-frame-toolbar {
	flex: 0 0 10%;
	max-height: 80px;
	border-bottom: 0;
	border-top: 1px solid #D4AF37;
}

/* Playlist router action (Clear Playlist) */
body.tm-media-playlist-editor .media-frame-router {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

body.tm-media-playlist-editor .media-frame-router .media-router {
	flex: 1 1 auto;
}

body.tm-media-playlist-editor .media-frame-router .tm-media-router-actions {
	flex: 0 0 auto;
	margin-left: 12px;
}

body.tm-media-playlist-editor .media-frame-router .tm-clear-playlist-btn {
	height: 30px;
	line-height: 30px;
	padding: 0 12px;
	font-size: 12px;
	border-radius: 6px;
	background: #D4AF37;
	border: 1px solid #C79A2B;
	color: #111111;
	box-shadow: 0 2px 8px rgba(212, 175, 55, 0.25);
	text-transform: uppercase;
	letter-spacing: 0.6px;
}

body.tm-media-playlist-editor .media-frame-router .tm-clear-playlist-btn:hover,
body.tm-media-playlist-editor .media-frame-router .tm-clear-playlist-btn:focus {
	background: #E2C05A;
	border-color: #D4AF37;
	color: #111111;
	box-shadow: 0 2px 10px rgba(212, 175, 55, 0.35);
}

@media (max-width: 900px) {
	body.tm-media-playlist-editor .media-frame-router {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	body.tm-media-playlist-editor .media-frame-router .tm-media-router-actions {
		margin-left: 0;
	}
}

.media-modal .media-frame-toolbar .media-toolbar {
	background: transparent;
	border: 0;
	align-items: center;
}

.media-frame-toolbar .media-toolbar {
	top: auto;
	bottom: -47px;
	overflow: visible;
	border-top: 1px solid #dcdcde;
}

.media-modal .media-toolbar {
	color: #d8d1c1;
}

.media-toolbar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 0 16px;
	border: 0 solid #dcdcde;
	overflow: hidden;
}

.media-modal .media-router > a {
	color: #b9b2a0;
	border-bottom: 2px solid transparent;
	padding: 5px 12px;
}

.media-modal .media-router > a.active,
.media-modal .media-router > a:hover {
	color: #d4af37;
	border-bottom-color: #d4af37;
}

.media-router .active,
.media-router .media-menu-item.active:last-child {
	margin: -1px -1px 0;
	border: 1px solid #dcdcde;
	border-bottom: none;
}

.media-modal .media-frame-content {
	background: radial-gradient(circle at top left, rgba(212, 175, 55, 0.12), transparent 55%), rgba(8, 8, 8, 0.85);
	flex: 1 1 80%;
	min-height: 0;
	overflow: auto;
}

.media-modal .attachments-browser .media-toolbar {
	background: #0f0f0f;
	border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.media-modal select,
.media-modal input[type="text"],
.media-modal input[type="search"] {
	background: #2a2a2a;
	color: #f0f0f0;
	border: 1px solid #444;
	border-radius: 6px;
}

.media-frame input[type=color],
.media-frame input[type=date],
.media-frame input[type=datetime-local],
.media-frame input[type=datetime],
.media-frame input[type=email],
.media-frame input[type=month],
.media-frame input[type=number],
.media-frame input[type=password],
.media-frame input[type=search],
.media-frame input[type=tel],
.media-frame input[type=text],
.media-frame input[type=time],
.media-frame input[type=url],
.media-frame input[type=week],
.media-frame select,
.media-frame textarea {
	box-shadow: 0 0 0 transparent;
	border-radius: 4px;
	border: 1px solid #8c8f94;
	color: #ffffff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 13px;
	line-height: 1.38461538;
}

.media-modal-content .media-frame select.attachment-filters {
	margin-top: 32px;
	margin-right: 2%;
	width: fit-content;
}

.media-frame select.attachment-filters {
	margin-top: 11px;
	margin-right: 2%;
	max-width: 42%;
	max-width: fit-content;
}

.media-modal select:focus,
.media-modal input[type="text"]:focus,
.media-modal input[type="search"]:focus {
	border-color: #D4AF37;
	box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.35);
}

.media-modal .attachment {
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(255, 255, 255, 0.02);
	border-radius: 10px;
}

.media-modal .attachment:hover,
.media-modal .attachment.selected {
	border-color: #d4af37;
	box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

.media-modal .attachment-preview {
	background: #0a0a0a;
}

.media-modal .attachment-preview .thumbnail {
	border-radius: 8px;
}

.media-modal .attachment-details {
	background: #0f0f0f;
	color: #e7e3d9;
}

.media-modal .media-sidebar {
	background: #0f0f0f;
}

.media-modal .attachment-details .details {
	color: #b9b2a0;
}

.media-modal .media-toolbar-primary .button,
.media-modal .media-toolbar-secondary .button,
.media-modal .media-button {
	padding: 12px 28px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
	text-transform: uppercase;
	transition: all 0.2s ease;
	border: 2px solid;
}

/* Normalize WP media select button sizing before selection */
.media-modal .media-button.button-large,
.media-modal .media-button.media-button-select {
	padding: 8px 28px !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	border-radius: 6px;
}

.wp-core-ui .attachment-preview {
	position: relative;
	box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
	background: #f0f0f1;
	cursor: pointer;
}

.media-modal .media-toolbar-primary .button[disabled],
.media-modal .media-button.button-primary[disabled],
.media-modal .media-toolbar-primary .button.disabled,
.media-modal .media-button.button-primary.disabled {
	background: linear-gradient(135deg, #3f3f3f 0%, #555 100%);
	color: #bfbfbf;
	border-color: #5a5a5a;
	box-shadow: none;
	transform: none;
}

.media-modal .media-toolbar-primary .button,
.media-modal .media-button.button-primary {
	background: linear-gradient(135deg, #D4AF37 0%, #f4c430 100%);
	color: #000;
	border-color: #D4AF37;
}

.media-modal .media-toolbar-primary .button:hover,
.media-modal .media-button.button-primary:hover {
	background: linear-gradient(135deg, #f4c430 0%, #D4AF37 100%);
	box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
	transform: translateY(-1px);
}

.media-modal .media-toolbar-secondary .button,
.media-modal .media-button.button-secondary {
	background: linear-gradient(135deg, #444 0%, #666 100%);
	color: #fff;
	border-color: #666;
}

.media-modal .media-toolbar-secondary .button:hover,
.media-modal .media-button.button-secondary:hover {
	background: linear-gradient(135deg, #666 0%, #888 100%);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
	transform: translateY(-1px);
}

.media-modal .media-toolbar-primary .button:hover,
.media-modal .media-toolbar-secondary .button:hover,
.media-modal .media-button:hover {
	background: #e6c358;
	border-color: #e6c358;
}

.media-modal .media-modal-close {
	color: #d4af37;
}

.media-modal .media-modal-close:hover {
	color: #e6c358;
}

.media-modal input[type="search"],
.media-modal input[type="text"],
.media-modal select {
	background: #0f0f0f;
	border: 1px solid rgba(212, 175, 55, 0.3);
	color: #e7e3d9;
	border-radius: 8px;
}

.media-modal label,
.media-modal .media-toolbar label,
.media-modal .media-toolbar .search,
.media-modal .media-toolbar .search label {
	color: #d8d1c1;
}

.media-modal .media-toolbar {
	color: #d8d1c1;
}

.media-modal .media-toolbar .search input[type="search"] {
	color: #e7e3d9;
}

.media-modal .attachment-details h2,
.media-modal .attachment-details h3,
.media-modal .attachment-details strong {
	color: #d4af37;
}

.media-modal .attachment-details label {
	color: #d8d1c1;
}

.media-modal .attachment-details input,
.media-modal .attachment-details textarea,
.media-modal .attachment-details select {
	background: #0f0f0f;
	color: #e7e3d9;
	border: 1px solid rgba(212, 175, 55, 0.35);
}

.media-modal .media-frame-router .media-router button,
.media-modal .media-frame-router .media-router a {
	color: #d8d1c1;
}

.media-modal .media-frame-router .media-router .active,
.media-modal .media-frame-router .media-router button.active,
.media-modal .media-frame-router .media-router a.active {
	color: #d4af37;
}

.media-modal .media-sidebar .setting,
.media-modal .media-sidebar .setting label {
	color: #b9b2a0;
}

.media-modal .media-sidebar input,
.media-modal .media-sidebar textarea {
	background: #0f0f0f;
	border: 1px solid rgba(212, 175, 55, 0.3);
	color: #e7e3d9;
	border-radius: 6px;
}

/* Remove unused attachment detail fields */
.media-modal .attachment-details #alt-text-description,
.media-modal .attachment-details [data-setting="caption"],
.media-modal .attachment-details [data-setting="url"],
.media-modal .attachment-details .compat-item,
.media-modal .attachment-details .compat-attachment-fields {
	display: none !important;
}

/* Store Name & Location Editable Fields */
.store-name-wrapper,
.location-wrapper,
.store-categories-wrapper,
.role-wrapper {
	position: static !important; /* Allow popups to break out */
	display: flex !important;
	justify-content: center !important;
}

/* Add breathing room between Name/Categories/Location elements */
.talent-info-block .store-name-wrapper {
	margin-bottom: 8px !important;
}

/* Store name pill is now part of the unified pill design system above.
   Only font-specific overrides remain here (gold color + glow text-shadow). */

.talent-info-block .role-wrapper,
.talent-info-block .store-categories-wrapper {
	margin-bottom: 8px !important;
}

.talent-info-block .location-wrapper {
	margin-bottom: 0 !important; /* Last element doesn't need bottom margin */
}

.editable-field .field-display {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

.profile-info-content .editable-field .field-display {
	padding-right: 28px;
}

.editable-field .edit-field-btn {
	opacity: 1;
	background: transparent;
	border: none;
	color: #D4AF37;
	cursor: pointer;
	padding: 4px 8px;
	font-size: 14px;
	transition: opacity 0.2s ease;
	margin-left: 8px;
}

/* Hover effect for the button itself */
.editable-field .edit-field-btn:hover {
	color: #fff;
}

/* Store Name Specific Styling */
.store-name-wrapper .field-display {
	width: auto !important;
	display: inline-flex !important;
	position: relative !important;
	justify-content: center;
}

/* Note: display/padding/background are owned by the canonical pill rule above.
   This block only sets margin and white-space for the h1 inside the wrapper. */
.store-name-wrapper .store-name {
	margin: 0;
	white-space: nowrap !important;
}

.store-name-wrapper .field-edit,
.store-categories-wrapper .field-edit,
.location-wrapper .field-edit {
	display: none;
}

.contact-info-wrapper .field-edit,
.contact-email-wrapper .field-edit,
.contact-phone-wrapper .field-edit {
	display: none;
}

/* Ensure buttons and inputs inside the editor are properly stacked */
.store-name-wrapper .field-edit > *,
.store-categories-wrapper .field-edit > *,
.location-wrapper .field-edit > * {
	margin: 0 !important; /* Reset inline margins to let Gap control spacing */
	width: 100% !important; /* Ensure inputs take full width */
	flex-shrink: 0;
}

.location-wrapper .inline-mapbox-panel {
	display: flex;
	padding: 10px;
}

/* Removed Legacy Map Panel Queries */

.inline-mapbox-map {
	width: 100%;
	height: 100%;
	min-height: 250px;
	border-radius: 4px;
}

/* Categories Specific Styling */
.store-categories-wrapper .field-display {
	width: auto !important;
	display: inline-flex !important;
	position: relative !important;
	justify-content: center;
}

/* Vendor dashboard category/attribute styling */
.physical-attributes-section h3,
.cameraman-section-header h3 {
	color: #D4AF37 !important;
	font-size: 18px !important;
	margin-top: 30px !important;
	margin-bottom: 20px !important;
	padding-bottom: 10px !important;
	border-bottom: 2px solid #f05025 !important;
}

.dokan-form-group label[for^="talent_"] {
	color: #C0C0C0 !important;
}

label[for="camera_type"],
label[for="experience_level"],
label[for="editing_software"],
label[for="specialization"],
label[for="years_experience"],
label[for="equipment_ownership"],
label[for="lighting_equipment"],
label[for="audio_equipment"],
label[for="drone_capability"],
[data-category] .dokan-control-label,
[data-category] label,
.dokan-dashboard .dokan-settings-content .dokan-form-group label,
.dokan-dashboard .dokan-settings-content .dokan-control-label,
.dokan-dashboard .dokan-settings-content label.dokan-w3,
.dokan-dashboard .dokan-form-group label,
.dokan-dashboard .dokan-control-label,
.dokan-settings-area label,
.dokan-settings-area .dokan-control-label,
body .dokan-dashboard .dokan-form-group label {
	color: #ffffff !important;
}

.dokan-dashboard .dokan-settings-content h2,
.dokan-dashboard .dokan-settings-content h3 {
	color: #D4AF37 !important;
}

.dokan-dashboard input[type="text"],
.dokan-dashboard input[type="email"],
.dokan-dashboard input[type="tel"],
.dokan-dashboard select,
.dokan-dashboard textarea {
	color: #333333 !important;
	background: #ffffff !important;
}

.profile-info-content .store-categories-display {
	position: relative;
	/* padding-right reset removed — edit btn is inline; asymmetric padding caused right-alignment bug */
}

/* Edit Buttons - Inline positioning naturally next to text for responsiveness */
.store-name-wrapper .edit-field-btn,
.location-wrapper .edit-field-btn,
.store-categories-wrapper .edit-field-btn {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	margin-left: 8px !important;
	width: auto !important;
	vertical-align: middle !important;
}

.profile-info-content .profile-edit-btn {
	position: absolute !important;
	right: 0 !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	margin-left: 0 !important;
}

/* Mapbox Geocoder Wrapper */
.mapbox-geocoder-wrapper {
	margin-bottom: 10px;
}

.mapbox-geocoder-wrapper .mapboxgl-ctrl-geocoder {
	width: 100%;
	max-width: none;
	box-shadow: none;
	background: rgba(0, 0, 0, 0.7);
	border: 2px solid #D4AF37;
	border-radius: 4px;
}

.mapbox-geocoder-wrapper .mapboxgl-ctrl-geocoder--input {
	background: transparent;
	color: #fff;
	padding: 10px;
	font-size: 14px;
}

.mapbox-geocoder-wrapper .mapboxgl-ctrl-geocoder--input::placeholder {
	color: #888;
}

.mapbox-geocoder-wrapper .mapboxgl-ctrl-geocoder--icon {
	fill: #D4AF37;
}

.mapbox-geocoder-wrapper .mapboxgl-ctrl-geocoder--button {
	background: transparent;
}

.mapbox-geocoder-wrapper .suggestions {
	background: rgba(0, 0, 0, 0.95);
	border: 1px solid #D4AF37;
	border-top: none;
}

.mapbox-geocoder-wrapper .suggestions > li > a {
	color: #fff;
	padding: 10px;
}

.mapbox-geocoder-wrapper .suggestions > .active > a,
.mapbox-geocoder-wrapper .suggestions > li > a:hover {
	background: rgba(212, 175, 55, 0.2);
	color: #D4AF37;
}

/* Inline Mapbox panel for location editing */
.profile-info-head {
	position: relative;
}

/* The standard unified rule now handles .location-wrapper .field-edit */
/* The sidecar rule now handles .inline-mapbox-panel */
/* Profile info editor controls */
.profile-info-content .field-edit label,
.profile-info-content .attribute-edit label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	color: #D4AF37;
}


.profile-info-content .field-edit .edit-field-input,
.profile-info-content .attribute-edit select,
.profile-info-content .attribute-edit input {
	width: 100%;
	padding: 10px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	border: 2px solid #D4AF37;
	font-size: 14px;
}

/* 7. The 10% Footer (Action Buttons) - Section Overlay */
.overlay-section.section-editing .field-edit-actions {
	flex: 0 0 10% !important;
	min-height: 10% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 15px 20px !important;
	background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%) !important;
	border-top: 1px solid #D4AF37 !important;
	margin: 0 !important;
}

.overlay-section.section-editing .save-field-btn,
.overlay-section.section-editing .cancel-field-btn {
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all 0.3s ease;
	min-width: 100px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.overlay-section.section-editing .save-field-btn {
	background: linear-gradient(135deg, #D4AF37 0%, #f4c430 100%);
	color: #000;
	border-color: #D4AF37;
}

.overlay-section.section-editing .save-field-btn:hover {
	background: linear-gradient(135deg, #f4c430 0%, #D4AF37 100%);
	box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
	transform: translateY(-1px);
}

.overlay-section.section-editing .cancel-field-btn {
	background: linear-gradient(135deg, #444 0%, #666 100%);
	color: #fff;
	border-color: #666;
}

.overlay-section.section-editing .cancel-field-btn:hover {
	background: linear-gradient(135deg, #666 0%, #888 100%);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
	transform: translateY(-1px);
}

/* Legacy support for non-section overlays */
.profile-info-content .field-edit-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.profile-info-content .save-field-btn,
.profile-info-content .cancel-field-btn {
	padding: 8px 16px;
	font-size: 14px;
	border-radius: 3px;
	cursor: pointer;
	border: 1px solid transparent;
}

.profile-info-content .save-field-btn {
	background: #D4AF37;
	color: #000;
	font-weight: 600;
}

.profile-info-content .cancel-field-btn {
	background: #333;
	color: #fff;
	border-color: #555;
}

.profile-info-content .multi-select-indicator {
	margin-left: 8px;
	font-size: 11px;
	color: #999;
	font-weight: 400;
}

.profile-info-content .help-toggle-btn {
	margin-left: 6px;
	font-size: 12px;
	color: #888;
}

.inline-mapbox-panel .inline-mapbox-search {
	padding: 10px;
	border-bottom: 1px solid rgba(212, 175, 55, 0.5);
}

.inline-mapbox-panel .inline-mapbox-map {
	width: 100%;
	height: 240px;
}

@media (max-width: var(--bp-phone-landscape-max)) {
	.inline-mapbox-panel {
		position: static;
		width: 100%;
		margin: 12px 0 0 0;
	}
}

.inline-mapbox-panel .mapboxgl-ctrl-geocoder {
	width: 100%;
	max-width: none;
	box-shadow: none;
}

.inline-mapbox-panel .mapboxgl-ctrl-geocoder--input {
	padding-left: 36px;
	background-position: 10px center;
}

.inline-mapbox-panel .mapboxgl-ctrl-geocoder--icon {
	fill: #D4AF37 !important;
}

.inline-mapbox-panel .mapboxgl-ctrl-geocoder--button {
	background: transparent !important;
}

.inline-mapbox-panel .suggestions {
	background: #000;
	border: 1px solid #D4AF37;
	border-top: none;
}

.inline-mapbox-panel .suggestions > li > a {
	color: #fff;
}

.inline-mapbox-panel .suggestions > .active > a,
.inline-mapbox-panel .suggestions > li > a:hover {
	background: rgba(212, 175, 55, 0.2);
	color: #D4AF37;
}

/* Notification Styles */
.vendor-notification {
	font-size: 14px;
	font-weight: 600;
	animation: slideInRight 0.3s ease;
	z-index: 999999 !important;
	pointer-events: auto !important;
}

.mapboxgl-popup,
.mapboxgl-ctrl-top-right,
.mapboxgl-ctrl-top-left,
.tm-location-modal {
	z-index: 10000 !important;
}

@keyframes slideInRight {
	from {
		transform: translateX(100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* UNIVERSAL SECTION OVERLAY EDITOR PATTERN */
/* 1. Section containers must have position relative */
.overlay-section {
	position: relative !important;
}

/* 2. When editing mode is active, the section gets overlay styling */
.overlay-section.section-editing {
	overflow: visible !important;
}

/* 3. The Editor Overlay - Full Section Coverage */
.overlay-section.section-editing > .editing > .field-edit,
.overlay-section.section-editing > .editing > .attribute-edit {
	display: flex !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: rgba(26, 26, 26, 0.98) !important;
	z-index: 99999 !important;
	flex-direction: column !important;
	padding: 0 !important;
	border: 2px solid #D4AF37 !important;
	border-radius: 8px !important;
	box-shadow: 
		0 8px 32px rgba(0, 0, 0, 0.8),
		0 0 40px rgba(212, 175, 55, 0.2) !important;
	transform: none !important;
	overflow: visible !important;
}

/* ========================================= */
/* PROFILE HEAD CONTENT SWAP EDITOR */
/* ========================================= */

/* 1. When editing - hide existing content and change background */
.profile-info-head.head-editing {
	background: #2a2a2a !important;
}

/* 3. Keep content container visible for editor */
.profile-info-head.head-editing .profile-info-content {
	display: block !important;
	position: relative !important;
	height: 100% !important;
}

/* Hide normal display blocks while editing */
.profile-info-head.head-editing .profile-info-content .field-display {
	display: none !important;
}

/* Make the active editable field fill the container */
.profile-info-head.head-editing .profile-info-content .editable-field {
	position: relative !important;
}

.profile-info-head.head-editing .profile-info-content .editable-field.editing {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

/* Hide non-active fields while editing head fields */
.profile-info-head.head-editing .profile-info-content .editable-field:not(.editing) {
	display: none !important;
}

/* Hide display-layer contact title while editing */
.profile-info-head.head-editing .contact-info-title {
	display: none !important;
}

/* Remove contact card chrome during head editing */
.profile-info-head.head-editing .contact-info-section {
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
}

/* Show only the active editor */
.profile-info-head.head-editing .editable-field:not(.editing) .field-edit {
	display: none !important;
}

.profile-info-head.head-editing .editable-field.editing .field-edit {
	display: flex !important;
}

/* 4. Editor positioned directly in profile-info-head container */
.profile-info-head.head-editing .editable-field.editing .field-edit {
	display: flex !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: transparent !important;
	flex-direction: column !important;
	padding: 0 !important;
	border: none !important;
}

/* FALLBACK: Show field-edit if display is hidden (covers cases where editing class missing) */
.profile-info-head.head-editing .editable-field .field-edit[style*="display: block"],
.profile-info-head.head-editing .editable-field .field-edit:not([style*="display: none"]) {
	display: flex !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: transparent !important;
	flex-direction: column !important;
	padding: 0 !important;
	border: none !important;
}

/* Simple visibility for editor elements */
.profile-info-head.head-editing .field-edit,
.profile-info-head.head-editing .field-edit * {
	visibility: visible !important;
	opacity: 1 !important;
}

/* Ensure field-edit is flex container */
.profile-info-head.head-editing .field-edit {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	min-height: 0 !important;
}

/* 5. The Header (Label) - 10% */
.profile-info-head.head-editing .field-edit > label {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 10% !important;
	min-height: 48px !important;
	max-height: 15% !important;
	padding: 15px 20px !important;
	background: rgba(0, 0, 0, 0.3) !important;
	border-bottom: 1px solid #D4AF37 !important;
	color: #D4AF37 !important;
	font-weight: bold !important;
	text-transform: uppercase !important;
	font-size: 14px !important;
}

/* 6. Content area - 80% (body wrapper preferred, legacy fallback supported) */
.profile-info-head.head-editing .field-edit > .field-edit-body,
.profile-info-head.head-editing .field-edit > :not(label):not(.field-edit-actions):not(.field-edit-body) {
	flex: 1 0 auto !important;
	padding: 0px 16px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
	min-height: 0 !important;
	overflow-y: auto !important;
}

/* Contact editor body scrolling */
.profile-info-head.head-editing .contact-edit-entries {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
}

/* Natural-height elements should not stretch in the body area */
.profile-info-head.head-editing .field-edit-body > :not(select[multiple]):not(textarea):not(.contact-edit-entries),
.profile-info-head.head-editing .field-edit > :not(label):not(.field-edit-actions):not(.field-edit-body):not(select[multiple]):not(textarea) {
	flex: 0 0 auto !important;
	align-self: stretch !important;
}

/* Multi-selects should fill the available body height */
.profile-info-head.head-editing .field-edit-body > select[multiple],
.profile-info-head.head-editing .field-edit > select[multiple]:not(.field-edit-body *) {
	flex: 1 1 auto !important;
	min-height: 250px !important;
	height: 100% !important;
}

/* Input fields */
.profile-info-head.head-editing input:not([type="radio"]),
.profile-info-head.head-editing select {
	width: 100% !important;
	padding: 8px 12px !important;
	background: rgba(255, 255, 255, 0.95) !important;
	border: 2px solid #444 !important;
	border-radius: 6px !important;
	color: #000 !important;
	font-size: 14px !important;
}

.profile-info-head.head-editing input[type="radio"] {
	width: auto !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

/* 7. Multi-select options styling */
.profile-info-head.head-editing select[multiple] option {
	color: #000 !important;
	background: #fff !important;
	padding: 8px 12px !important;
	border-bottom: 1px solid #eee !important;
}

.profile-info-head.head-editing select[multiple] option:selected {
	color: #fff !important;
	background: #D4AF37 !important;
	font-weight: bold !important;
}

.profile-info-head.head-editing select[multiple] option:hover {
	background: #f0f0f0 !important;
}

/* 9. Single input fields - NATURAL HEIGHT, NO STRETCHING */
.profile-info-head.head-editing .field-edit > input[type="text"]:not([style*="display: none"]),
.profile-info-head.head-editing .field-edit > input[type="email"]:not([style*="display: none"]),
.profile-info-head.head-editing .field-edit > input[type="url"]:not([style*="display: none"]),
.profile-info-head.head-editing .field-edit > textarea:not([style*="display: none"]) {
	flex: 0 0 auto !important;
	height: 45px !important;
	min-height: 45px !important;
	max-height: 45px !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 12px 15px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #444 !important;
    border-radius: 6px !important;
    color: #000 !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    align-self: flex-start !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    z-index: 1001 !important;
}

.profile-info-head.head-editing .field-edit > input:focus,
.profile-info-head.head-editing .field-edit > select:focus {
	border-color: #D4AF37 !important;
	outline: none !important;
	box-shadow: 0 0 10px rgba(212, 175, 55, 0.3) !important;
}

/* Action buttons */
.profile-info-head.head-editing .field-edit-actions {
	display: flex !important;
	justify-content: center !important;
	flex: 0 0 10% !important;
	min-height: 48px !important;
	max-height: 15% !important;
	gap: 20px !important;
	padding: 15px 20px !important;
	background: rgba(0, 0, 0, 0.3) !important;
	border-top: 1px solid #D4AF37 !important;
}

.profile-info-head.head-editing .save-field-btn,
.profile-info-head.head-editing .cancel-field-btn {
	padding: 12px 24px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	text-transform: uppercase !important;
}

.profile-info-head.head-editing .save-field-btn {
	background: linear-gradient(135deg, #D4AF37 0%, #f4c430 100%) !important;
	color: #000 !important;
	border-color: #D4AF37 !important;
}

.profile-info-head.head-editing .save-field-btn:hover {
	background: linear-gradient(135deg, #f4c430 0%, #D4AF37 100%);
	box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
	transform: translateY(-1px);
}

.profile-info-head.head-editing .cancel-field-btn {
	background: linear-gradient(135deg, #444 0%, #666 100%) !important;
	color: #fff !important;
	border-color: #666 !important;
}

.profile-info-head.head-editing .cancel-field-btn:hover {
	background: linear-gradient(135deg, #666 0%, #888 100%);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
	transform: translateY(-1px);
}

/* 4. The 10% Header (Label) - Section Overlay */
.overlay-section.section-editing .field-edit > label,
.overlay-section.section-editing .attribute-edit > label {
	flex: 0 0 10% !important;
	min-height: 10% !important;
	max-height: 15% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 15px 20px !important;
	background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%) !important;
	border-bottom: 1px solid #D4AF37 !important;
    color: #D4AF37 !important;
    font-weight: bold !important;
    text-transform: uppercase;
    font-size: 14px !important;
    letter-spacing: 1px;
}

/* 5. The 80% Body (Inputs/Maps) - Section Overlay */
.overlay-section.section-editing .attribute-edit > :not(label):not(:last-child),
.overlay-section.section-editing .field-edit > select[multiple],
.overlay-section.section-editing .field-edit > div:not(.field-edit-actions) {
	flex: 1 1 80% !important;
	max-height: 80% !important;
	overflow-y: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    background: rgba(0, 0, 0, 0.3) !important;
}

/* 6. Input Field Styling - Section Overlay */
.overlay-section.section-editing .field-edit > input[type="text"],
.overlay-section.section-editing .field-edit > input[type="email"],
.overlay-section.section-editing .field-edit > input[type="url"],
.overlay-section.section-editing .field-edit > textarea {
	flex: 0 0 auto !important;
	height: 45px !important;
	max-height: 60px !important;
    width: calc(100% - 40px) !important;
    margin: 10px 20px !important;
    padding: 12px 15px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 2px solid #444 !important;
    border-radius: 6px !important;
    color: #000 !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
}

.overlay-section.section-editing .field-edit > input:focus,
.overlay-section.section-editing .field-edit > select:focus {
	border-color: #D4AF37 !important;
	outline: none !important;
	box-shadow: 0 0 10px rgba(212, 175, 55, 0.3) !important;
}

/* Multi-select specific sizing */
.profile-info-content.view-mode-editing select[multiple] {
	min-height: 200px !important;
	height: 100% !important;
}

/* Location editing: allow mapbox panel to break out of the scroll body */
.profile-info-content.view-mode-editing .location-wrapper .field-edit > :not(label):not(:last-child) {
	overflow: visible !important;
}

/* Layout fixes for Location Search & Map */
.profile-info-content.view-mode-editing .location-search-input {
    flex: 0 0 auto !important;
    margin: 10px !important;
    width: calc(100% - 20px) !important;
}

.profile-info-content.view-mode-editing .inline-mapbox-panel {
    position: static !important;
	height: auto !important;
    flex: 1 1 auto !important;
    border: none !important;
    margin: 0 !important;
	min-height: 240px !important;
}
.profile-info-content.view-mode-editing .inline-mapbox-panel .inline-mapbox-map {
	height: 100% !important;
	min-height: 240px !important;
}

/* Dedicated location editor modal */
.tm-location-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 100500;
}

.tm-location-modal.is-open {
	display: flex;
}

.tm-location-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(2px);
}

.tm-location-modal__dialog {
	position: relative;
	width: 80vw;
	height: 80vh;
	max-width: 1200px;
	max-height: 900px;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 10px;
	box-shadow: 
		0 8px 32px 0 rgba(0, 0, 0, 0.37),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
	z-index: 100510;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Mobile-only: larger size for map visibility */
@media (max-width: 480px) {
	.tm-location-modal__dialog {
		width: 90vw;
		height: 90vh;
	}
}

.tm-location-modal__close {
	display: none;
}

.tm-location-modal__content {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}

.tm-location-modal .field-edit {
	position: relative;
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
}

/* Title: Fixed 10% height */
.tm-location-modal .field-edit > label {
	position: relative;
	width: 100%;
	height: 10%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	background: #252525;
	color: #D4AF37;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	overflow: hidden;
}

/* Hidden input fields - don't affect layout */
.tm-location-modal .field-edit > input {
	display: none;
}

/* Map container: Fixed 80% height - ALWAYS */
.tm-location-modal .field-edit > .inline-mapbox-panel {
	position: relative;
	width: 100%;
	height: 80%;
	overflow: hidden;
	display: block;
}

.tm-location-modal .field-edit > .inline-mapbox-panel .inline-mapbox-search {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: auto;
	z-index: 10;
}

.tm-location-modal .field-edit > .inline-mapbox-panel .inline-mapbox-map {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100% !important;
	height: 100% !important;
}

.tm-location-modal .field-edit > .inline-mapbox-panel .inline-mapbox-map canvas {
	width: 100% !important;
	height: 100% !important;
}

/* Action buttons: Fixed 10% height */
.tm-location-modal .field-edit > .field-edit-actions {
	position: relative;
	width: 100%;
	height: 10%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	background: #111;
	border-top: 1px solid #333;
	overflow: hidden;
}

/* Button styling in modal - match inline editor styling */
.tm-location-modal .save-field-btn,
.tm-location-modal .cancel-field-btn {
	padding: 10px 24px;
	font-size: 14px;
	border-radius: 3px;
	cursor: pointer;
	border: 1px solid transparent;
	font-weight: 600;
}

.tm-location-modal .save-field-btn {
	background: #D4AF37;
	color: #000;
}

.tm-location-modal .cancel-field-btn {
	background: #333;
	color: #fff;
	border-color: #555;
}

/* Remove old duplicate rules */
.tm-location-modal .inline-mapbox-panel {
	/* Rules moved to .tm-location-modal .field-edit > .inline-mapbox-panel above */
}

.tm-location-modal .inline-mapbox-panel .inline-mapbox-map {
	/* Rules moved to .tm-location-modal .field-edit > .inline-mapbox-panel .inline-mapbox-map above */
}

/* 5. The 20% Footer (Buttons) */
.profile-info-content.view-mode-editing .field-edit > div:last-child,
.profile-info-content.view-mode-editing .attribute-edit > div:last-child {
	flex: 0 0 auto !important;
	min-height: 10% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
    gap: 20px !important;
	background: #111 !important;
	border-top: 1px solid #333 !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.profile-info-content.view-mode-editing button {
    margin: 0 !important;
    width: 120px !important;
}

/* ========================================= */
/* FIELD EDITOR MODAL (Portrait, 80vh × 65vw) */
/* ========================================= */

.tm-field-editor-modal {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 100500;
}

.tm-field-editor-modal.is-open {
	display: flex;
}

.tm-field-editor-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.tm-field-editor-dialog {
	position: relative;
	width: 65vw;
	height: 80vh;
	max-width: 600px;
	min-width: 320px;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 10px;
	box-shadow: 
		0 8px 32px 0 rgba(0, 0, 0, 0.37),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
	z-index: 100510;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Header: 10% fixed height */
.tm-field-editor-dialog .editor-header {
	flex: 0 0 10%;
	min-height: 50px;
	max-height: 80px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
	border-bottom: 1px solid #D4AF37;
}


.tm-field-editor-dialog .editor-title {
	margin: 0;
	color: #D4AF37;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	flex: 1 1 auto;
}

/* Body: 80% flexible height with scroll */
.tm-field-editor-dialog .editor-body {
	flex: 1 1 80%;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 20px;
	background: rgba(0, 0, 0, 0.3);
}

/* Location editor: map should fill the body height */
.tm-field-editor-modal.is-location-editor .editor-body {
	padding: 0;
	overflow: hidden;
	display: flex;
}

.tm-field-editor-modal.is-location-editor .editor-body .location-search-input {
	display: none;
}

.tm-field-editor-modal.is-location-editor.tm-location-manual-mode .editor-body {
	display: block;
	padding: 20px;
	overflow-y: auto;
	background: rgba(0, 0, 0, 0.35);
}

.tm-field-editor-modal.is-location-editor.tm-location-manual-mode .editor-body .location-search-input {
	display: block;
	width: 100%;
	margin: 0 0 12px 0;
}

.tm-field-editor-modal.is-location-editor.tm-location-manual-mode .inline-mapbox-panel {
	display: none;
}

.tm-field-editor-modal .tm-location-fallback-note {
	display: none;
	padding: 10px 12px;
	border: 1px solid rgba(212, 175, 55, 0.5);
	background: rgba(212, 175, 55, 0.14);
	color: #f6e6a9;
	font-size: 13px;
	line-height: 1.4;
	border-radius: 6px;
}

.tm-field-editor-modal.is-location-editor .inline-mapbox-panel {
	position: relative;
	width: 100%;
	height: 100%;
	flex: 1 1 auto;
	overflow: hidden;
}

.tm-field-editor-modal.is-location-editor .inline-mapbox-panel .inline-mapbox-search {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: auto;
	z-index: 10;
	border-bottom: 0;
	padding: 10px;
}

/* Location modal: position Mapbox controls below the search input */
.tm-field-editor-modal.is-location-editor .inline-mapbox-panel .mapboxgl-ctrl-top-right {
	top: 56px;
}

/* Location modal: hide bottom-right controls */
.tm-field-editor-modal.is-location-editor .inline-mapbox-panel .mapboxgl-ctrl-bottom-right {
	display: none;
}

/* Location modal: hide compass control */
.tm-field-editor-modal.is-location-editor .inline-mapbox-panel .mapboxgl-ctrl-compass {
	display: none;
}

.tm-field-editor-modal.is-location-editor .inline-mapbox-panel .inline-mapbox-map {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100% !important;
	height: 100% !important;
}

.tm-field-editor-modal.is-location-editor .inline-mapbox-panel .inline-mapbox-map canvas {
	width: 100% !important;
	height: 100% !important;
}

/* Prevent double border on Mapbox search input in location modal */
.tm-field-editor-modal.is-location-editor .inline-mapbox-panel .mapboxgl-ctrl-geocoder {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.tm-field-editor-modal.is-location-editor .inline-mapbox-panel .mapboxgl-ctrl-geocoder--input {
	background: #fff;
	border: 1px solid #d0d0d0;
	box-shadow: none;
}

/* Restore icon spacing in the Mapbox search input */
.tm-field-editor-modal.is-location-editor .inline-mapbox-panel .mapboxgl-ctrl-geocoder--input {
	padding-left: 36px !important;
	background-position: 10px center !important;
}

/* When body contains multi-select, disable outer scroll (use native dropdown scroll) */
.tm-field-editor-dialog .editor-body:has(select[multiple]) {
	overflow: hidden;
}

/* Footer: 10% fixed height */
.tm-field-editor-dialog .editor-footer {
	flex: 0 0 10%;
	min-height: 50px;
	max-height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 0 20px;
	background: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
	border-top: 1px solid #D4AF37;
}

.tm-field-editor-dialog .editor-save-btn,
.tm-field-editor-dialog .editor-cancel-btn {
	padding: 12px 28px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
	text-transform: uppercase;
	transition: all 0.2s ease;
	border: 2px solid;
}

.tm-field-editor-dialog .editor-save-btn {
	background: linear-gradient(135deg, #D4AF37 0%, #f4c430 100%);
	color: #000;
	border-color: #D4AF37;
}

.tm-field-editor-dialog .editor-save-btn:hover {
	background: linear-gradient(135deg, #f4c430 0%, #D4AF37 100%);
	box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
	transform: translateY(-1px);
}

.tm-field-editor-dialog .editor-cancel-btn {
	background: linear-gradient(135deg, #444 0%, #666 100%);
	color: #fff;
	border-color: #666;
}

.tm-field-editor-dialog .editor-cancel-btn:hover {
	background: linear-gradient(135deg, #666 0%, #888 100%);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
	transform: translateY(-1px);
}

/* Modal body content styles */
.tm-field-editor-dialog .editor-body select[multiple] {
	width: 100%;
	min-height: 300px;
	min-height: -webkit-fill-available;
	padding: 8px;
	background: rgba(255, 255, 255, 0.95);
	border: 2px solid #444;
	border-radius: 6px;
	color: #000;
	font-size: 14px;
}

.tm-field-editor-dialog .editor-body select[multiple] option {
	padding: 10px 12px;
	border-bottom: 1px solid #eee;
}

.tm-field-editor-dialog .editor-body select[multiple] option:selected {
	background: #D4AF37;
	color: #fff;
	font-weight: bold;
}

.tm-field-editor-dialog .editor-body input[type="text"],
.tm-field-editor-dialog .editor-body input[type="email"] {
	width: 100%;
	padding: 8px 12px;
	background: rgba(255, 255, 255, 0.95);
	border: 2px solid #444;
	border-radius: 6px;
	color: #000;
	font-size: 14px;
	margin-bottom: 8px;
}

.tm-field-editor-dialog .editor-body input[type="radio"] {
	width: auto;
	margin: 0;
}

/* Contact editor specific styles in modal */
.tm-field-editor-dialog .contact-main-summary {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 12px;
	color: #fff;
}

.tm-field-editor-dialog .contact-main-summary .contact-label {
	flex: 0 0 auto;
	color: #D4AF37;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.tm-field-editor-dialog .contact-main-summary .contact-value {
	flex: 1 1 auto;
	color: #fff;
	font-size: 14px;
}

.tm-field-editor-dialog .contact-edit-entries {
	margin-top: 12px;
}

.tm-field-editor-dialog .contact-edit-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tm-field-editor-dialog .contact-edit-row {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	gap: 6px 10px;
	align-items: center;
}

.tm-field-editor-dialog .contact-edit-row .edit-field-input {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
}

.tm-field-editor-dialog .contact-main-choice {
	display: inline-flex;
	 align-items: center;
	gap: 6px;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #D4AF37;
	grid-column: 1;
	grid-row: 2;
}

.tm-field-editor-dialog .contact-main-choice input[type="radio"] {
	accent-color: #D4AF37;
}

/* ==========================================================================
   STORE UI - TABS, DRAWER, PANELS, ATTRIBUTES, SOCIAL, PROFILE LAYOUT
   Migrated from player.css (plugin) to vendor-store.css (theme)  these
   styles belong to the store UI layer, not the media player itself.
   ========================================================================== */

.profile-bottom-drawer .attribute-slide-section {
	margin: 0 !important;
}

/* Bottom trigger tabs - simplified clickable buttons */
.profile-bottom-tabs {
	position: absolute !important;
	bottom: 0 !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	display: flex !important;
	gap: 15px !important;
	z-index: 101 !important;
	pointer-events: auto !important;
}

.bottom-tab-item {
	position: relative !important;
	width: 297px !important;
	pointer-events: all !important;
	background: transparent !important;
	cursor: pointer !important;
}

.bottom-tab-label {
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 1.2px !important;
	text-transform: uppercase !important;
	color: #D4AF37 !important;
	text-align: center !important;
	background: rgba(0, 0, 0, 0.6) !important;
	/* backdrop-filter omitted here — always-on blur over a hardware-decoded video
	   triggers GPU compositing failures on Windows (Chrome/Edge) causing black screen.
	   Blur is applied only in :hover and .active-panel states below. */
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-bottom: none !important;
	border-radius: 12px 12px 0 0 !important;
	padding: 12px 15px !important;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
	white-space: normal !important;
	line-height: 1.3 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	flex-wrap: wrap !important;
}

.bottom-tab-icon {
	font-size: 12px !important;
	line-height: 1 !important;
	flex-shrink: 0 !important;
}

.bottom-tab-icon svg {
	width: 14px !important;
	height: 14px !important;
	display: block !important;
}

.bottom-tab-icon img {
	width: 14px !important;
	height: 14px !important;
	display: block !important;
	object-fit: contain !important;
}

.bottom-tab-text {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
}

.bottom-tab-word,
.bottom-tab-rest {
	display: inline-block !important;
}

.bottom-tab-item:hover .bottom-tab-label {
	background: rgba(0, 0, 0, 0.8) !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	text-shadow: 
		0 0 20px rgba(212, 175, 55, 1),
		0 0 10px rgba(212, 175, 55, 0.8),
		0 2px 4px rgba(0, 0, 0, 0.9) !important;
}

/* Remove borders from active tab for unified look with extended panel */
.bottom-tab-item.active-panel .bottom-tab-label {
	border: none !important;
	background: rgba(0, 0, 0, 0.82) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
}

.profile-bottom-drawer.is-compact-tabs .profile-bottom-tabs {
	width: min(calc(100vw - 24px), 560px) !important;
	gap: 8px !important;
	align-items: stretch !important;
}

.profile-bottom-drawer.is-compact-tabs .bottom-tab-item {
	width: auto !important;
	min-width: 0 !important;
	flex: 1 1 0 !important;
}

.profile-bottom-drawer.is-compact-tabs .bottom-tab-label {
	min-height: 56px !important;
	padding: 8px 6px !important;
	gap: 5px !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	flex-wrap: nowrap !important;
}

.profile-bottom-drawer.is-compact-tabs .bottom-tab-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 16px !important;
	height: 16px !important;
}

.profile-bottom-drawer.is-compact-tabs .bottom-tab-icon svg {
	width: 16px !important;
	height: 16px !important;
}

.profile-bottom-drawer.is-compact-tabs .bottom-tab-text {
	max-width: 100% !important;
	min-width: 0 !important;
	justify-content: center !important;
}

.profile-bottom-drawer.is-compact-tabs .bottom-tab-word {
	max-width: 100% !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	font-size: 9px !important;
	letter-spacing: 0.14em !important;
	line-height: 1.1 !important;
}

.profile-bottom-drawer.is-compact-tabs .bottom-tab-rest {
	display: none !important;
}

.profile-bottom-drawer.is-compact-tabs .bottom-tab-label .tab-edit-icon {
	display: none !important;
}

body.tm-compact-tabs .keyboard-nav-container,
body.tm-compact-tabs .hero-global-controls {
	display: none !important;
}

body.tm-compact-tabs .hero-global-controls {
	display: flex !important;
	position: fixed !important;
	top: calc(10px + var(--wp-admin--admin-bar--height, 0px)) !important;
	right: 10px !important;
	bottom: auto !important;
	z-index: 1200 !important;
}

body.tm-compact-tabs .hero-global-mute,
body.tm-compact-tabs .hero-global-theatre {
	display: none !important;
}

body.tm-compact-tabs .hero-global-theatre {
	display: inline-flex !important;
}

body.theatre-mode.tm-compact-tabs .hero-global-controls {
	display: none !important;
}

body.tm-fullscreen.tm-compact-tabs .hero-global-controls {
	display: none !important;
}

body.tm-mobile-portrait .hero-global-btn {
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	max-width: 36px !important;
	max-height: 36px !important;
}

body.tm-mobile-portrait .hero-global-btn i {
	font-size: 14px !important;
}

body.tm-mobile-portrait,
body.tm-mobile-landscape {
	--tm-mobile-bottom-safe-area: max(0px, env(safe-area-inset-bottom, 0px));
	--tm-mobile-controls-clearance: calc(var(--tab-height, 52px) + var(--tm-mobile-bottom-safe-area) + 10px);
}

body.tm-mobile-landscape {
	--tm-mobile-controls-clearance: calc(var(--tab-height, 52px) + var(--tm-mobile-bottom-safe-area) + 18px);
}

body.tm-mobile-portrait .profile-bottom-drawer.is-compact-tabs .profile-bottom-tabs {
	width: calc(100vw - 20px) !important;
	gap: 6px !important;
	bottom: var(--tm-mobile-bottom-safe-area) !important;
}

body.tm-mobile-landscape .profile-bottom-drawer.is-compact-tabs .profile-bottom-tabs {
	width: min(calc(100vw - 104px), 640px) !important;
	gap: 6px !important;
	bottom: var(--tm-mobile-bottom-safe-area) !important;
}

body.tm-mobile-portrait .profile-bottom-drawer.is-compact-tabs .bottom-tab-label,
body.tm-mobile-landscape .profile-bottom-drawer.is-compact-tabs .bottom-tab-label {
	min-height: 52px !important;
	padding: 7px 5px !important;
	border-radius: 14px 14px 0 0 !important;
}

body.tm-mobile-portrait.tm-talent-panel-open .hero-remote,
body.tm-mobile-landscape.tm-talent-panel-open .hero-remote {
	display: none !important;
}


/* Slide-up attribute panels - click-based interaction */
.attribute-slide-section {
	position: absolute !important;
	bottom: 0 !important;
	left: 50% !important;
	transform: translateX(-50%) translateY(calc(100% - var(--tab-height))) !important;
	width: 961px !important;
	max-height: calc(70vh + var(--panel-extra-height)) !important;
	overflow-y: auto !important;
	background: rgba(0, 0, 0, 0.82) !important;
	/* backdrop-filter only applied in .slide-up state — see below.
	   Always-on blur over a hardware-decoded video causes GPU black screen on Windows. */
	border: 2px solid #D4AF37 !important;
	border-bottom: none !important;
	border-radius: 15px 15px 0 0 !important;
	box-shadow: 
		0 -10px 40px rgba(0, 0, 0, 0.9),
		0 0 60px rgba(212, 175, 55, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
	will-change: transform !important;
	z-index: 99 !important;
	padding: 10px !important;
	padding-bottom: 20px !important;
	pointer-events: none !important;
	opacity: 0 !important;
}

/* When editing is active, ensure overflow is visible and boost z-index */
.attribute-slide-section:has(.editable-field.editing) {
	overflow: visible !important;
	z-index: 200 !important;
}

/* Expanded state on click */
.attribute-slide-section.slide-up {
	transform: translateX(-50%) translateY(0) !important;
	backdrop-filter: blur(20px) !important;
	-webkit-backdrop-filter: blur(20px) !important;
	pointer-events: all !important;
	opacity: 1 !important;
	padding-bottom: calc(var(--tab-height) + var(--panel-extra-height)) !important;
}

body.tm-mobile-portrait .attribute-slide-section,
body.tm-mobile-landscape .attribute-slide-section {
	width: 95vw !important;
	max-width: 95vw !important;
}

body.tm-mobile-portrait .attribute-slide-section {
	width: calc(100vw - 16px) !important;
	max-width: calc(100vw - 16px) !important;
	max-height: min(74vh, calc(100vh - 140px)) !important;
	padding: 12px 10px 18px !important;
	border-radius: 18px 18px 0 0 !important;
}

body.tm-mobile-landscape .attribute-slide-section {
	width: min(calc(100vw - 92px), 760px) !important;
	max-width: min(calc(100vw - 92px), 760px) !important;
	max-height: min(78vh, calc(100vh - 98px)) !important;
	padding: 10px 10px 16px !important;
	border-radius: 18px 18px 0 0 !important;
}

body.tm-mobile-portrait .attribute-slide-section.slide-up,
body.tm-mobile-landscape .attribute-slide-section.slide-up {
	padding-bottom: calc(var(--tab-height) + 16px) !important;
}

body.tm-mobile-portrait .attribute-slide-section .attributes-grid {
	grid-template-columns: minmax(0, 1fr) !important;
}

body.tm-mobile-landscape .attribute-slide-section .attributes-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.tm-mobile-portrait #social-section.attribute-slide-section {
	height: auto !important;
	max-height: min(78vh, calc(100vh - 136px)) !important;
}

body.tm-mobile-portrait #social-section .attribute-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.tm-mobile-portrait .social-urls-grid,
body.tm-mobile-landscape .social-urls-grid {
	grid-template-columns: 1fr !important;
}

@media (min-width: calc(var(--bp-phone-portrait-max) + 1px)) and (max-width: var(--bp-tablet-portrait-max)) and (orientation: portrait),
	(min-width: calc(var(--bp-phone-landscape-max) + 1px)) and (max-width: var(--bp-tablet-landscape-max)) and (orientation: landscape) {
	.social-urls-grid {
		grid-template-columns: 1fr !important;
	}
}

.social-url-field {
	display: grid;
	gap: 6px;
	font-size: 11px;
	color: #999;
}

.social-url-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 10px;
	color: #D4AF37;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.social-url-input {
	width: 100%;
	padding: 8px 10px;
	border-radius: 6px;
	background: #000;
	color: #fff;
	border: 1px solid rgba(212, 175, 55, 0.6);
	font-size: 11px;
}

.social-url-input-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.social-url-input-row .social-url-input {
	flex: 1;
	min-width: 0;
}

.tm-social-section-fetch-btn {
	flex-shrink: 0;
	padding: 6px 10px;
	font-size: 11px;
	line-height: 1;
	background: rgba(212, 175, 55, 0.15);
	color: #D4AF37;
	border: 1px solid rgba(212, 175, 55, 0.5);
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s;
}

.tm-social-section-fetch-btn:hover:not(:disabled) {
	background: rgba(212, 175, 55, 0.3);
}

.tm-social-section-fetch-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.social-url-input::placeholder {
	color: #666;
}

.attribute-slide-section .stat-item .field-display {
	position: relative !important;
	padding-right: 24px !important;
}

.attribute-slide-section .stat-item .field-value {
	display: block !important;
	margin-top: 4px !important;
}

.attribute-slide-section .stat-item .edit-field-btn {
	position: absolute !important;
	right: 0 !important;
	top: 0 !important;
}

/* Inline-style replacements for section headers and stats */
.section-title > .section-title-icon {
	margin-right: 8px;
}

.section-title .section-title-help-icon {
	margin-left: 8px;
	font-size: 14px;
	color: #888;
	cursor: help;
}

.owner-edit-hint {
	font-size: 12px;
	color: #999;
	font-weight: normal;
	margin-left: 10px;
}

#social-section.attribute-slide-section {
	padding: 25px;
	border-radius: 8px;
}

.talent-physical-attributes.social-section {
	padding: 25px;
	border-radius: 8px;
	margin-top: 25px;
}

.talent-physical-attributes {
	background: #1a1a1a;
	padding: 25px;
	margin: 30px 0;
	border-radius: 8px;
	border: 2px solid #D4AF37;
}

.section-title {
	color: #D4AF37;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 20px;
	border-bottom: 2px solid #D4AF37;
	padding-bottom: 10px;
}

.talent-physical-attributes .attributes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 15px;
}

.talent-physical-attributes .attribute-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: #000;
	padding: 12px;
	border-radius: 5px;
	border: 1px solid #333;
}

.talent-physical-attributes .attribute-icon {
	font-size: 24px;
	line-height: 1;
}

.talent-physical-attributes .attribute-content {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.talent-physical-attributes .attribute-label {
	color: #C0C0C0;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.talent-physical-attributes .attribute-value {
	color: #fff;
	font-size: 14px;
	font-weight: 500;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background-color: #f0ad4e !important;
	border-color: #d4922f !important;
	color: #000 !important;
	padding: 3px 8px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
	color: #000 !important;
	margin-right: 5px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
	color: #fff !important;
}

/* Biography gallery lightbox */
.mp-lightbox-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.95);
	z-index: 999999;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.mp-lightbox-overlay.active {
	display: flex;
}

.mp-lightbox-content {
	position: relative;
	max-width: 90%;
	max-height: 90%;
	cursor: default;
}

.mp-lightbox-content img {
	max-width: 100%;
	max-height: 90vh;
	width: auto;
	height: auto;
	display: block;
}

.mp-lightbox-close {
	position: absolute;
	top: -40px;
	right: 0;
	background: transparent;
	border: none;
	color: #ffffff;
	font-size: 40px;
	cursor: pointer;
	padding: 0;
	line-height: 1;
	width: 40px;
	height: 40px;
	z-index: 1000000;
}

.mp-lightbox-close:hover {
	opacity: 0.7;
}

.mp-lightbox-prev,
.mp-lightbox-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(255, 255, 255, 0.2);
	border: none;
	color: #ffffff;
	font-size: 30px;
	cursor: pointer;
	padding: 15px 20px;
	z-index: 1000000;
	transition: background 0.3s;
}

.mp-lightbox-prev:hover,
.mp-lightbox-next:hover {
	background: rgba(255, 255, 255, 0.4);
}

.mp-lightbox-prev {
	left: 20px;
}

.mp-lightbox-next {
	right: 20px;
}

.select2-container--default .select2-dropdown {
	background-color: #2a2a2a !important;
	border: 1px solid #f0ad4e !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	background-color: #1a1a1a !important;
	border: 1px solid #555 !important;
	color: #fff !important;
}

.select2-container--default .select2-results__option {
	background-color: #2a2a2a !important;
	color: #fff !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: #f0ad4e !important;
	color: #000 !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
	background-color: #444 !important;
	color: #f0ad4e !important;
}

.attribute-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 20px;
}

.social-metric-column {
	background: rgba(255, 255, 255, 0.03);
	padding: 12px;
	border-radius: 6px;
	border-left: 3px solid transparent;
}

.social-metric-column[data-platform="youtube"] {
	border-left-color: #FF0000;
}

.social-metric-column[data-platform="instagram"] {
	border-left-color: #E1306C;
}

.social-metric-column[data-platform="facebook"] {
	border-left-color: #1877F2;
}

.social-metric-column[data-platform="linkedin"] {
	border-left-color: #0A66C2;
}

.social-metric-column--growth {
	background: rgba(212, 175, 55, 0.1);
	border-left-color: #D4AF37;
}

.social-header {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.social-header--center {
	justify-content: center;
}

.social-header--center .social-title {
	text-align: center;
	width: 100%;
}

.social-header-icon {
	font-size: 24px;
	margin-right: 8px;
}

.social-metric-column[data-platform="youtube"] .social-header-icon {
	color: #FF0000;
}

.social-metric-column[data-platform="instagram"] .social-header-icon {
	color: #E1306C;
}

.social-metric-column[data-platform="facebook"] .social-header-icon {
	color: #1877F2;
}

.social-metric-column[data-platform="linkedin"] .social-header-icon {
	color: #0A66C2;
}

.social-title {
	margin: 0;
	color: #D4AF37;
	font-size: 13px;
	font-weight: 600;
}

.social-profile-link {
	font-size: 10px;
	color: #888;
	text-decoration: none;
}

.social-profile-link-icon {
	font-size: 8px;
}

.social-not-connected {
	font-size: 10px;
	color: #666;
}

.social-urls-section {
	margin-bottom: 20px;
	padding: 15px;
	background: rgba(212, 175, 55, 0.05);
	border-radius: 6px;
	border: 1px solid rgba(212, 175, 55, 0.2);
}

.social-urls-title {
	margin: 0 0 12px 0;
	font-size: 12px;
	color: #D4AF37;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.social-urls-title-icon {
	margin-right: 6px;
}

.social-urls-note {
	font-size: 10px;
	color: #888;
	font-weight: normal;
	margin-left: 8px;
}

.social-urls-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.social-url-field[data-platform="youtube"] .social-url-icon {
	color: #FF0000;
}

.social-url-field[data-platform="instagram"] .social-url-icon {
	color: #E1306C;
}

.social-url-field[data-platform="facebook"] .social-url-icon {
	color: #1877F2;
}

.social-url-field[data-platform="linkedin"] .social-url-icon {
	color: #0A66C2;
}

.talent-physical-attributes .stat-item,
.attribute-slide-section .stat-item {
	margin-bottom: 5px;
	font-size: 12px;
	color: #999;
}

.stat-item--muted {
	font-size: 11px;
	color: #666;
	font-style: italic;
}

.stat-item--pill {
	padding: 4px 6px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 4px;
}

.stat-item--pill-muted {
	background: rgba(0, 0, 0, 0.1);
}

.stat-icon {
	width: 12px;
	font-size: 10px;
	display: inline-block;
}

.stat-icon--attribute {
	font-size: 14px;
	margin-right: 5px;
}

.stat-icon--followship {
	color: #4CAF50;
}

.stat-icon--viewship {
	color: #2196F3;
}

.stat-icon--reactions {
	color: #FF9800;
}

.stat-icon--info {
	color: #888;
}

.stat-value--gold {
	color: #D4AF37;
}

.stat-value--rose {
	color: #FFD1BF;
}

.stat-value--followship {
	color: #4CAF50;
}

.stat-value--viewship {
	color: #2196F3;
}

.stat-value--reactions {
	color: #FF9800;
}

.stat-value--growth {
	font-size: 13px;
}

.stat-item-details {
	display: inline-block;
	vertical-align: top;
}

.stat-label {
	font-size: 11px;
	color: #999;
	margin-bottom: 2px;
}

.help-toggle-btn--social {
	margin-left: 8px;
	font-size: 14px;
	color: #888;
}

/* Ensure proper spacing for profile elements inside - EXCLUDE collapsed-tab-label */
.profile-info-head > *:not(.collapsed-tab-label) {
	margin-bottom: 4px !important;
}

.profile-info-head > *:last-child:not(.collapsed-tab-label) {
	margin-bottom: 0 !important;
}

/* Collapsed tab label and name are fully implemented in player.css.
   No rules needed here — player.css owns .collapsed-tab-label and
   .collapsed-tab-name with all required !important overrides. */

/* CTA Buttons Wrapper - 2 Column Layout */
.vendor-cta-buttons {
	display: flex !important;
	flex-direction: row !important;
	gap: 15px !important;
	margin-top: 6px !important;
	align-items: stretch !important;
	width: 100% !important;
	position: relative; /* For tooltip overlay positioning */
	flex-wrap: nowrap !important;
}

/* QR Code Column - Left Side */
.vendor-cta-qr {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: stretch !important;
	max-width: 90px !important;
}

.qr-code-placeholder {
	width: 90px !important;
	height: 90px !important;
	aspect-ratio: 1 / 1 !important;
	background: #e0e0e0 !important;
	border: 1px solid #D4AF37 !important;
	border-radius: 6px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-direction: column !important;
	padding: 0px !important;
}

.qr-code-placeholder svg {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	filter: brightness(0.85) !important;
}

.qr-code-placeholder img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	display: block !important;
	filter: brightness(0.85) !important;
}

.qr-code-fallback i {
	font-size: 44px !important;
	color: #D4AF37 !important;
	opacity: 0.7 !important;
}

/* CTA Actions Column - Right Side */
.vendor-cta-actions {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}

/* Individual CTA Button */
.vendor-cta-btn {
	background: rgba(0, 0, 0, 0.7) !important;
	border: 2px solid #D4AF37 !important;
	color: #D4AF37 !important;
	padding: 10px 20px !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	transition: all 0.3s ease !important;
	cursor: pointer !important;
	position: relative !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	width: 100% !important;
	min-height: 38px !important;
	text-align: center !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
}

.vendor-cta-btn i {
	font-size: 14px !important;
	flex-shrink: 0 !important;
}

body.tm-mobile-landscape .vendor-cta-buttons {
	gap: 8px !important;
	margin-top: 2px !important;
}

body.tm-mobile-landscape .vendor-cta-qr {
	max-width: 64px !important;
}

body.tm-mobile-landscape .qr-code-placeholder {
	width: 64px !important;
	height: 64px !important;
	border-radius: 8px !important;
}

body.tm-mobile-landscape .vendor-cta-actions {
	gap: 8px !important;
}

body.tm-mobile-landscape .vendor-cta-btn {
	min-height: 34px !important;
	padding: 8px 12px !important;
	font-size: 11px !important;
	line-height: 1.1 !important;
}

body.tm-mobile-landscape .vendor-cta-btn i {
	font-size: 12px !important;
}

body.tm-mobile-landscape .contact-info-section {
	max-width: none !important;
	margin-top: 4px !important;
	padding: 0 10px 8px !important;
}

body.tm-mobile-landscape .contact-info-title {
	margin: 0 -10px 8px !important;
	padding: 8px 10px !important;
	font-size: 10px !important;
}

body.tm-mobile-landscape .contact-email-wrapper,
body.tm-mobile-landscape .contact-phone-wrapper {
	padding: 6px 0 !important;
}

body.tm-mobile-landscape .contact-label {
	font-size: 9px !important;
}

body.tm-mobile-landscape .contact-value {
	font-size: 12px !important;
}

body.tm-mobile-landscape .contact-channel-row {
	position: relative !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	margin-top: 8px !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 10px !important;
}

body.tm-mobile-landscape .contact-channel-item {
	gap: 6px !important;
}

body.tm-mobile-landscape .contact-channel-row .tm-header-icon {
	--tm-header-size: 26px;
}

body.tm-mobile-landscape .contact-channel-row .tm-header-count {
	min-width: 14px !important;
	height: 14px !important;
	font-size: 8px !important;
	line-height: 14px !important;
	top: -6px !important;
	right: -6px !important;
}

body.tm-mobile-landscape .talent-info-block {
	position: static !important;
	padding-top: 0 !important;
}

body.tm-mobile-landscape .talent-info-block .store-name-wrapper,
body.tm-mobile-landscape .talent-info-block .store-categories-wrapper,
body.tm-mobile-landscape .talent-info-block .location-wrapper {
	margin-bottom: 4px !important;
}

body.tm-mobile-landscape .vendor-cta-buttons {
	position: absolute !important;
	top: 10px !important;
	left: 50% !important;
	right: auto !important;
	width: 56px !important;
	min-width: 56px !important;
	min-height: 56px !important;
	padding-right: 0 !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	z-index: 102 !important;
	overflow: visible !important;
	transform: translateX(8px) !important;
}

body.tm-mobile-landscape .vendor-cta-qr {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: auto !important;
	max-width: 56px !important;
	width: 56px !important;
	height: 56px !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 102 !important;
}

body.tm-mobile-landscape .qr-code-placeholder {
	width: 56px !important;
	height: 56px !important;
	border-radius: 8px !important;
	position: relative !important;
	z-index: 102 !important;
}

body.tm-mobile-landscape .vendor-cta-actions {
	display: none !important;
}

body.tm-mobile-landscape .vendor-cta-btn {
	min-height: 32px !important;
	padding: 7px 10px !important;
	font-size: 11px !important;
	line-height: 1.05 !important;
}

body.tm-mobile-landscape .contact-channel-row {
	margin-top: 6px !important;
	padding-top: 2px !important;
}

/* Hover state */
.vendor-cta-btn:hover {
	background: rgba(212, 175, 55, 0.1) !important;
	border-color: #FFD700 !important;
	color: #FFD700 !important;
	box-shadow: 0 0 20px rgba(212, 175, 55, 0.8) !important;
	transform: translateY(-2px) !important;
}

/* Circle profile avatar container - gold border matching collapsed state */
.profile-img,
.profile-frame .profile-img,
.dokan-store-sidebar .profile-img,
.dokan-single-store .profile-img {
	width: 125px !important;
	height: 125px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	border: 3px solid #D4AF37 !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	position: absolute !important;
	top: var(--avatar-top) !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	box-shadow: none !important;
}

/* ============================================================================
   PROFILE PANEL LAYOUT — SINGLE SOURCE OF TRUTH (vendor-store.css owns this)
   ============================================================================
   The cinematic side panel (.profile-info-head) is part of the vendor profile
   surface, so all of its content layout lives here. player.css only owns the
   panel chrome (glassmorphism, fixed positioning, mobile collapse animation).

   Sizing strategy (v0.4.11): panel keeps its FIXED responsive height defined
   by player.css (50vh / min 320px). Content fits within that available height.

   LAYOUT MODEL — DESKTOP GRID WITH NAMED ROWS (v0.4.12)
   -----------------------------------------------------
   On desktop (>=769px, non mobile-landscape body), the panel itself is the
   grid container with 8 explicit named rows in fixed order:

     [avatar]    var(--avatar-size, 125px)   reserve for absolute avatar
     [name]      auto                        name pill (margin-top:-15px to
                                             hang half above the avatar bottom)
     [role]      auto                        role pill
     [spec]      auto                        store-categories-wrapper (contains
                                             both speciality and account-level
                                             pills stacked via inner flex)
     [location]  auto                        location pill (flag + city)
     [spacer]    1fr                         absorbs all remaining height
     [cta]       auto                        vendor CTA buttons (align-self:end
                                             so they sit just above channels)
     [channels]  auto                        contact-channel-row (transform:
                                             translateY(50%) so it hangs half
                                             outside the panel's bottom border)

   Items targeted by grid-row are the DIRECT children of .talent-info-block
   (store-name-wrapper, role-wrapper, store-categories-wrapper, location-wrapper)
   plus the direct children of .profile-info-content (vendor-cta-buttons,
   contact-channel-row). The intermediate wrappers .profile-info-content and
   .talent-info-block use `display: contents` so their children promote into
   the panel-level grid without restructuring the PHP template.

   Mobile (portrait via @media + landscape via body.tm-mobile-landscape) keeps
   the existing flex layout owned by player.css — the new grid is scoped to
   desktop only and never disturbs mobile behaviour. */

@media (min-width: 769px) {
	body:not(.tm-mobile-landscape) .profile-info-summery .profile-info-head:not(.is-editing) {
		/* Compact desktop geometry tuned to fit a 50vh / min 320px panel.
		   --pill-half is half the unified pill min-height (26/2 = 13px); the
		   [avatar] track is shortened by that amount + the row-gap so the
		   [name] row starts exactly --pill-half pixels above the avatar's
		   visual bottom. The pill, sized 26px tall and aligned to its row
		   start, then has its vertical center sitting on the avatar bottom
		   edge — half above, half below — without any negative margin. */
		--avatar-top: 22px;
		--avatar-size: 110px;
		--row-gap: 4px;
		--pill-half: 13px;
		display: grid !important;
		grid-template-columns: 1fr !important;
		grid-template-rows:
			[avatar] calc(var(--avatar-size) - var(--pill-half) - var(--row-gap))
			[name] auto
			[role] auto
			[spec] auto
			[location] auto
			[contact] auto
			[spacer] 1fr
			[cta] auto
			[channels] auto !important;
		align-items: start !important;
		justify-items: center !important;
		row-gap: var(--row-gap) !important;
		padding-top: var(--avatar-top) !important;
		padding-bottom: 0 !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		overflow: visible !important;
	}

	/* Promote .profile-info-content and .talent-info-block children directly
	   into the panel grid so they can be addressed by grid-row name. Both the
	   public view and the admin/owner inline-edit view (.has-contact-card) use
	   the same named-row grid — the contact-info-section is anchored to the
	   [contact] row, replacing the two-column flex layout. */
	body:not(.tm-mobile-landscape) .profile-info-summery .profile-info-head:not(.is-editing) > .profile-info-content,
	body:not(.tm-mobile-landscape) .profile-info-summery .profile-info-head:not(.is-editing) > .profile-info-content > .talent-info-block {
		display: contents !important;
	}

	/* Contact info section (admin/owner view) — anchored to the [contact] grid row */
	body:not(.tm-mobile-landscape) .profile-info-summery .profile-info-head:not(.is-editing) .contact-info-section {
		grid-row: contact !important;
		grid-column: 1 !important;
		justify-self: stretch !important;
		align-self: start !important;
		margin: 0 !important;
		max-width: none !important;
		width: 100% !important;
	}

	/* Explicit grid-row anchors — guarantee vertical order. Margins are
	   neutralized so spacing comes solely from row-gap; legacy 8px
	   margin-bottom rules in this file no longer apply inside the panel. */
	body:not(.tm-mobile-landscape) .profile-info-summery .profile-info-head:not(.is-editing) .store-name-wrapper {
		grid-row: name !important;
		grid-column: 1 !important;
		justify-self: center !important;
		align-self: start !important; /* pill top sits at row top, which is --pill-half above avatar bottom */
		margin: 0 !important;
		z-index: 5 !important;
		position: static !important;
	}
	body:not(.tm-mobile-landscape) .profile-info-summery .profile-info-head:not(.is-editing) .role-wrapper {
		grid-row: role !important;
		grid-column: 1 !important;
		justify-self: center !important;
		margin: 0 !important;
	}
	body:not(.tm-mobile-landscape) .profile-info-summery .profile-info-head:not(.is-editing) .store-categories-wrapper {
		grid-row: spec !important;
		grid-column: 1 !important;
		justify-self: center !important;
		margin: 0 !important;
	}
	body:not(.tm-mobile-landscape) .profile-info-summery .profile-info-head:not(.is-editing) .store-categories-display-group {
		/* spec + level pills share .store-categories-wrapper (one grid item).
		   This inner group stays a flex column so the level pill stacks below
		   the spec pill within the [spec] row. */
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: var(--row-gap) !important;
		margin: 0 !important;
	}
	body:not(.tm-mobile-landscape) .profile-info-summery .profile-info-head:not(.is-editing) .location-wrapper {
		grid-row: location !important;
		grid-column: 1 !important;
		justify-self: center !important;
		margin: 0 !important;
	}
	body:not(.tm-mobile-landscape) .profile-info-summery .profile-info-head:not(.is-editing) .vendor-cta-buttons {
		grid-row: cta !important;
		grid-column: 1 !important;
		justify-self: center !important;
		align-self: end !important;
		margin: 0 0 6px 0 !important; /* keep CTA fully inside the panel above the half-hanging channels row */
		width: auto !important;
	}
	body:not(.tm-mobile-landscape) .profile-info-summery .profile-info-head:not(.is-editing) .contact-channel-row {
		grid-row: channels !important;
		grid-column: 1 !important;
		justify-self: stretch !important;
		align-self: end !important;
		position: static !important;
		/* Centerline of the channel row sits exactly on the panel's bottom
		   border (half inside, half outside). Works because padding-bottom is
		   0 in the grid rule above, so the grid's bottom edge == border edge. */
		transform: translateY(50%) !important;
		margin: 0 !important;
		z-index: 60 !important;
	}

	/* Hide the account-level pill on the public profile panel. Removed at the
	   user's request to free vertical space for a larger QR card. The pill
	   markup still renders so other surfaces (vendor listing, dashboard) keep
	   their styling — only this panel hides it. */
	body:not(.tm-mobile-landscape) .profile-info-summery .profile-info-head:not(.is-editing) .tm-combo-pill__level-pill {
		display: none !important;
	}

	/* Desktop-grid compactness for the CTA block (QR + Ask/Book buttons). */
	body:not(.tm-mobile-landscape) .profile-info-summery .profile-info-head:not(.is-editing) .vendor-cta-buttons {
		gap: 10px !important;
		margin-top: 0 !important;
	}
	body:not(.tm-mobile-landscape) .profile-info-summery .profile-info-head:not(.is-editing) .vendor-cta-qr,
	body:not(.tm-mobile-landscape) .profile-info-summery .profile-info-head:not(.is-editing) .vendor-cta-qr .qr-code-placeholder,
	body:not(.tm-mobile-landscape) .profile-info-summery .profile-info-head:not(.is-editing) .vendor-cta-qr svg,
	body:not(.tm-mobile-landscape) .profile-info-summery .profile-info-head:not(.is-editing) .vendor-cta-qr img {
		max-width: 84px !important;
		width: 84px !important;
		height: 84px !important;
	}
	body:not(.tm-mobile-landscape) .profile-info-summery .profile-info-head:not(.is-editing) .vendor-cta-actions {
		gap: 6px !important;
	}
	body:not(.tm-mobile-landscape) .profile-info-summery .profile-info-head:not(.is-editing) .vendor-cta-btn {
		padding: 6px 12px !important;
		min-height: 30px !important;
		font-size: 12px !important;
	}
}

/* ============================================================================
   UNIFIED PILL DESIGN SYSTEM
   ============================================================================
   ALL pills inside the profile panel share the same shape, padding, and
   background. They differ only in font hierarchy (size/weight/color/style).
   Base shared traits: padding 6px 16px, border-radius 999px, dark bg, 1.3 line. */
.profile-info-head .store-name-wrapper .store-name,
.profile-info-head .role-wrapper .store-categories-display,
.profile-info-head .store-categories-wrapper .store-categories-display,
.profile-info-head .store-categories-display-group .tm-combo-pill__level-pill,
.profile-info-head .tm-location-pill .geo-address {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 4px 14px !important;
	border-radius: 999px !important;
	background: rgba(0, 0, 0, 0.55) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	line-height: 1.25 !important;
	box-sizing: border-box !important;
	min-height: 26px !important;
	white-space: nowrap !important;
}

/* Tier-specific level pill borders override the neutral border above */
.profile-info-head .tm-combo-pill--basic .tm-combo-pill__level-pill {
	border-color: rgba(168, 200, 255, 0.32) !important;
	background: rgba(18, 34, 62, 0.62) !important;
}
.profile-info-head .tm-combo-pill--mediatic .tm-combo-pill__level-pill {
	border-color: rgba(125, 242, 220, 0.32) !important;
	background: rgba(11, 43, 41, 0.62) !important;
}
.profile-info-head .tm-combo-pill--cinematic .tm-combo-pill__level-pill {
	border-color: rgba(212, 176, 255, 0.32) !important;
	background: rgba(34, 20, 48, 0.62) !important;
}

/* Circle profile avatar image - matching collapsed state size */
.profile-img img,
.profile-frame .profile-img img,
.dokan-store-sidebar .profile-img img,
img.profile-img,
.dokan-single-store .profile-img img {
	width: 125px !important;
	height: 125px !important;
	border-radius: 50% !important;
	border: none !important;
	object-fit: cover !important;
	object-position: center center !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Vertical spacing control for profile header elements */
.profile-info-head .store-name {
	margin: 3px 0 !important;
}

/* Store categories + level combo pill */
.store-categories-display-group {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;
	margin: 3px 0 !important;
}

.store-categories-display {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0 !important;
	padding: 4px 14px !important;
	border-radius: 999px !important;
	background: rgba(0, 0, 0, 0.45) !important;
	margin: 0 !important;
}

.store-categories-display .tm-combo-pill__cats-row {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
}

/* Override the generic .profile-edit-btn absolute positioning inside the combo pill */
.store-categories-display .tm-combo-pill__cats-row .edit-field-btn,
.store-categories-display .tm-combo-pill__cats-row .profile-edit-btn {
	position: relative !important;
	right: auto !important;
	top: auto !important;
	transform: none !important;
	margin-left: 4px !important;
	flex-shrink: 0 !important;
}

.store-categories-display .tm-combo-pill__cats {
	color: #C0C0C0 !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	text-align: center !important;
	font-style: italic !important;
	line-height: 1.5 !important;
}

/* Role pill overrides — more prominent than spec, matches name prominence */
.role-wrapper .store-categories-display .tm-combo-pill__cats {
	font-size: 15px !important;
	font-style: normal !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	letter-spacing: 0.5px !important;
}

.store-categories-display-group .tm-combo-pill__level-pill {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 2px 12px !important;
	border-radius: 999px !important;
	background: rgba(0, 0, 0, 0.58) !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

.store-categories-display-group .tm-combo-pill__level {
	font-size: 12px !important;
	font-weight: 700 !important;
	text-align: center !important;
	font-style: normal !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	line-height: 1.5 !important;
	color: #C0C0C0 !important; /* fallback; overridden by tier modifier below */
}

/* Tier-specific level colours */
.tm-combo-pill--basic .tm-combo-pill__level-pill {
	border-color: rgba(168, 200, 255, 0.28) !important;
	background: rgba(18, 34, 62, 0.62) !important;
}

.tm-combo-pill--mediatic .tm-combo-pill__level-pill {
	border-color: rgba(125, 242, 220, 0.28) !important;
	background: rgba(11, 43, 41, 0.62) !important;
}

.tm-combo-pill--cinematic .tm-combo-pill__level-pill {
	border-color: rgba(212, 176, 255, 0.28) !important;
	background: rgba(34, 20, 48, 0.62) !important;
}

.tm-combo-pill--basic .tm-combo-pill__level { color: #a8c8ff !important; }
.tm-combo-pill--mediatic .tm-combo-pill__level { color: #7df2dc !important; }
.tm-combo-pill--cinematic .tm-combo-pill__level { color: #d4b0ff !important; }


/* Profile header badge spacing */
.profile-info-head .featured-favourite {
	margin: 3px 0 !important;
}

/* Location pill: shape comes from the unified pill rule above; only typography
   and the country flag treatment are defined here. The flag sits OUTSIDE the
   pill (it's a sibling inside .tm-location-pill), so the pill only
   contains .geo-address. */
.tm-location-pill,
.dokan-store-info .dokan-store-address {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	margin: 3px 0 !important;
	list-style: none !important;
	cursor: default !important;
}

/* Hide the map marker icon */
.tm-location-pill i.fa-map-marker-alt,
.dokan-store-info .dokan-store-address i.fa-map-marker-alt {
	display: none !important;
}

/* Country flag icon — sized to match the pill height */
.tm-location-pill .country-flag,
.dokan-store-info .dokan-store-address .country-flag {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 28px !important;
	line-height: 1 !important;
	cursor: help !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	min-height: 28px !important;
	max-width: 28px !important;
	max-height: 28px !important;
	flex-shrink: 0 !important;
}

.tm-location-pill .country-flag img.emoji,
.dokan-store-info .dokan-store-address .country-flag img.emoji {
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	min-height: 28px !important;
	max-width: 28px !important;
	max-height: 28px !important;
	flex-shrink: 0 !important;
}

/* Geo address typography (shape comes from unified pill rule) */
.tm-location-pill .geo-address,
.dokan-store-info .dokan-store-address .geo-address {
	color: #C0C0C0 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em !important;
	cursor: default !important;
	pointer-events: none !important;
}

/* Remove any title/hover text from geo-address */
.tm-location-pill .geo-address::before,
.dokan-store-info .dokan-store-address .geo-address::before {
	content: none !important;
}

/* Replace line break with comma + space */
.tm-location-pill .geo-address br,
.dokan-store-info .dokan-store-address .geo-address br {
	display: none !important;
}

/* ======================================================================
   RESPONSIVE: GLASSMORPHIC FRAME ADJUSTMENTS FOR EDGE-TO-EDGE LAYOUT
   ====================================================================== */

/* TVs (2560px+) - maintain full-screen rounded frame */
@media (min-width: 2560px) {
	.profile-frame {
		width: calc(100vw - 2px) !important;
		height: 100vh !important;
		border: 1px solid rgba(255, 255, 255, 0.18) !important;
		border-radius: 0 !important;
	}
}

/* Laptops/Desktops (1025px - 2559px) - edge-to-edge full viewport */
@media (min-width: 1025px) and (max-width: 2559px) {
	.profile-frame {
		width: calc(100% - 2px) !important;
		height: 100vh !important;
		border: 1px solid rgba(255, 255, 255, 0.18) !important;
		border-radius: 0 !important;
	}
}

/* Tablets (portrait 601px - 1024px) */
@media (min-width: calc(var(--bp-phone-portrait-max) + 1px)) and (max-width: var(--bp-tablet-portrait-max)) and (orientation: portrait) {
	.profile-frame {
		width: calc(100% - 2px) !important;
		height: 100vh !important;
		border: 1px solid rgba(255, 255, 255, 0.18) !important;
		border-radius: 0 !important;
		box-shadow:
			0 8px 24px 0 rgba(0, 0, 0, 0.37),
			inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
		margin: 0 1px !important;
	}

	.tm-profile-frame-wrapper {
		padding: 0 !important;
	}
}

/* Tablets (landscape 901px - 1366px) */
@media (min-width: calc(var(--bp-phone-landscape-max) + 1px)) and (max-width: var(--bp-tablet-landscape-max)) and (orientation: landscape) {
	.profile-frame {
		width: calc(100% - 2px) !important;
		height: 100vh !important;
		border: 1px solid rgba(255, 255, 255, 0.18) !important;
		border-radius: 0 !important;
		box-shadow:
			0 6px 20px 0 rgba(0, 0, 0, 0.32),
			inset 0 1px 0 0 rgba(255, 255, 255, 0.08) !important;
		margin: 0 1px !important;
	}

	.tm-profile-frame-wrapper {
		padding: 0 !important;
	}
}

/* Phones (portrait up to 600px) */
@media (max-width: var(--bp-phone-portrait-max)) and (orientation: portrait) {
	.profile-frame {
		width: calc(100% - 2px) !important;
		height: 100vh !important;
		border: 1px solid rgba(255, 255, 255, 0.18) !important;
		border-radius: 8px !important;
		box-shadow:
			0 4px 16px 0 rgba(0, 0, 0, 0.37),
			inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
		margin: 0 1px !important;
	}

	.tm-profile-frame-wrapper {
		padding: 0 !important;
	}
}

/* Phones (landscape up to 932px) */
@media (max-width: var(--bp-phone-landscape-max)) and (orientation: landscape) {
	.profile-frame {
		width: calc(100% - 2px) !important;
		height: 100vh !important;
		border: 1px solid rgba(255, 255, 255, 0.18) !important;
		border-radius: 4px !important;
		box-shadow:
			0 3px 12px 0 rgba(0, 0, 0, 0.3),
			inset 0 1px 0 0 rgba(255, 255, 255, 0.08) !important;
		margin: 0 1px !important;
	}

	.tm-profile-frame-wrapper {
		padding: 0 !important;
	}
}

.tm-location-pill .geo-address::after,
.dokan-store-info .dokan-store-address .geo-address::after {
	content: "" !important;
}
/* ==========================================================================
   MOBILE & TABLET UI ADJUSTMENTS
   Primary: JS-set body classes tm-mobile-landscape / tm-mobile-portrait.
   Fallback: media query using (pointer:coarse) AND (hover:none) which
   exclusively targets true touch-only devices (phones/tablets) and never
   matches touchscreen laptops (which have hover:hover from their trackpad).
   ALL selectors are flat — no CSS nesting — for maximum browser compatibility.
   ========================================================================== */

/* 0) Fix top + right viewport gaps on mobile.
   ROOT CAUSES:
   - TOP GAP:   WordPress admin bar injects  html.admin-bar { margin-top:46px }
                which pushes document flow 46px below the viewport top.
   - RIGHT GAP: The collapsed avatar tab bleeds outside the left edge of the
                frame. Browsers compensate by adding equal scroll space to the
                RIGHT, showing black.
   SOLUTION: Make the frame wrapper position:fixed so it:
   a) Escapes document flow → ignores html margin-top (top gap gone).
   b) Fills the viewport by coordinates, not by width:100% of a pushed body
      (right gap gone).
   c) Its children (avatar bleed) are outside the viewport but DON'T cause
      scroll compensation because fixed elements are removed from document flow.
   NOTE: Do NOT use overflow-x:hidden on <body> — on iOS Safari that propagates
   to the viewport scroll container and breaks all position:fixed children. */
body.tm-mobile-landscape .tm-profile-frame-wrapper,
body.tm-mobile-portrait .tm-profile-frame-wrapper {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: var(--tm-visible-viewport-height, 100dvh) !important;
	overflow-x: visible !important; /* Keep avatar-tab bleed visible */
	overflow-y: hidden !important;
}

/* Profile frame fills the fixed wrapper exactly — no calc offsets or margins. */
body.tm-mobile-landscape .profile-frame,
body.tm-mobile-portrait .profile-frame {
	width: 100% !important;
	height: var(--tm-visible-viewport-height, 100dvh) !important;
	margin: 0 !important;
	border-radius: 0 !important;
}

/* 1) Hide the TV platforms strip on mobile/tablet */
body.tm-mobile-landscape .tm-header-platforms,
body.tm-mobile-portrait .tm-header-platforms {
	display: none !important;
}

/* 3) Hide top-right header action icons on mobile/tablet */
body.tm-mobile-landscape .tm-header-actions,
body.tm-mobile-portrait .tm-header-actions {
	display: inline-flex !important;
	align-items: center !important;
}

/* 2) Talent loop button — bottom-left of viewport on mobile/tablet.
      display:inline-flex overrides any residual jQuery inline style.
      z-index 150: above hero-remote (90) but safely below overlay (999). */

/* ROOT-CAUSE FIX: body.tm-compact-tabs hides .keyboard-nav-container (the parent
   of .keyboard-nav-loop). A display:none parent makes ALL children invisible,
   no matter what CSS you put on the child. We must un-hide the parent first,
   then the loop button's own fixed-position rule below can take effect. */
body.tm-mobile-landscape .keyboard-nav-container,
body.tm-mobile-portrait .keyboard-nav-container {
	display: block !important;
}

body.tm-mobile-landscape .tm-showcase-resume-slot,
body.tm-mobile-portrait .tm-showcase-resume-slot {
	position: fixed !important;
	left: 18px !important;
	right: auto !important;
	bottom: calc(18px + 36px + 10px) !important;
	width: auto !important;
	max-width: calc(100vw - 36px) !important;
	z-index: 150 !important;
}

/* Hide the 4 directional arrow buttons on mobile — only the loop button stays. */
body.tm-mobile-landscape .keyboard-nav-btn:not(.keyboard-nav-loop),
body.tm-mobile-portrait .keyboard-nav-btn:not(.keyboard-nav-loop) {
	display: none !important;
}

body.tm-mobile-landscape .keyboard-nav-loop,
body.tm-mobile-portrait .keyboard-nav-loop {
	position: fixed !important;
	bottom: 18px !important;
	left: 18px !important;
	right: auto !important;
	top: auto !important;
	z-index: 150 !important;
	grid-column: unset !important;
	display: inline-flex !important;
	/* Match hero-global-btn look */
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	background: rgba(0, 0, 0, 0.7) !important;
	color: #D4AF37 !important;
	border-radius: 8px !important;
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.37), inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
}

/* Portrait: match the 36px size used by hero-global-btn on mobile portrait */
body.tm-mobile-portrait .keyboard-nav-loop {
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	max-width: 36px !important;
	max-height: 36px !important;
}
body.tm-mobile-portrait .keyboard-nav-loop .keyboard-nav-icon,
body.tm-mobile-landscape .keyboard-nav-loop .keyboard-nav-icon {
	font-size: 14px !important;
}
/* Active state: golden, matching hero-global-btn.is-active */
body.tm-mobile-landscape .keyboard-nav-loop.is-active,
body.tm-mobile-portrait .keyboard-nav-loop.is-active {
	border-color: rgba(212, 175, 55, 0.8) !important;
	background: rgba(0, 0, 0, 0.9) !important;
	color: #D4AF37 !important;
	box-shadow:
		0 6px 24px rgba(212, 175, 55, 0.35),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.2) !important;
}

/* 4) hero-global-controls — bottom-right of viewport on mobile/tablet.
      Stack the 4 icons (mute, HD, fullscreen, theatre) vertically.
      z-index 150: same tier as the loop button, below overlay (999). */
body.tm-mobile-landscape .hero-global-controls,
body.tm-mobile-portrait .hero-global-controls {
	position: fixed !important;
	bottom: var(--tm-mobile-controls-clearance) !important;
	right: 18px !important;
	left: auto !important;
	top: auto !important;
	z-index: 150 !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 6px !important;
}

/* 5) Mute button — show it on mobile/tablet even when body.tm-compact-tabs
      hides it (line ~3324). Same specificity, later in file → wins. */
body.tm-mobile-landscape .hero-global-mute,
body.tm-mobile-portrait .hero-global-mute {
	display: inline-flex !important;
}

/* 6) Checkbox labels: show short text only; force both onto one row */
body.tm-mobile-landscape .toggle-text-full,
body.tm-mobile-portrait .toggle-text-full {
	display: none !important;
}
body.tm-mobile-landscape .toggle-text-short,
body.tm-mobile-portrait .toggle-text-short {
	display: inline !important;
}
body.tm-mobile-landscape .hero-toggle-row,
body.tm-mobile-portrait .hero-toggle-row {
	flex-wrap: nowrap !important;
}

/* --- Tablet fallback (iPadOS 13+ sends desktop UA, bypassing JS body classes) ---
   (pointer:coarse) AND (hover:none) = true touch-only devices only.
   Touchscreen laptops have a trackpad (hover:hover) so they are excluded. */
@media (pointer: coarse) and (hover: none) {
	/* 0) Fix top + right viewport gaps — same rationale as JS body class block above */
	.tm-profile-frame-wrapper {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 100% !important;
		overflow-x: visible !important;
		overflow-y: hidden !important;
	}

	.profile-frame {
		width: 100% !important;
		height: 100% !important;
		margin: 0 !important;
		border-radius: 0 !important;
	}

	/* 1) TV platforms strip */
	.tm-header-platforms {
		display: none !important;
	}

	/* 3) Header action icons */
	.tm-header-actions {
		display: inline-flex !important;
		align-items: center !important;
	}

	/* 2) Talent loop button — bottom-left */

	/* Un-hide the parent container (tm-compact-tabs kills it with display:none) */
	.keyboard-nav-container {
		display: block !important;
	}

	.tm-showcase-resume-slot {
		position: fixed !important;
		left: 18px !important;
		right: auto !important;
		bottom: calc(18px + 36px + 10px) !important;
		width: auto !important;
		max-width: calc(100vw - 36px) !important;
		z-index: 150 !important;
	}

	/* Hide the directional arrow buttons; keep only the loop button */
	.keyboard-nav-btn:not(.keyboard-nav-loop) {
		display: none !important;
	}

	.keyboard-nav-loop {
		position: fixed !important;
		bottom: 18px !important;
		left: 18px !important;
		right: auto !important;
		top: auto !important;
		z-index: 150 !important;
		grid-column: unset !important;
		display: inline-flex !important;
		/* Match hero-global-btn look */
		border: 1px solid rgba(255, 255, 255, 0.18) !important;
		background: rgba(0, 0, 0, 0.82) !important; /* slightly opaque to compensate for no blur on touch */
		color: #D4AF37 !important;
		border-radius: 8px !important;
		/* backdrop-filter intentionally omitted — GPU compositor black-screen
		   fix for Android (Vulkan/GLES). Blur over hw-decoded video causes
		   black frames on foldables/phones. Covered by player.css touch block. */
		box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.37), inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		min-height: 36px !important;
		max-width: 36px !important;
		max-height: 36px !important;
	}
	.keyboard-nav-loop .keyboard-nav-icon {
		font-size: 14px !important;
	}
	.keyboard-nav-loop.is-active {
		border-color: rgba(212, 175, 55, 0.8) !important;
		background: rgba(0, 0, 0, 0.9) !important;
		color: #D4AF37 !important;
		box-shadow:
			0 6px 24px rgba(212, 175, 55, 0.35),
			inset 0 1px 0 0 rgba(255, 255, 255, 0.2) !important;
	}

	/* 6) Checkbox labels: short text + single row */
	.toggle-text-full { display: none !important; }
	.toggle-text-short { display: inline !important; }
	.hero-toggle-row { flex-wrap: nowrap !important; }

	/* 4) Global controls — bottom-right, vertically stacked */
	.hero-global-controls {
		position: fixed !important;
		bottom: var(--tm-mobile-controls-clearance) !important;
		right: 18px !important;
		left: auto !important;
		top: auto !important;
		z-index: 150 !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 6px !important;
	}

	/* 5) Mute button — keep visible on touch devices */
	.hero-global-mute {
		display: inline-flex !important;
	}
}

/* ── Profile strip: "View details" button ──────────────────────────────────── */
.tm-strip-details-btn {
	display: inline-block;
	background: none;
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 4px;
	color: rgba(255,255,255,0.75);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 2px 8px;
	cursor: pointer;
	margin-left: 8px;
	vertical-align: middle;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	white-space: nowrap;
}
.tm-strip-details-btn:hover,
.tm-strip-details-btn[aria-expanded="true"] {
	background: rgba(255,255,255,0.15);
	color: #fff;
	border-color: rgba(255,255,255,0.6);
}

/* ── Profile strip: missing-fields popup ───────────────────────────────────── */
.tm-strip-details-popup {
	position: fixed;
	z-index: 1499; /* just below the strip itself (1500) so it tucks under if overlap, above page */
	box-sizing: border-box;
	padding-top: 10px; /* space for the arrow */
}
.tm-strip-details-popup[hidden] {
	display: none;
}
.tm-strip-details-popup__arrow {
	position: absolute;
	top: 2px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 8px solid rgba(30, 32, 42, 0.97);
}
.tm-strip-details-popup__inner {
	background: rgba(22, 24, 34, 0.97);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 8px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.55);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	overflow: hidden;
}

.tm-strip-details-inline {
	margin-top: 10px;
	width: 100%;
}

.tm-strip-details-inline .tm-strip-details-popup__inner {
	box-shadow: none;
}

.tm-strip-details-inline .tm-strip-details-popup__body {
	max-height: none;
	overflow: visible;
}
.tm-strip-details-popup__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px 8px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tm-strip-details-popup__title {
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.tm-strip-details-close {
	background: none;
	border: none;
	color: rgba(255,255,255,0.45);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 0 2px;
	transition: color 0.15s;
}
.tm-strip-details-close:hover {
	color: #fff;
}
.tm-strip-details-popup__body {
	padding: 10px 14px 12px;
	max-height: 260px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.tm-sdp-section__name {
	color: #D4AF37;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin-bottom: 4px;
	text-align: left;
}
.tm-sdp-section__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
}
.tm-sdp-section__items li {
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 4px;
	color: #c8c8d4;
	font-size: 11px;
	padding: 2px 8px;
}
.tm-sdp-empty {
	color: rgba(255,255,255,0.45);
	font-size: 12px;
	margin: 0;
}

/* -- Store listing: Profile Level - shares all .store-lists-category CSS -- */
.tm-level-filter-wrap .tm-level-items {
	color: #C0C0C0 !important;
	flex-grow: 1 !important;
}
.tm-level-filter-wrap .tm-level-items:empty::before {
	content: 'All levels' !important;
	color: #999 !important;
}
.tm-level-filter-wrap {
	position: relative;
}
.tm-level-box {
	position: absolute;
	z-index: 100;
	width: 100%;
	left: 0;
}


/* ==========================================================================
   PAGE-NAV ARROW PAGER
   Prev / next arrow buttons that replace Dokan's numbered pagination on the
   store-listing (platform) page.
   ========================================================================== */

/* ==========================================================================
   EMPTY-RESULTS MESSAGE
   Replaces Dokan's red-on-white "No vendor found!" box with our dark/gold style.
   ========================================================================== */
.dokan-error {
	background: #0d0d0d !important;
	color: #D4AF37 !important;
	border: 1px solid rgba(212, 175, 55, 0.35) !important;
	border-left: 3px solid #D4AF37 !important;
	border-radius: 4px !important;
	padding: 14px 20px 14px 50px !important;
	margin: 20px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0.03em !important;
	box-shadow: none !important;
}

/* Hide Dokan's native numbered pagination from the very first paint so it
   never flashes before the JS arrow pager takes over. The JS can still read
   prev/next hrefs from the hidden element since display:none keeps it in DOM. */
body.tm-pager-enhanced .pagination-container {
display: none !important;
}

/* Fallback/native pagination styling for ecomcine-stores.
   Keeps the pagination block visually aligned with the original footer look
   when JS pager enhancement is unavailable. */
.pagination-container {
	margin-top: 56px;
	margin-bottom: 28px;
	padding: 0 20px;
}

.pagination-container .pagination-wrap {
	display: flex;
	justify-content: center;
}

.pagination-container ul.pagination {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}

.pagination-container ul.pagination > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pagination-container ul.pagination > li > a,
.pagination-container ul.pagination > li > span {
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid rgba(212, 175, 55, 0.45);
	background: rgba(0, 0, 0, 0.62);
	color: #D4AF37;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

.pagination-container ul.pagination > li > a:hover,
.pagination-container ul.pagination > li > a:focus-visible {
	background: rgba(212, 175, 55, 0.18);
	border-color: #D4AF37;
	transform: translateY(-1px);
	outline: none;
}

.pagination-container ul.pagination > li > span.current {
	background: rgba(212, 175, 55, 0.22);
	border-color: #D4AF37;
	color: #f2d77a;
}

.pagination-container ul.pagination > li > span.dots {
	min-width: 18px;
	padding: 0 4px;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: rgba(212, 175, 55, 0.85);
}

#tm-card-pager {
position: relative;
}

.tm-card-arrow {
position: static;
z-index: auto;
width: 42px;
height: 42px;
background: rgba(0, 0, 0, 0.6);
border: 2px solid rgba(212, 175, 55, 0.5);
border-radius: 50%;
color: #D4AF37;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: background 0.2s, border-color 0.2s, transform 0.15s;
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
flex-shrink: 0;
}

.tm-card-arrow svg {
width: 20px;
height: 20px;
pointer-events: none;
}

.tm-card-arrow:hover:not(:disabled) {
background: rgba(212, 175, 55, 0.18);
border-color: #D4AF37;
transform: scale(1.12);
}

.tm-card-arrow:disabled {
opacity: 0.18;
cursor: default;
pointer-events: none;
}

/* ── Card pager layout ────────────────────────────────────────────────────
   Row 1: vendor grid (full width)
   Row 2: 3-column grid → [ ← prev ] [ bar: sort + showcase ] [ next → ]
   25 px gap on each side between each arrow and the bar.
   ────────────────────────────────────────────────────────────────────────── */
#tm-card-pager {
	display: block;
}

/* Row 1: vendor grid — full width, natural block flow */
#tm-card-pager > #dokan-seller-listing-wrap {
	width: 100%;
}

/* Row 2: prev/next arrows and bar — no longer flex children, no order needed */
#tm-card-pager > #tm-card-prev,
#tm-card-pager > #tm-card-next {
	display: none; /* arrows now live inside #tm-pager-bar */
}

/* ── Pager bar (Sort + Showcase, centred) ──────────────────────────────── */
#tm-pager-bar {
	/* 40px = avatar overhang (translateY 50% of 80px); 20px breathing room */
	margin-top: 60px;
	margin-bottom: 20px;
	z-index: 20;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

/* When arrows live INSIDE #tm-pager-bar (new JS structure),
   give them 25 px breathing room from the Sort/Showcase content */
#tm-pager-bar > .tm-card-arrow:first-child { margin-right: 25px; }
#tm-pager-bar > .tm-card-arrow:last-child  { margin-left:  25px; }

/* Sort button wrapper – needed for the absolutely-positioned dropdown */
#tm-sort-wrap {
	position: relative;
}

#tm-sort-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid rgba(212, 175, 55, 0.5);
	border-radius: 4px;
	color: #D4AF37;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s, border-color 0.2s;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}

#tm-sort-btn svg {
	width: 18px;
	height: 18px;
	pointer-events: none;
}

#tm-sort-btn:hover,
#tm-sort-btn.is-open {
	background: rgba(212, 175, 55, 0.15);
	border-color: #D4AF37;
}

/* Dropdown slides up from above the sort button */
#tm-sort-dropdown {
	display: none;
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	min-width: 165px;
	background: #111;
	border: 1px solid rgba(212, 175, 55, 0.4);
	border-radius: 4px;
	list-style: none;
	margin: 0;
	padding: 4px 0;
	z-index: 30;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
}

#tm-sort-dropdown.is-open {
	display: block;
}

#tm-sort-dropdown li {
	padding: 10px 16px;
	font-size: 11px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgba(212, 175, 55, 0.7);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	white-space: nowrap;
}

#tm-sort-dropdown li:hover {
	background: rgba(212, 175, 55, 0.1);
	color: #D4AF37;
}

#tm-sort-dropdown li.selected {
	color: #D4AF37;
	font-weight: 600;
}

#tm-sort-dropdown li.selected::before {
	content: '\2713\00a0'; /* ✓ + non-breaking space */
}

/* ── Showcase button ─────────────────────────────────────────────────────── */
#tm-showcase-btn {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 22px;
	background: transparent;
	border: 1px solid #D4AF37;
	border-radius: 4px;
	color: #D4AF37;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	box-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

#tm-showcase-btn:hover {
	background: #D4AF37;
	color: #000;
}

/* ═══════════════════════════════════════════════════════════════════════════
	CINEMATIC HEADER — Home icon menu item
	═══════════════════════════════════════════════════════════════════════════ */

.tm-header-home-item {
	display: flex;
	align-items: center;
	margin-right: 8px;
}

.tm-header-home-link {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4px 10px;
	color: #ffffff;
	opacity: 0.85;
	transition: opacity 0.2s, color 0.2s;
	text-decoration: none;
}

.tm-header-home-link:hover,
.tm-header-home-link:focus {
	opacity: 1;
	color: #eab150;
}

.tm-header-home-link svg {
	display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CINEMATIC HEADER — Corporate menu item icon
   ═══════════════════════════════════════════════════════════════════════════ */

/* Allow the nav to grow wide enough to show all items without clipping */
body.dokan-store .tm-header-nav {
	max-width: none !important;
	overflow: visible !important;
	min-width: 0 !important;
	width: 100% !important;
	justify-self: stretch !important;
}

/* Keep left/social block single-line and allocate reliable space to center/right areas. */
body.dokan-store .tm-cinematic-header__inner {
	grid-template-columns: auto minmax(0, 1fr) auto !important;
	column-gap: 12px !important;
}

body.dokan-store .tm-cinematic-header .tm-header-nav {
	max-width: min(980px, 76vw) !important;
	margin: 0 auto !important;
	overflow: visible !important;
}

body.dokan-store .tm-header-left {
	flex-wrap: nowrap !important;
	min-width: 0 !important;
}

body.dokan-store .tm-header-platforms {
	flex-wrap: nowrap !important;
	white-space: nowrap !important;
	padding: 0 12px !important;
	gap: 8px !important;
}

body.dokan-store .tm-header-platforms__label {
	display: inline-flex !important;
	align-items: center !important;
	white-space: nowrap !important;
	line-height: 1 !important;
	letter-spacing: 0.08em !important;
}

body.dokan-store .tm-header-platforms__icons {
	flex-wrap: nowrap !important;
}

body.dokan-store .tm-header-menu {
	overflow: visible !important;
	gap: 8px !important;
}

body.dokan-store .tm-header-menu > li {
	flex: 0 0 auto !important;
}

#menu-item-1091 {
	margin-left: 20px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CINEMATIC HEADER — Sign in / Sign up account menu item
   ═══════════════════════════════════════════════════════════════════════════ */

.tm-header-account-item {
	margin: 0 0 0 10px !important;
	padding: 0 !important;
	list-style: none !important;
	flex-shrink: 0 !important;
}

.tm-header-account-slot {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	flex-shrink: 0 !important;
	max-width: 100% !important;
}

.tm-header-account-pill {
	display: inline-flex !important;
	align-items: center !important;
	gap: 5px !important;
	padding: 7px 10px !important;
	border-radius: 14px !important;
	border: 1px solid rgba(212, 175, 55, 0.35) !important;
	background: rgba(0, 0, 0, 0.55) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
	transition: border-color 180ms ease, box-shadow 180ms ease !important;
	white-space: nowrap !important;
}

.tm-header-account-pill:hover {
	border-color: rgba(212, 175, 55, 0.7) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}

.tm-header-account-icon {
	color: #f2d889 !important;
	font-size: 14px !important;
	width: 14px !important;
	height: 14px !important;
	display: inline-block !important;
	opacity: 0.85 !important;
}

.tm-header-account-link {
	color: #f2d889 !important;
	font-size: 10px !important;
	letter-spacing: 0.11em !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	opacity: 0.85 !important;
	transition: opacity 0.2s, color 0.2s !important;
}

.tm-header-account-link:hover,
.tm-header-account-link:focus-visible {
	opacity: 1 !important;
	color: #ffffff !important;
}

.tm-header-account-item--logged-in .tm-header-account-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 10px !important;
	border-radius: 14px !important;
	border: 1px solid rgba(212, 175, 55, 0.35) !important;
	background: rgba(0, 0, 0, 0.55) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
	text-transform: none !important;
	letter-spacing: 0.03em !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	max-width: 220px !important;
	transition: border-color 180ms ease, box-shadow 180ms ease, color 0.2s, opacity 0.2s !important;
}

.tm-header-account-slot--logged-in .tm-header-account-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 10px !important;
	border-radius: 14px !important;
	border: 1px solid rgba(212, 175, 55, 0.35) !important;
	background: rgba(0, 0, 0, 0.55) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
	text-transform: none !important;
	letter-spacing: 0.03em !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	max-width: 220px !important;
	transition: border-color 180ms ease, box-shadow 180ms ease, color 0.2s, opacity 0.2s !important;
}

.tm-header-account-item--logged-in .tm-header-account-link:hover,
.tm-header-account-item--logged-in .tm-header-account-link:focus-visible {
	border-color: rgba(212, 175, 55, 0.7) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}

.tm-header-account-slot--logged-in .tm-header-account-link:hover,
.tm-header-account-slot--logged-in .tm-header-account-link:focus-visible {
	border-color: rgba(212, 175, 55, 0.7) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}

.tm-open-account-seller {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border: 0 !important;
	border-top: 0 !important;
	border-right: 0 !important;
	border-bottom: 0 !important;
	border-left: 0 !important;
	outline: none !important;
}

.tm-header-account-avatar {
	display: inline-flex !important;
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	border: 1px solid rgba(212, 175, 55, 0.65) !important;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55) inset !important;
	flex: 0 0 22px !important;
}

.tm-header-account-avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}

.tm-header-account-name {
	display: inline-block !important;
	max-width: 15ch !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	color: #f2d889 !important;
}

.tm-header-account-sep {
	color: rgba(242, 216, 137, 0.45) !important;
	font-size: 11px !important;
	font-weight: 400 !important;
}

#menu-item-1091 > a {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #eab150 !important;
	border-color: #eab150 !important;
	color: #000000 !important;
}

.tm-menu-icon {
	font-size: 16px;
	width: 16px;
	height: 16px;
	display: inline-block;
	opacity: 0.85;
	transition: opacity 0.2s, color 0.2s;
}

#menu-item-1091 > a:hover,
#menu-item-1091 > a:focus-visible {
	background: #f2d889 !important;
	border-color: #f2d889 !important;
	color: #000000 !important;
}

#menu-item-1091 > a:hover .tm-menu-icon,
#menu-item-1091 > a:focus .tm-menu-icon {
	opacity: 1;
	color: #000000;
}

/* On the showcase page, escape document flow entirely (same approach as mobile).
   This fills the viewport by coordinates, ignoring any Astra/WP padding above
   the content — eliminating both the top offset and the matching bottom gap that
   the old -30px margin hack created. */
body.tm-showcase-page .tm-profile-frame-wrapper {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	overflow-x: visible !important;
	overflow-y: hidden !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMPLATE LAYOUT NORMALIZATION — Showcase + Platform
   Keeps template files free of inline style blocks by centralizing the
   page-scoped layout/visibility rules used by these custom templates.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Showcase pages: hide native Astra header wrappers and neutralize top offsets. */
body.tm-showcase-page #masthead,
body.tm-showcase-page #ast-desktop-header,
body.tm-showcase-page #ast-mobile-header {
	display: none !important;
	height: 0 !important;
}

body.tm-showcase-page #content.site-content,
body.tm-showcase-page #page {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* Platform template: same header suppression and viewport lock behavior. */
body.tm-platform-page #masthead,
body.tm-platform-page #ast-desktop-header,
body.tm-platform-page #ast-mobile-header {
	display: none !important;
}

html body.tm-platform-page {
	overflow: hidden !important;
	height: 100% !important;
}

body.tm-platform-page #tm-platform-content {
	width: 100%;
	max-width: 1800px;
	margin-left: auto;
	margin-right: auto;
	height: 100vh;
	box-sizing: border-box;
	background: #0a0a0a;
	padding-top: var(--tm-header-height, 70px);
	padding-bottom: 0;
	overflow-y: auto;
}

body.tm-platform-page.tm-listing-page #tm-platform-content {
	padding-top: var(--tm-listing-header-clearance) !important;
}

/* Listing pages: suppress the base theme shell header and keep the cinematic
	header in normal layout flow using sticky positioning. This ensures the
	filter/content stack always starts beneath the header on first paint. */

body.tm-listing-page .ecomcine-site-header,
body.tm-listing-page #masthead,
body.tm-listing-page #ast-desktop-header,
body.tm-listing-page #ast-mobile-header,
body.tm-listing-page .entry-header,
body.tm-listing-page .page-header {
	display: none !important;
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
}

body.tm-listing-page {
	--tm-listing-header-top: calc(20px + var(--wp-admin--admin-bar--height, 0px));
	--tm-listing-header-height: 72px;
	--tm-listing-header-gap: 12px;
	--tm-listing-header-clearance: calc(20px + var(--tm-listing-header-height) + var(--tm-listing-header-gap));
}

body.tm-listing-page .tm-cinematic-header,
body.tm-listing-page.dokan-store .tm-cinematic-header {
	position: fixed !important;
	top: var(--tm-listing-header-top) !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: calc(100% - 40px) !important;
	max-width: 1920px !important;
	z-index: 110 !important;
	pointer-events: none !important;
	display: block !important;
}

	body.tm-listing-page .tm-cinematic-header__inner,
	body.tm-listing-page.dokan-store .tm-cinematic-header__inner {
	bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) + var(--tm-browser-ui-offset, 0px))) !important;
	position: relative !important;
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr) auto !important;
	align-items: center !important;
	column-gap: 12px !important;
	padding: 8px 14px !important;
	--tm-header-size: 48px;
	background: rgba(0, 0, 0, 0.45) !important;
	border: 1px solid rgba(212, 175, 55, 0.25) !important;
	border-radius: 18px !important;
	backdrop-filter: blur(18px) !important;
	-webkit-backdrop-filter: blur(18px) !important;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35) !important;
	pointer-events: auto !important;
}

body.tm-listing-page .tm-header-left {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	flex-wrap: nowrap !important;
	min-width: 0 !important;
}

body.tm-listing-page .tm-header-left .custom-logo-link img,
body.tm-listing-page .tm-header-left .custom-logo-link svg {
	max-height: 42px !important;
	width: auto !important;
}

body.tm-listing-page .tm-header-platforms {
	flex-wrap: nowrap !important;
	white-space: nowrap !important;
	padding: 0 12px !important;
	gap: 8px !important;
}

body.tm-listing-page .tm-header-platforms__label {
	display: inline-flex !important;
	align-items: center !important;
	white-space: nowrap !important;
	line-height: 1 !important;
	letter-spacing: 0.08em !important;
}

body.tm-listing-page .tm-header-platforms__icons {
	flex-wrap: nowrap !important;
}

body.tm-listing-page .tm-header-nav {
	justify-self: center !important;
	max-width: min(980px, 76vw) !important;
	margin: 0 auto !important;
	overflow: visible !important;
	min-width: 0 !important;
	width: 100% !important;
}

body.tm-listing-page .tm-header-menu {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	gap: 8px !important;
	align-items: center !important;
	justify-content: center !important;
	flex-wrap: nowrap !important;
	overflow: visible !important;
}

body.tm-listing-page .tm-header-menu > li {
	margin: 0 !important;
	flex: 0 0 auto !important;
}

body.tm-listing-page .tm-header-menu > li > a {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 8px 12px !important;
	border-radius: 14px !important;
	border: 1px solid rgba(212, 175, 55, 0.35) !important;
	background: rgba(0, 0, 0, 0.55) !important;
	color: #f2d889 !important;
	font-size: 11px !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
	transition: transform 180ms ease, box-shadow 180ms ease, color 180ms ease, border-color 180ms ease !important;
}

body.tm-listing-page .tm-header-menu > li > a:hover,
body.tm-listing-page .tm-header-menu > li > a:focus-visible {
	color: #ffffff !important;
	border-color: rgba(212, 175, 55, 0.7) !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
	transform: translateY(-1px) !important;
}

body.tm-listing-page .tm-header-actions {
	justify-self: end !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
}

body.tm-listing-page .tm-header-icon {
	position: relative !important;
	width: var(--tm-header-size) !important;
	height: var(--tm-header-size) !important;
	border-radius: 12px !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	background: rgba(0, 0, 0, 0.65) !important;
	color: #D4AF37 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
	transition: transform 180ms ease, box-shadow 180ms ease, color 180ms ease !important;
	cursor: pointer !important;
}

body.tm-listing-page .tm-header-icon:hover,
body.tm-listing-page .tm-header-icon:focus-visible {
	color: #ffffff !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

body.tm-listing-page .tm-header-icon i {
	font-size: 16px !important;
}

body.tm-listing-page .tm-header-icon .tm-header-icon-svg {
	width: 16px !important;
	height: 16px !important;
	display: inline-block !important;
	fill: currentColor !important;
}

body.tm-listing-page .tm-header-count {
	position: absolute !important;
	top: -5px !important;
	right: -5px !important;
	min-width: 18px !important;
	height: 18px !important;
	padding: 0 6px !important;
	border-radius: 999px !important;
	background: #D4AF37 !important;
	color: #000000 !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	line-height: 18px !important;
	text-align: center !important;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35) !important;
}

body.tm-listing-page .tm-header-toggle {
	display: none !important;
}

body.tm-listing-page #page {
	margin-top: 0 !important;
	padding-top: var(--tm-listing-header-clearance) !important;
}

body.tm-listing-page #tm-platform-content {
	margin-top: 0 !important;
}

body.tm-listing-page #content.site-content,
body.tm-listing-page .site-content,
body.tm-listing-page .ast-container,
body.tm-listing-page main.site-main,
body.tm-listing-page article,
body.tm-listing-page .entry-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

body.tm-listing-page .ecomcine-person-listing__filters {
	display: block !important;
	margin-top: 0 !important;
	margin-bottom: 10px !important;
	padding-bottom: 10px !important;
	box-sizing: border-box !important;
}

body.tm-listing-page #ecomcine-person-listing.grid-view {
	margin-top: 0 !important;
}

/* FluentCart checkout modal: keep out of layout until opened by JS.
   The plugin renders it on every page-load; display:none avoids any
   height contribution before the cart flow is triggered. */
.fct-checkout-modal-container {
	display: none !important;
}
.fct-checkout-modal-container.is-open,
.fct-checkout-modal-container.is-active,
.fct-checkout-modal-container[data-open="true"] {
	display: block !important;
}

body.tm-listing-page .tm-booking-modal {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

body.tm-listing-page .tm-booking-modal.is-open,
body.tm-listing-page.tm-booking-modal-open .tm-booking-modal,
body.tm-listing-page .tm-booking-modal[aria-hidden="false"] {
	display: block !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

body.tm-platform-page #page {
	min-height: 0 !important;
}

body.tm-platform-page #content.site-content {
	flex-grow: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Dokan settings: centralized banner dimension rules (replaces inline <style>). */
.tm-dokan-store-form .tm-dokan-banner-dimensions {
	max-width: var(--tm-dokan-banner-width, 625px);
	max-height: var(--tm-dokan-banner-height, 300px);
}

.tm-dokan-store-form .tm-dokan-banner-dimensions .dokan-remove-banner-image {
	height: var(--tm-dokan-banner-height, 300px);
}

.tm-dokan-store-form .tm-banner-video-preview {
	max-width: 100%;
	height: auto;
}

.tm-dokan-store-form .tm-hidden-by-default {
	display: none;
}

.tm-dokan-store-form .tm-physical-attributes-title {
	margin-top: 30px;
	margin-bottom: 20px;
	font-size: 18px;
	border-bottom: 2px solid #f05025;
	padding-bottom: 10px;
}

.tm-dokan-store-form .tm-store-settings-submit-wrap {
	margin-left: 24%;
}

/* Full-showcase takeover layout (migrated from template inline styles). */
.tm-showcase-takeover {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.tm-showcase-takeover .dokan-store-wrap {
	width: 100%;
	margin: 0;
}

body.ecomcine-person-unavailable:not(.ecomcine-person-editable) .dokan-store-wrap {
	min-height: calc(100vh - var(--tm-header-height, 70px));
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(var(--tm-header-height, 70px) + 32px) 24px 32px;
	box-sizing: border-box;
}

body.ecomcine-person-unavailable:not(.ecomcine-person-editable) #dokan-primary,
body.ecomcine-person-unavailable:not(.ecomcine-person-editable) .dokan-single-store {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tm-person-unavailable-state {
	width: min(560px, 100%);
}

.tm-person-unavailable-state__card {
	border: 1px solid rgba(212, 175, 55, 0.34);
	border-radius: 22px;
	padding: 32px 36px;
	background: linear-gradient(180deg, rgba(18, 18, 18, 0.96) 0%, rgba(8, 8, 8, 0.96) 100%);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
	text-align: center;
	backdrop-filter: blur(10px);
}

.tm-person-unavailable-state__eyebrow {
	margin-bottom: 12px;
	color: #d4af37;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.tm-person-unavailable-state__message {
	color: #f3e7b3;
	font-size: 20px;
	line-height: 1.6;
	margin: 0;
}

.tm-showcase-takeover #dokan-primary,
.tm-showcase-takeover .dokan-single-store {
	width: 100%;
}

.tm-showcase-takeover .profile-frame {
	min-height: var(--tm-visible-viewport-height, 100dvh);
}

/* Also zero out the Astra container's top/bottom padding on the showcase page */
body.tm-showcase-page #content > .ast-container {
	padding-top: 0 !important;
	margin-top: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

/* Zero out any bottom gap on #content and #page itself */
body.tm-showcase-page #content,
body.tm-showcase-page #page {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

/* Prevent the page from overflowing past 100vh — the negative margin-top on
   .tm-showcase-takeover shifts content up but leaves a matching gap at the
   bottom of the 100vh flex container. Clipping body eliminates that sliver. */
body.tm-showcase-page {
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	height: var(--tm-visible-viewport-height, 100dvh) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VENDOR LISTING CARD — left-aligned info block overrides
   These rules override the shared flex+center rules that are correct for
   vendor profile/dashboard pages but wrong for the store-listing cards.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1 ─ Store-data: left-aligned flex column */
#dokan-seller-listing-wrap.ecomcine-store-listing-wrap .store-wrapper {
	position: relative !important;
}

#dokan-seller-listing-wrap.ecomcine-store-listing-wrap .store-wrapper .tm-store-card-link {
	position: absolute !important;
	inset: 0 !important;
	z-index: 20 !important;
	display: block !important;
	text-decoration: none !important;
	border: 0 !important;
}

#dokan-seller-listing-wrap.ecomcine-store-listing-wrap .store-wrapper > *:not(.tm-store-card-link) {
	pointer-events: none !important;
}

#dokan-seller-listing-wrap .store-data {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	width: 100% !important;
	gap: 2px !important;
}

/* 2 ─ Vendor name wrapper: full-width, position:relative anchor.
       ALWAYS reserves 32px below h2 so categories land at the same
       vertical position on every card whether featured or not. */
#dokan-seller-listing-wrap .store-data .vendor-name-featured {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	width: 100% !important;
	padding-bottom: 0 !important;
}

#dokan-seller-listing-wrap .store-data .vendor-name-featured h2 {
	margin: 0 !important;
	min-height: 20px !important;
	display: flex !important;
	align-items: center !important;
}

/* 3 ─ Vendor name overlay pill + status badge row */
#dokan-seller-listing-wrap .store-data .vendor-name-featured .vendor-name-pill {
	display: inline-flex !important;
	align-items: center !important;
	padding: 3px 10px !important;
	border-radius: 999px !important;
	background: rgba(0, 0, 0, 0.45) !important;
	line-height: 1.2 !important;
}

#dokan-seller-listing-wrap .store-data .vendor-name-featured .tm-card-status-row {
	display: flex !important;
	gap: 6px !important;
	align-items: center !important;
	margin-top: 2px !important;
	flex-wrap: nowrap !important;
	height: 24px !important;
	min-height: 24px !important;
}

#dokan-seller-listing-wrap .store-data .vendor-name-featured .tm-card-status-row.tm-card-status-row--empty {
	visibility: hidden !important;
}

#dokan-seller-listing-wrap .store-data .vendor-name-featured .tm-card-status-row .featured-label,
#dokan-seller-listing-wrap .store-data .vendor-name-featured .tm-card-status-row .verified-label {
	position: static !important;
	margin: 0 !important;
	padding: 3px 10px !important;
	border-radius: 999px !important;
	font-size: 11px !important;
	line-height: 1 !important;
	height: 20px !important;
	min-height: 20px !important;
	display: inline-flex !important;
	align-items: center !important;
}

/* 4 ─ Categories + Location wrappers: left-aligned blocks */
#dokan-seller-listing-wrap .store-data .store-categories-wrapper,
#dokan-seller-listing-wrap .store-data .location-wrapper {
	display: block !important;
	width: 100% !important;
	text-align: left !important;
	justify-content: flex-start !important;
	margin-top: 2px !important;
}

/* 5 ─ field-display: plain block so the inline pill inside sizes to content */
#dokan-seller-listing-wrap .store-data .store-categories-wrapper .field-display,
#dokan-seller-listing-wrap .store-data .location-wrapper .field-display {
	display: block !important;
	text-align: left !important;
	justify-content: flex-start !important;
}

/* 6 ─ Categories pill: keep inline-flex (pill already has bg/padding/radius)
       so width = content not 100% of container.
       Left-align inner text. */
#dokan-seller-listing-wrap .store-data .store-categories-display {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	text-align: left !important;
	gap: 6px !important;
	padding: 3px 10px !important;
	border-radius: 999px !important;
	background: rgba(0, 0, 0, 0.45) !important;
}

#dokan-seller-listing-wrap .store-data .store-categories-display .tm-card-category-label {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: #d4af37 !important;
	opacity: 0.95 !important;
	white-space: nowrap !important;
}

#dokan-seller-listing-wrap .store-data .store-categories-display .tm-card-category-label::before {
	content: '' !important;
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	background: #d4af37 !important;
	box-shadow: 0 0 8px rgba(212, 175, 55, 0.55) !important;
	flex-shrink: 0 !important;
}

#dokan-seller-listing-wrap .store-data .store-categories-display .tm-card-category-value {
	font-size: 12px !important;
	color: #c0c0c0 !important;
	font-style: italic !important;
	text-align: left !important;
}
#dokan-seller-listing-wrap .store-data .store-categories-display-group {
	align-items: flex-start !important;
}
#dokan-seller-listing-wrap .store-data .store-categories-display .tm-combo-pill__cats,
#dokan-seller-listing-wrap .store-data .store-categories-display-group .tm-combo-pill__level,
#dokan-seller-listing-wrap .store-data .store-categories-display .tm-combo-pill__cats-row {
	text-align: left !important;
	justify-content: flex-start !important;
}

#dokan-seller-listing-wrap .store-data .store-categories-display-group .tm-combo-pill__level-pill {
	align-self: flex-start !important;
}

/* 7 ─ Location pill: same dark rounded pill style as .store-categories-display */
#dokan-seller-listing-wrap .store-data .location-display {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 3px 10px !important;
	border-radius: 999px !important;
	background: rgba(0, 0, 0, 0.45) !important;
	font-size: 12px !important;
	color: #C0C0C0 !important;
	font-style: italic !important;
}

/* Keep geo-address text colour consistent */
#dokan-seller-listing-wrap .store-data .location-display .geo-address {
	color: #C0C0C0 !important;
}

/* Country flag inside the card overlay: override the width/height HTML attrs
 * to match the 12px text scale of the location pill (≈1.5× em = 18px). */
#dokan-seller-listing-wrap .store-data .location-display .country-flag,
#dokan-seller-listing-wrap .store-data .location-display .country-flag img {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
	flex-shrink: 0 !important;
	display: inline-block !important;
	vertical-align: middle !important;
}

/* ========================================
	TALENTS STANDALONE PARITY RECOVERY
	Re-apply the pre-independence Talents visual contract to the
	standalone ecomcine DOM after the Dokan/Astra wrapper removal.
	======================================== */

.store-lists-other-filter-wrap #ecomcine-filter-actions-cell {
	order: 6;
}

.store-search-field label[for="ecomcine-person-search"] {
	display: none !important;
}

.store-lists-other-filter-wrap .featured.item > label[for="ecomcine-featured"],
.store-lists-other-filter-wrap .open-now.item:not(.tm-profile-level-filter) > label[for="ecomcine-verified"] {
	color: #D4AF37 !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	margin: 0 !important;
	text-align: center !important;
}

#ecomcine-filter-actions-cell {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-end !important;
	justify-content: flex-end !important;
	gap: 10px !important;
	white-space: nowrap !important;
}

#ecomcine-filter-links-wrap {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	justify-content: center !important;
	align-self: center !important;
	gap: 2px !important;
	text-align: right !important;
	margin: 0 !important;
	line-height: 1 !important;
}

#ecomcine-apply-filters-btn {
	background: #D4AF37 !important;
	color: #000000 !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 52px !important;
	height: 42px !important;
	min-height: 42px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 1px !important;
	border-radius: 3px !important;
	cursor: pointer !important;
	line-height: 1 !important;
	box-shadow: none !important;
	text-transform: uppercase !important;
}

#ecomcine-apply-filters-btn:hover {
	background: #C09F2F !important;
	color: #000000 !important;
}

#ecomcine-view-all-filters-btn,
#ecomcine-clear-all-filters-btn {
	display: inline-block !important;
	text-decoration: none !important;
	font-size: 0.85em !important;
	font-weight: 400 !important;
	cursor: pointer !important;
	line-height: 1.2 !important;
}

#ecomcine-view-all-filters-btn {
	color: #D4AF37 !important;
}

#ecomcine-clear-all-filters-btn {
	color: #aaaaaa !important;
}

#ecomcine-view-all-filters-btn:hover,
#ecomcine-clear-all-filters-btn:hover {
	color: #ffffff !important;
	text-decoration: underline !important;
}

#ecomcine-person-listing.grid-view {
	margin-top: 34px !important;
	padding-left: 20px !important;
	padding-right: 20px !important;
}

#ecomcine-person-listing.grid-view .ecomcine-person-listing__content {
	padding-left: 0 !important;
	padding-right: 0 !important;
	width: 100% !important;
	max-width: none !important;
}

#ecomcine-person-listing.grid-view ul.ecomcine-person-cards {
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	display: flex !important;
	flex-wrap: wrap !important;
	row-gap: 60px !important;
	column-gap: 0 !important;
	align-items: stretch !important;
}

#ecomcine-person-listing.grid-view ul.ecomcine-person-cards li.ecomcine-person-card--grid {
	width: calc(100% / var(--tm-grid-columns, 4)) !important;
	box-sizing: border-box !important;
	padding-left: 15px !important;
	padding-right: 15px !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
	overflow: visible !important;
	align-self: stretch !important;
}

#ecomcine-person-listing .ecomcine-person-card .store-wrapper {
	position: relative !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow: visible !important;
	border-radius: 0 !important;
	min-height: 100% !important;
}

#ecomcine-person-listing .ecomcine-person-card .store-wrapper .store-header {
	position: relative !important;
	z-index: 1 !important;
}

#ecomcine-person-listing .ecomcine-person-card .store-wrapper .store-header .store-banner {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	overflow: hidden !important;
	height: clamp(170px, 13vw, 210px) !important;
	min-height: 170px !important;
	background: linear-gradient(180deg, rgba(26,26,26,0.35) 0%, rgba(0,0,0,0.7) 100%) !important;
	border-radius: 0 !important;
}

#ecomcine-person-listing .ecomcine-person-card .store-wrapper .store-header .store-banner a,
#ecomcine-person-listing .ecomcine-person-card .store-wrapper .store-header .store-banner img,
#ecomcine-person-listing .ecomcine-person-card .store-wrapper .store-header .store-banner .tm-store-fallback-banner {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	border-radius: 0 !important;
}

#ecomcine-person-listing .ecomcine-person-card .store-wrapper .store-header .store-banner img {
	position: absolute !important;
	inset: 0 !important;
	object-fit: cover !important;
	object-position: center center !important;
	filter: saturate(1.02) contrast(1.02) !important;
	opacity: 1 !important;
	visibility: visible !important;
}

#ecomcine-person-listing.grid-view .store-content {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	text-align: left !important;
	z-index: 5 !important;
	padding: 0 18px 44px 18px !important;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.52) 42%, rgba(0, 0, 0, 0.12) 68%, transparent 100%) !important;
	pointer-events: none !important;
}

#ecomcine-person-listing.grid-view .store-content .store-data-container {
	position: absolute !important;
	left: 18px !important;
	right: 18px !important;
	top: 14px !important;
	width: auto !important;
	text-align: left !important;
}

#ecomcine-person-listing.grid-view .store-content .store-data,
#ecomcine-person-listing.grid-view .store-content .store-data h2,
#ecomcine-person-listing.grid-view .store-content .store-data h2 a,
#ecomcine-person-listing.grid-view .store-content .store-data p,
#ecomcine-person-listing.grid-view .store-content .store-categories-wrapper,
#ecomcine-person-listing.grid-view .store-content .location-wrapper {
	display: block !important;
	width: 100% !important;
	text-align: left !important;
}

#ecomcine-person-listing.grid-view .store-content .store-data h2 {
	margin: 0 0 8px 0 !important;
	font-size: 16px !important;
	line-height: 1.18 !important;
	min-height: 20px !important;
	display: flex !important;
	align-items: center !important;
}

#ecomcine-person-listing.grid-view .store-content .store-data p,
#ecomcine-person-listing.grid-view .store-content .store-data span {
	font-size: 12px !important;
	margin: 0 !important;
}

#ecomcine-person-listing ul.ecomcine-person-cards li .store-footer {
	position: absolute !important;
	left: 18px !important;
	bottom: 0 !important;
	transform: translateY(50%) !important;
	z-index: 10 !important;
	height: auto !important;
	padding: 0 !important;
	background: transparent !important;
	overflow: visible !important;
}

#ecomcine-person-listing.grid-view .store-footer .seller-avatar {
	width: 80px !important;
	height: 80px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	border: 3px solid #D4AF37 !important;
	background: #000 !important;
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.3) !important;
	position: relative !important;
	top: 0 !important;
}

#ecomcine-person-listing.grid-view .store-footer .seller-avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 50% !important;
}

#ecomcine-person-listing .store-data .vendor-name-featured {
	gap: 4px !important;
}

#ecomcine-person-listing .store-data .vendor-name-featured h2 {
	margin: 0 !important;
	min-height: 20px !important;
	display: flex !important;
	align-items: center !important;
}

#ecomcine-person-listing .store-data .vendor-name-featured .vendor-name-pill {
	display: inline-flex !important;
	align-items: center !important;
	padding: 3px 10px !important;
	border-radius: 999px !important;
	background: rgba(0, 0, 0, 0.45) !important;
	line-height: 1.2 !important;
	font-size: 16px !important;
	color: #D4AF37 !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
}

#ecomcine-person-listing .store-data .vendor-name-featured .tm-card-status-row {
	display: flex !important;
	gap: 6px !important;
	align-items: center !important;
	margin-top: 2px !important;
	flex-wrap: nowrap !important;
	height: 24px !important;
	min-height: 24px !important;
}

#ecomcine-person-listing .store-data .vendor-name-featured .tm-card-status-row.tm-card-status-row--empty {
	visibility: hidden !important;
}

#ecomcine-person-listing .store-data .vendor-name-featured .tm-card-status-row .featured-label,
#ecomcine-person-listing .store-data .vendor-name-featured .tm-card-status-row .verified-label {
	position: static !important;
	margin: 0 !important;
	padding: 3px 10px !important;
	border-radius: 999px !important;
	font-size: 11px !important;
	line-height: 1 !important;
	height: 20px !important;
	min-height: 20px !important;
	display: inline-flex !important;
	align-items: center !important;
	box-shadow: none !important;
}

#ecomcine-person-listing .store-data .store-categories-wrapper,
#ecomcine-person-listing .store-data .location-wrapper {
	display: block !important;
	width: 100% !important;
	text-align: left !important;
	justify-content: flex-start !important;
	margin-top: 6px !important;
}

#ecomcine-person-listing .store-data .store-categories-wrapper .field-display,
#ecomcine-person-listing .store-data .location-wrapper .field-display {
	display: block !important;
	text-align: left !important;
	justify-content: flex-start !important;
}

#ecomcine-person-listing .store-data .store-categories-display {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	text-align: left !important;
	gap: 6px !important;
	padding: 3px 10px !important;
	border-radius: 999px !important;
	background: rgba(0, 0, 0, 0.45) !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
}

#ecomcine-person-listing .store-data .store-categories-display .tm-card-category-value {
	font-size: 12px !important;
	color: #C0C0C0 !important;
	font-style: italic !important;
	text-align: left !important;
}

#ecomcine-person-listing .store-data .location-display {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 3px 10px !important;
	border-radius: 999px !important;
	background: rgba(0, 0, 0, 0.45) !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	font-size: 12px !important;
	color: #C0C0C0 !important;
	font-style: italic !important;
	max-width: 100% !important;
}

#ecomcine-person-listing .store-data .location-display .geo-address {
	color: #C0C0C0 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	max-width: 100% !important;
}

#ecomcine-person-listing .store-data .location-display .country-flag,
#ecomcine-person-listing .store-data .location-display .country-flag img {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px !important;
	min-height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
	flex-shrink: 0 !important;
	display: inline-block !important;
	vertical-align: middle !important;
}

@media (max-width: 1180px) {
	.store-lists-other-filter-wrap {
		grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) minmax(180px, 1fr) auto auto !important;
	}
}

@media (max-width: 900px) {
	.store-lists-other-filter-wrap {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	#ecomcine-filter-actions-cell {
		grid-column: 1 / -1;
		justify-content: space-between !important;
	}

	#ecomcine-person-listing.grid-view ul.ecomcine-person-cards li.ecomcine-person-card--grid {
		width: 50% !important;
	}
}

@media (max-width: 600px) {
	.store-lists-other-filter-wrap {
		grid-template-columns: 1fr !important;
	}

	.store-lists-other-filter-wrap .featured.item,
	.store-lists-other-filter-wrap .open-now.item:not(.tm-profile-level-filter) {
		align-items: flex-start !important;
	}

	#ecomcine-filter-actions-cell {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	#ecomcine-filter-links-wrap {
		align-items: flex-start !important;
		text-align: left !important;
	}

	#ecomcine-apply-filters-btn {
		width: 100% !important;
	}

	#ecomcine-person-listing.grid-view ul.ecomcine-person-cards li.ecomcine-person-card--grid {
		width: 100% !important;
	}

	#ecomcine-person-listing .ecomcine-person-card .store-wrapper .store-header .store-banner {
		height: 210px !important;
		min-height: 210px !important;
	}

	#ecomcine-person-listing.grid-view .store-content {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	#ecomcine-person-listing.grid-view .store-content .store-data-container {
		left: 14px !important;
		right: 14px !important;
	}

	#ecomcine-person-listing ul.ecomcine-person-cards li .store-footer {
		left: 14px !important;
	}
}

/* ==========================================================================
   TM Icons — inline SVG baseline sizing.
   Mirrors how FA <i> tags behave: inline-block, 1em tall, current text fill.
   ========================================================================== */
.tm-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;   /* same optical baseline offset as FA */
    overflow: visible;
    fill: currentColor;
}

/* ============================================================================
   Category Picker — hierarchical column-browser (v0.3.9)
   ============================================================================ */

/* Modal body overrides when the categories picker is active */
.tm-field-editor-modal.is-categories-editor .editor-body {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 12px 14px 10px;
    gap: 0;
}

/* Root picker container fills the body */
.ec-cat-picker {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    gap: 4px;
}

/* Column browser — horizontal scroll, fixed height */
.ec-cat-picker__browser {
    display: flex;
    flex-direction: row;
    flex: 0 0 auto;
    height: 260px;
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

/* Individual column — vertical scroll */
.ec-cat-picker__column {
    flex: 0 0 185px;
    min-width: 160px;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
    padding: 4px 0;
}

.ec-cat-picker__column:last-child {
    flex: 1 1 auto;
    border-right: none;
}

/* Term row */
.ec-cat-picker__item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.12s;
    user-select: none;
}

.ec-cat-picker__item:hover {
    background: rgba(212, 175, 55, 0.14);
    color: #fff;
}

.ec-cat-picker__item.is-selected {
    background: rgba(212, 175, 55, 0.22);
    color: #D4AF37;
}

.ec-cat-picker__item.is-navigated {
    background: rgba(255, 255, 255, 0.07);
}

.ec-cat-picker__item.is-selected.is-navigated {
    background: rgba(212, 175, 55, 0.28);
}

/* Check mark column */
.ec-cat-picker__check {
    flex: 0 0 14px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #D4AF37;
    line-height: 1;
}

/* Term name */
.ec-cat-picker__name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

/* Children indicator arrow */
.ec-cat-picker__nav {
    flex: 0 0 12px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.3);
    line-height: 1;
}

.ec-cat-picker__item.is-navigated .ec-cat-picker__nav {
    color: #D4AF37;
}

/* Breadcrumb bar */
.ec-cat-picker__breadcrumb {
    flex: 0 0 auto;
    padding: 4px 2px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow-x: auto;
    min-height: 22px;
    line-height: 1.4;
}

.ec-cat-picker__bc-root,
.ec-cat-picker__bc-item {
    cursor: pointer;
    color: rgba(212, 175, 55, 0.8);
    transition: color 0.12s;
}

.ec-cat-picker__bc-root:hover,
.ec-cat-picker__bc-item:hover {
    color: #D4AF37;
    text-decoration: underline;
}

/* Selected chips area */
.ec-cat-picker__chips-area {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    overflow-y: auto;
}

.ec-cat-picker__chips-label {
    flex: 0 0 auto;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1;
}

.ec-cat-picker__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-content: flex-start;
}

.ec-cat-picker__no-selection {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.28);
    font-style: italic;
}

/* Individual chip */
.ec-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    padding: 3px 7px 3px 9px;
    font-size: 11px;
    color: rgba(212, 175, 55, 0.95);
    max-width: 100%;
}

.ec-cat-chip__path {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}

.ec-cat-chip__remove {
    flex: 0 0 auto;
    background: none;
    border: none;
    color: rgba(212, 175, 55, 0.55);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    transition: color 0.12s;
}

.ec-cat-chip__remove:hover {
    color: #fff;
}