/*
 * social-video-manager.css
 * Visual member-side Social Videos manager.
 * All component selectors are scoped to .svm-* / [data-svm-*].
 */

.svm-page {
	--svm-radius-lg: 22px;
	--svm-radius-md: 14px;
	--svm-gap: clamp(16px, 2vw, 24px);
	--svm-shadow: 0 14px 42px color-mix(in srgb, var(--color-shadow, #000) 15%, transparent);
	--svm-surface: var(--card-container-bg, var(--color-container-bg, #fff));
	--svm-border: var(--color-divider, var(--color-border-muted, #d8dde5));
	--svm-text: var(--color-container-text, inherit);
	--svm-muted: var(--theme-text-muted, var(--color-gray-600, #606771));
	--svm-accent: var(--color-link, var(--color-primary, #0b5ea8));
	--svm-accent-hover: var(--color-link-hover, var(--color-primary-hover, #087d50));
	width: min(1180px, calc(100% - 24px));
	margin: 20px auto 54px;
	color: var(--svm-text);
}

.svm-page *,
.svm-page *::before,
.svm-page *::after {
	box-sizing: border-box;
}

.svm-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: 190px;
	margin: 0 0 22px;
	padding: clamp(24px, 4vw, 46px);
	border: 1px solid var(--svm-border);
	border-radius: var(--svm-radius-lg);
	background: radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--svm-accent) 28%, transparent), transparent 38%), linear-gradient(145deg, color-mix(in srgb, var(--svm-surface) 86%, #000 14%), var(--svm-surface));
	box-shadow: var(--svm-shadow);
}

.svm-hero::after {
	content: "▶";
	position: absolute;
	right: clamp(22px, 5vw, 64px);
	top: 50%;
	translate: 0 -50%;
	font-size: clamp(64px, 10vw, 128px);
	line-height: 1;
	opacity: 0.08;
	pointer-events: none;
}

.svm-hero__copy {
	position: relative;
	z-index: 1;
	max-width: 760px;
}

.svm-eyebrow,
.svm-provider-summary__eyebrow,
.svm-control-panel__label {
	display: block;
	margin: 0 0 6px;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--svm-accent);
}

.svm-hero h1,
.svm-provider-summary h2,
.svm-empty-state h3,
.svm-poster-modal__dialog h2 {
	margin-top: 0;
}

.svm-hero h1 {
	margin-bottom: 10px;
	font-size: clamp(2rem, 4.5vw, 3.75rem);
	line-height: 1;
}

.svm-hero p {
	max-width: 680px;
	margin: 0;
	font-size: clamp(1rem, 1.7vw, 1.14rem);
	line-height: 1.6;
	color: var(--svm-muted);
}

.svm-control-panel,
.svm-provider-summary,
.svm-add-panel,
.svm-tip,
.svm-empty-state {
	border: 1px solid var(--svm-border);
	border-radius: var(--svm-radius-md);
	background: var(--svm-surface);
}

.svm-control-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
	gap: var(--svm-gap);
	align-items: end;
	padding: 18px 20px;
	margin: 0 0 18px;
}

.svm-control-panel__listing strong {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 1.15rem;
}

.svm-provider-form label,
.svm-add-form label,
.svm-edit-form label {
	display: block;
	margin: 0 0 7px;
	font-weight: 700;
}

.svm-provider-form select,
.svm-add-form input,
.svm-add-form textarea,
.svm-add-form select,
.svm-edit-form input,
.svm-edit-form textarea,
.svm-edit-form select {
	width: 100%;
}

.svm-platform-strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 0 0 20px;
}

.svm-platform-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 52px;
	padding: 11px 14px;
	border: 1px solid var(--svm-border);
	border-radius: 13px;
	background: var(--svm-surface);
	color: inherit;
	text-decoration: none;
	font-weight: 800;
	transition:
		transform 0.16s ease,
		border-color 0.16s ease,
		box-shadow 0.16s ease;
}

.svm-platform-link:hover,
.svm-platform-link:focus-visible {
	transform: translateY(-2px);
	border-color: var(--svm-accent);
	box-shadow: 0 8px 22px color-mix(in srgb, var(--color-shadow, #000) 11%, transparent);
}

.svm-platform-link[aria-current="page"] {
	border-color: var(--svm-accent);
	box-shadow: inset 0 0 0 1px var(--svm-accent);
}

.svm-platform-link__count {
	min-width: 30px;
	padding: 3px 8px;
	border-radius: 999px;
	text-align: center;
	background: color-mix(in srgb, var(--svm-accent) 13%, transparent);
	color: var(--svm-accent);
}

.svm-provider-summary {
	display: flex;
	justify-content: space-between;
	gap: var(--svm-gap);
	align-items: center;
	padding: 20px;
	margin: 0 0 18px;
}

.svm-provider-summary h2 {
	margin-bottom: 5px;
}

.svm-provider-summary p {
	margin: 0;
	color: var(--svm-muted);
}

.svm-preview-all,
.svm-primary-action,
.svm-secondary-action,
.svm-danger-action,
.svm-poster-button,
.svm-card .sv-edit-toggle,
.svm-card .sv-handle,
.svm-poster-modal__close {
	-webkit-tap-highlight-color: transparent;
}

.svm-preview-all,
.svm-primary-action,
.svm-secondary-action,
.svm-danger-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 9px 15px;
	border-radius: 11px;
	font: inherit;
	font-weight: 800;
	cursor: pointer;
}

.svm-preview-all,
.svm-primary-action {
	border: 1px solid var(--svm-accent);
	background: var(--svm-accent);
	color: var(--color-primary-hover-text, #fff);
}

.svm-preview-all:hover,
.svm-primary-action:hover {
	border-color: var(--svm-accent-hover);
	background: var(--svm-accent-hover);
}

.svm-secondary-action {
	border: 1px solid var(--svm-border);
	background: transparent;
	color: inherit;
}

.svm-danger-action {
	border: 1px solid var(--color-danger, #b42318);
	background: transparent;
	color: var(--color-danger, #b42318);
}

.svm-play-icon {
	font-size: 0.88em;
}

.svm-add-panel {
	margin: 0 0 18px;
	overflow: clip;
}

.svm-add-panel > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	cursor: pointer;
	font-weight: 800;
	list-style: none;
}


.svm-add-panel > summary > span {
	color: var(--color-link, var(--color-primary, #0b5ea8));
}

.svm-add-panel > summary > span:hover,
.svm-add-panel > summary > span:active{
	color: var(--color-link-hover, var(--color-primary-hover, #087d50));
}


.svm-add-panel > summary::-webkit-details-marker {
	display: none;
}

.svm-add-panel[open] > summary {
	border-bottom: 1px solid var(--svm-border);
}

.svm-add-panel__body {
	padding: 20px;
}

.svm-add-panel__body > p {
	margin-top: 0;
	color: var(--svm-muted);
}

.svm-add-form {
	display: grid;
	gap: 12px;
}

.svm-add-form .svm-primary-action {
	justify-self: start;
}

.svm-tip {
	margin: 0 0 20px;
	padding: 13px 16px;
	color: var(--svm-muted);
}

/* jQuery UI accordion + sortable rendered as cards. */
.svm-page #accordion.svm-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
	gap: var(--svm-gap);
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	list-style: none;
}

.svm-page #accordion.svm-card-grid > li.svm-card {
	align-self: start;
	min-width: 0;
	margin: 0 !important;
	padding: 0;
	border: 1px solid var(--svm-border);
	border-radius: var(--svm-radius-md);
	overflow: hidden;
	background: var(--svm-surface);
	box-shadow: 0 7px 22px color-mix(in srgb, var(--color-shadow, #000) 9%, transparent);
}

.svm-page #accordion.svm-card-grid .svm-card__header.ui-accordion-header,
.svm-page #accordion.svm-card-grid .svm-card__header {
	position: relative;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0;
	align-items: start;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--svm-surface) !important;
	color: inherit !important;
	font: inherit !important;
}

.svm-page #accordion.svm-card-grid .svm-card__header > .ui-accordion-header-icon {
	display: none !important;
}

.svm-card__poster {
	position: relative;
	grid-column: 1 / -1;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	background: #101114;
	cursor: pointer;
}

.svm-card__poster-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	background: #101114;
}

.svm-card__poster-placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 18px;
	font-size: clamp(1.15rem, 3vw, 1.6rem);
	font-weight: 900;
	color: #fff;
	background: radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--svm-accent) 55%, transparent), transparent 42%), #17191e;
}

.svm-card__poster-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, transparent 46%, rgb(0 0 0 / 0.58));
	pointer-events: none;
}

.svm-card__play {
	position: absolute;
	left: 50%;
	top: 50%;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	translate: -50% -50%;
	border: 1px solid rgb(255 255 255 / 0.62);
	border-radius: 50%;
	background: rgb(0 0 0 / 0.56);
	color: #fff;
	font-size: 22px;
	padding-left: 4px;
	box-shadow: 0 8px 26px rgb(0 0 0 / 0.3);
	transition:
		scale 0.16s ease,
		background 0.16s ease;
	pointer-events: none;
}

.svm-card__poster:hover .svm-card__play,
.svm-card__poster:focus-visible .svm-card__play {
	scale: 1.08;
	background: rgb(0 0 0 / 0.78);
}

.svm-card__poster-source {
	position: absolute;
	left: 10px;
	bottom: 9px;
	max-width: calc(100% - 20px);
	padding: 4px 8px;
	border-radius: 999px;
	background: rgb(0 0 0 / 0.66);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1.2;
	pointer-events: none;
}

.svm-card__headline {
	min-width: 0;
	padding: 14px 8px 14px 15px;
}

.svm-card__headline strong {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-height: 1.35;
}

.svm-card__order {
	display: block;
	margin-bottom: 4px;
	color: var(--svm-muted);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.svm-card__tools {
	display: flex;
	gap: 5px;
	padding: 11px 11px 0 0;
}

.svm-poster-button,
.svm-card .sv-edit-toggle,
.svm-card .sv-handle {
	display: grid !important;
	place-items: center;
	flex: 0 0 37px;
	width: 37px;
	height: 37px;
	min-width: 37px;
	min-height: 37px;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--svm-border) !important;
	border-radius: 10px !important;
	background: transparent !important;
	color: inherit !important;
	font-size: 19px !important;
	line-height: 1 !important;
	cursor: pointer;
}

.svm-poster-button:hover,
.svm-card .sv-edit-toggle:hover,
.svm-card .sv-handle:hover,
.svm-poster-button:focus-visible,
.svm-card .sv-edit-toggle:focus-visible,
.svm-card .sv-handle:focus-visible {
	border-color: var(--svm-accent) !important;
	color: var(--svm-accent) !important;
}

.svm-card .sv-handle {
	cursor: grab;
	touch-action: none;
}

.svm-card .sv-handle:active {
	cursor: grabbing;
}

.svm-page #accordion.svm-card-grid .svm-card__editor.ui-accordion-content,
.svm-page #accordion.svm-card-grid .svm-card__editor {
	grid-column: 1 / -1;
	margin: 0 !important;
	padding: 18px !important;
	border: 0 !important;
	border-top: 1px solid var(--svm-border) !important;
	border-radius: 0 !important;
	background: color-mix(in srgb, var(--svm-surface) 96%, var(--svm-accent) 4%) !important;
	color: inherit !important;
}

.svm-edit-form {
	display: grid;
	gap: 9px;
}

.svm-edit-form label:not(:first-child) {
	margin-top: 5px;
}

.svm-editor-actions,
.svm-card__danger-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.svm-editor-actions {
	margin-top: 8px;
}

.svm-card__danger-row {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--svm-border);
}

.svm-card__danger-row form {
	margin: 0;
}

.svm-empty-state {
	display: grid;
	place-items: center;
	min-height: 260px;
	padding: 42px 22px;
	text-align: center;
}

.svm-empty-state__play {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: 16px;
	border: 1px solid var(--svm-border);
	border-radius: 50%;
	color: var(--svm-accent);
	font-size: 22px;
}

.svm-empty-state p {
	max-width: 520px;
	margin: 0;
	color: var(--svm-muted);
}

.svm-page .ui-sortable-placeholder {
	min-height: 260px;
	visibility: visible !important;
	border: 2px dashed var(--svm-accent) !important;
	border-radius: var(--svm-radius-md);
	background: color-mix(in srgb, var(--svm-accent) 7%, transparent) !important;
}

/* Poster upload modal */
.svm-poster-modal[hidden] {
	display: none !important;
}

.svm-poster-modal {
	position: fixed;
	inset: 0;
	z-index: 2147482300;
	display: grid;
	place-items: center;
	padding: 18px;
}

.svm-poster-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 0.72);
	backdrop-filter: blur(5px);
}

.svm-poster-modal__dialog {
	position: relative;
	z-index: 1;
	width: min(620px, 100%);
	max-height: min(760px, calc(100dvh - 36px));
	overflow: auto;
	padding: clamp(20px, 4vw, 30px);
	border: 1px solid var(--svm-border);
	border-radius: 20px;
	background: var(--svm-surface);
	color: var(--svm-text);
	box-shadow: 0 26px 80px rgb(0 0 0 / 0.45);
}

.svm-poster-modal__dialog > p {
	color: var(--svm-muted);
	line-height: 1.5;
}

.svm-poster-modal__close {
	position: absolute;
	right: 12px;
	top: 12px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--svm-border);
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 26px;
	cursor: pointer;
}

.svm-poster-dropzone {
	display: grid;
	place-items: center;
	gap: 7px;
	min-height: 180px;
	margin-top: 18px;
	padding: 22px;
	border: 2px dashed var(--svm-border);
	border-radius: 15px;
	text-align: center;
	cursor: pointer;
}

.svm-poster-dropzone:hover,
.svm-poster-dropzone:focus-within {
	border-color: var(--svm-accent);
}

.svm-poster-dropzone input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.svm-poster-dropzone__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--svm-accent) 12%, transparent);
	color: var(--svm-accent);
	font-size: 28px;
}

.svm-poster-preview {
	margin-top: 16px;
	padding: 10px;
	border: 1px solid var(--svm-border);
	border-radius: 14px;
	background: #101114;
	text-align: center;
}

.svm-poster-preview img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: min(46dvh, 430px);
	margin: auto;
	object-fit: contain;
}

.svm-poster-status {
	min-height: 1.5em;
	margin-top: 12px;
	color: var(--svm-muted);
	font-weight: 700;
}

.svm-poster-status[data-state="error"] {
	color: var(--color-danger, #b42318);
}

.svm-poster-status[data-state="success"] {
	color: var(--color-edit-link-green, #087d50);
}

.svm-poster-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 14px;
}

body.svm-modal-open {
	overflow: hidden !important;
}

@media (max-width: 760px) {
	.svm-page {
		width: min(100% - 16px, 1180px);
		margin-top: 10px;
	}

	.svm-hero {
		min-height: 160px;
		padding: 24px 20px;
	}

	.svm-control-panel {
		grid-template-columns: 1fr;
	}

	.svm-platform-strip {
		grid-template-columns: 1fr;
	}

	.svm-provider-summary {
		align-items: stretch;
		flex-direction: column;
	}

	.svm-preview-all {
		width: 100%;
	}

	.svm-page #accordion.svm-card-grid {
		grid-template-columns: 1fr;
	}

	.svm-card__tools {
		gap: 4px;
	}

	.svm-poster-modal {
		padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
	}

	.svm-poster-modal__dialog {
		max-height: calc(100dvh - 16px);
		border-radius: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.svm-page *,
	.svm-page *::before,
	.svm-page *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

.svm-card__poster:disabled {
	cursor: default;
}
.svm-card__poster:disabled .svm-card__play {
	opacity: 0.38;
}

/* Native drag-and-drop feedback for the poster uploader. */
.svm-poster-dropzone.is-dragover {
	border-color: var(--svm-accent);
	background: color-mix(in srgb, var(--svm-accent) 9%, transparent);
	outline: 3px solid color-mix(in srgb, var(--svm-accent) 18%, transparent);
	outline-offset: 3px;
}