/* DS Video Embed — base + skins
   Structure per instance:
   .dsve.dsve-skin-{slug}
     .dsve-frame
       .dsve-media (button, background-image = thumbnail)
         .dsve-deco-a / .dsve-deco-b  (skin-specific decoration, e.g. cassette reels)
         .dsve-spindle                (skin-specific, e.g. vinyl center)
         .dsve-play                   (play icon, always present)
     .dsve-caption
*/

.dsve {
	width: 100%;
	max-width: var(--dsve-max-width, 560px);
	margin-left: auto;
	margin-right: auto;
}
.dsve * { box-sizing: border-box; }

/*
 * Elementor 4.x's "atomic" flexbox layout gives new widgets the class
 * elementor-widget__width-initial by default, which shrink-fits the
 * widget's container to its content instead of letting it fill the
 * available space. Since the "content" here is an unstyled button
 * before any of the above sizing applies, the whole widget collapses
 * to a tiny box and no max-width on .dsve itself can widen a parent
 * that's actively fighting to stay small. Force our own widget wrapper
 * to fill its row regardless of that default; this only targets our
 * own widget class, not Elementor's behaviour generally.
 */
.elementor-widget-ds_video_embed.elementor-widget__width-initial,
.elementor-widget-ds_video_embed .elementor-widget-container {
	width: 100% !important;
	flex: 1 1 auto !important;
}

.dsve-media {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background-color: #17161a;
	background-size: cover;
	background-position: center;
	cursor: pointer;
	appearance: none;
}
.dsve-media:focus-visible {
	outline: 3px solid #4fd8bc;
	outline-offset: 2px;
}

.dsve-deco-a,
.dsve-deco-b,
.dsve-spindle { display: none; position: absolute; }

.dsve-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(10, 8, 10, 0.55);
	border: 2px solid rgba(255,255,255,0.7);
	transition: transform 0.2s ease;
	z-index: 2;
}
.dsve-media:hover .dsve-play,
.dsve-media:focus-visible .dsve-play { transform: translate(-50%, -50%) scale(1.08); }
.dsve-play svg polygon { fill: #f2ede3; }

/* Loaded state: iframe inserted inside .dsve-media, inheriting its exact
   per-skin box (including non-full-bleed skins like Cassette/Scroll where
   the media area is smaller than the frame). */
.dsve-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	z-index: 2;
	pointer-events: auto;
}
.dsve.is-loaded .dsve-media {
	cursor: default;
	pointer-events: none;
}
.dsve.is-loaded .dsve-play {
	display: none;
}

.dsve-caption {
	margin-top: 12px;
	font-size: 13px;
	line-height: 1.4;
}

/* =======================================================
   DSM — Darkwave (etched frame, jagged bottom corner)
======================================================= */
.dsve-skin-darkwave .dsve-frame {
	position: relative;
	aspect-ratio: 16/9;
	border: 2px solid #5c1830;
	box-shadow: 0 0 0 1px #1a0810, inset 0 0 40px rgba(140,20,50,0.15), 0 10px 30px rgba(0,0,0,0.6);
	clip-path: polygon(0 0, 100% 0, 100% 94%, 96% 100%, 0 100%);
	overflow: hidden;
}
.dsve-skin-darkwave .dsve-media { width: 100%; height: 100%; }
.dsve-skin-darkwave .dsve-play {
	width: 72px; height: 72px;
	border: 2px solid #b3345c;
	box-shadow: 0 0 24px rgba(179,52,92,0.5);
}
.dsve-skin-darkwave .dsve-caption {
	font-family: Georgia, 'Times New Roman', serif;
	letter-spacing: 0.04em;
	color: #e8c8d4;
}

/* =======================================================
   DSM — Post-Punk / EBM (torn poster diagonal cut)
======================================================= */
.dsve-skin-postpunk .dsve-frame {
	position: relative;
	aspect-ratio: 16/9;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%, 0 78%);
	overflow: hidden;
}
.dsve-skin-postpunk .dsve-media { width: 100%; height: 100%; }
.dsve-skin-postpunk .dsve-play {
	width: 0; height: 0;
	background: transparent;
	border: 0;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 24px solid #e8e4de;
	border-radius: 0;
	top: 42%; left: 46%;
}
.dsve-skin-postpunk .dsve-play svg { display: none; }
.dsve-skin-postpunk .dsve-caption {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 12px;
	border-left: 3px solid #e8e4de;
	padding-left: 10px;
}

/* =======================================================
   DSM — Vinyl (spinning record, square crop)
======================================================= */
.dsve-skin-vinyl .dsve-frame {
	position: relative;
	aspect-ratio: 1/1;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 12px 40px rgba(0,0,0,0.7), inset 0 0 0 2px #4a1428;
}
.dsve-skin-vinyl .dsve-media {
	width: 100%; height: 100%;
	border-radius: 50%;
	filter: saturate(0.85) brightness(0.55);
}
.dsve-skin-vinyl.is-loaded .dsve-media {
	filter: none;
}
.dsve-skin-vinyl .dsve-media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: repeating-radial-gradient(circle at center, rgba(0,0,0,0.5) 0px, rgba(0,0,0,0.5) 1px, transparent 1px, transparent 6px);
	pointer-events: none;
}
.dsve-skin-vinyl .dsve-deco-a {
	display: block;
	top: 50%; left: 50%;
	width: 42%; height: 42%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #7a1f3c, #4a1024);
	box-shadow: 0 0 0 2px #1a0810, 0 4px 16px rgba(0,0,0,0.5);
	z-index: 3;
}
.dsve-skin-vinyl .dsve-spindle {
	display: block;
	top: 50%; left: 50%;
	width: 10px; height: 10px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #150a0f;
	box-shadow: 0 0 0 2px #1a0810;
	z-index: 3;
}
.dsve-skin-vinyl .dsve-play { width: 40px; height: 40px; background: transparent; border: 0; z-index: 2; }
.dsve-skin-vinyl .dsve-caption {
	text-align: center;
	font-family: Georgia, serif;
	letter-spacing: 0.04em;
	color: #d8a8bc;
}
/* Vinyl embeds a full-size iframe behind the circular mask when loaded */
.dsve-skin-vinyl.is-loaded .dsve-frame { border-radius: 50%; }

/* =======================================================
   DSM — Cassette (industrial, reel deck)
======================================================= */
.dsve-skin-cassette .dsve-frame {
	position: relative;
	aspect-ratio: 16/10;
	background: #1c1a1e;
	border: 2px solid #3a373f;
	border-radius: 6px;
	overflow: hidden;
}
.dsve-skin-cassette .dsve-media {
	position: absolute;
	inset: 8% 6% 30% 6%;
	width: auto; height: auto;
	border-radius: 3px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.dsve-skin-cassette .dsve-deco-a,
.dsve-skin-cassette .dsve-deco-b {
	display: block;
	bottom: 12%;
	width: 15%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, #0c0b0e 32%, #46424c 34%, #46424c 38%, #1c1a1e 40%);
	z-index: 3;
}
.dsve-skin-cassette .dsve-deco-a { left: 22%; }
.dsve-skin-cassette .dsve-deco-b { right: 22%; }
.dsve-skin-cassette .dsve-play {
	width: 46px; height: 46px;
	top: 34%;
	background: rgba(20,18,22,0.7);
	border: 1px solid #6b6672;
}
.dsve-skin-cassette .dsve-caption {
	text-align: center;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #9a95a0;
}
.dsve-skin-cassette.is-loaded .dsve-media { inset: 0; }

/* =======================================================
   DSM — Hexagon (synth/industrial)
======================================================= */
.dsve-skin-hexagon .dsve-frame {
	position: relative;
	aspect-ratio: 1/0.92;
	clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
	overflow: hidden;
}
.dsve-skin-hexagon .dsve-media { width: 100%; height: 100%; }
.dsve-skin-hexagon .dsve-play {
	width: 58px; height: 58px;
	border: 2px solid #4fd8bc;
	background: rgba(10,20,18,0.5);
	box-shadow: 0 0 20px rgba(79,216,188,0.4);
}
.dsve-skin-hexagon .dsve-play svg polygon { fill: #bdf5e8; }
.dsve-skin-hexagon .dsve-caption {
	text-align: center;
	font-family: Georgia, serif;
	letter-spacing: 0.06em;
	font-size: 12px;
	color: #7fd8c4;
}

/* =======================================================
   Spiritual Way — Arched Window
======================================================= */
.dsve-skin-sw-arch .dsve-frame {
	position: relative;
	aspect-ratio: 4/5;
	border-radius: 140px 140px 12px 12px;
	overflow: hidden;
	border: 4px solid #f4ead2;
	box-shadow: 0 10px 32px rgba(80,60,30,0.28);
}
.dsve-skin-sw-arch .dsve-media { width: 100%; height: 100%; }
.dsve-skin-sw-arch .dsve-play {
	width: 62px; height: 62px;
	background: rgba(255,250,240,0.92);
	border: 0;
}
.dsve-skin-sw-arch .dsve-play svg polygon { fill: #7a5a2e; }
.dsve-skin-sw-arch .dsve-caption {
	text-align: center;
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 15px;
	color: #a68a5f;
}

/* =======================================================
   Spiritual Way — Letterbox (cinematic, floating caption)
======================================================= */
.dsve-skin-sw-letterbox .dsve-frame {
	position: relative;
	aspect-ratio: 21/9;
	border-radius: 4px;
	overflow: hidden;
}
.dsve-skin-sw-letterbox .dsve-media { width: 100%; height: 100%; }
.dsve-skin-sw-letterbox .dsve-play {
	width: 52px; height: 52px;
	border: 1px solid rgba(255,255,255,0.6);
	background: rgba(255,255,255,0.08);
}
.dsve-skin-sw-letterbox .dsve-caption {
	margin: 12px auto 0;
	width: fit-content;
	padding: 6px 18px;
	border-radius: 100px;
	background: #1c1a28;
	border: 1px solid #35324a;
	font-size: 12px;
	color: #cfc9e0;
	text-align: center;
}

/* =======================================================
   Spiritual Way — Polaroid
======================================================= */
.dsve-skin-sw-polaroid .dsve-frame {
	background: #fdfaf2;
	padding: 14px 14px 44px;
	box-shadow: 0 10px 26px rgba(60,45,20,0.3);
	transform: rotate(-1.5deg);
}
.dsve-skin-sw-polaroid .dsve-media {
	position: relative;
	width: 100%;
	aspect-ratio: 1/1;
}
.dsve-skin-sw-polaroid .dsve-play {
	width: 54px; height: 54px;
	background: rgba(255,250,240,0.9);
	border: 0;
}
.dsve-skin-sw-polaroid .dsve-play svg polygon { fill: #7a5a2e; }
.dsve-skin-sw-polaroid .dsve-caption {
	text-align: center;
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 14px;
	color: #6b5636;
}

/* =======================================================
   Spiritual Way — Scripture Scroll (parchment, wooden rods)
======================================================= */
.dsve-skin-sw-scroll .dsve-frame {
	position: relative;
	aspect-ratio: 3/2;
	overflow: visible;
	margin: 14px 0;
}
.dsve-skin-sw-scroll .dsve-media {
	width: 100%; height: 100%;
	filter: sepia(0.35) brightness(0.92);
	border-radius: 2px;
}
.dsve-skin-sw-scroll.is-loaded .dsve-media {
	filter: none;
}
.dsve-skin-sw-scroll .dsve-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(80,60,20,0.18), transparent 18%, transparent 82%, rgba(80,60,20,0.18));
	pointer-events: none;
}
.dsve-skin-sw-scroll .dsve-deco-a,
.dsve-skin-sw-scroll .dsve-deco-b {
	display: block;
	left: -14px; right: -14px;
	height: 20px;
	border-radius: 10px;
	background: linear-gradient(180deg, #b98a4a, #7c5a2c 55%, #5c4020);
	box-shadow: 0 2px 6px rgba(0,0,0,0.4);
	z-index: 3;
}
.dsve-skin-sw-scroll .dsve-deco-a { top: -10px; }
.dsve-skin-sw-scroll .dsve-deco-b { bottom: -10px; }
.dsve-skin-sw-scroll .dsve-play {
	width: 56px; height: 56px;
	background: rgba(40,28,10,0.55);
	border: 1px solid rgba(255,240,210,0.6);
}
.dsve-skin-sw-scroll .dsve-caption {
	text-align: center;
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 14px;
	color: #b9945f;
	margin-top: 20px;
}

/* =======================================================
   Spiritual Way — Halo (circular, soft golden glow)
======================================================= */
.dsve-skin-sw-halo .dsve-frame {
	position: relative;
	aspect-ratio: 1/1;
	overflow: visible;
}
.dsve-skin-sw-halo .dsve-deco-a {
	display: block;
	inset: -14%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,224,150,0.5) 0%, rgba(255,224,150,0.15) 55%, transparent 75%);
	filter: blur(2px);
	z-index: 0;
}
.dsve-skin-sw-halo .dsve-media {
	position: relative;
	width: 100%; height: 100%;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 0 3px rgba(255,250,235,0.85), 0 8px 30px rgba(120,90,30,0.35);
	z-index: 1;
}
.dsve-skin-sw-halo .dsve-play {
	width: 56px; height: 56px;
	background: rgba(255,250,240,0.88);
	border: 0;
}
.dsve-skin-sw-halo .dsve-play svg polygon { fill: #8a6a30; }
.dsve-skin-sw-halo .dsve-caption {
	text-align: center;
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 14px;
	color: #d9c090;
}

/* =======================================================
   Spiritual Way — Mosaic (stained-glass jewel-tone border)
======================================================= */
.dsve-skin-sw-mosaic .dsve-frame {
	position: relative;
	aspect-ratio: 16/9;
	padding: 8px;
	background: conic-gradient(from 45deg, #6a2e8f, #2e5f9c, #1f8f6b, #c9a13a, #b3345c, #6a2e8f);
	clip-path: polygon(4% 0, 96% 0, 100% 10%, 100% 90%, 96% 100%, 4% 100%, 0 90%, 0 10%);
}
.dsve-skin-sw-mosaic .dsve-media {
	width: 100%; height: 100%;
	clip-path: polygon(4% 0, 96% 0, 100% 10%, 100% 90%, 96% 100%, 4% 100%, 0 90%, 0 10%);
}
.dsve-skin-sw-mosaic .dsve-play {
	width: 60px; height: 60px;
	background: rgba(10,10,14,0.5);
	border: 2px solid rgba(255,255,255,0.85);
}
.dsve-skin-sw-mosaic .dsve-caption {
	text-align: center;
	font-family: Georgia, serif;
	letter-spacing: 0.03em;
	font-size: 13px;
	color: #cbb9e0;
}

/* =======================================================
   Spiritual Way — Candlelight (tall, warm vignette)
======================================================= */
.dsve-skin-sw-candlelight .dsve-frame {
	position: relative;
	aspect-ratio: 2/3;
	border-radius: 6px;
	overflow: hidden;
}
.dsve-skin-sw-candlelight .dsve-media { width: 100%; height: 100%; }
.dsve-skin-sw-candlelight .dsve-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 100%, rgba(255,170,70,0.28) 0%, transparent 55%),
		linear-gradient(rgba(10,6,2,0.15), rgba(10,6,2,0.55));
	pointer-events: none;
}
.dsve-skin-sw-candlelight .dsve-deco-a {
	display: block;
	bottom: 6%;
	left: 50%;
	width: 46px; height: 46px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,190,90,0.6), transparent 70%);
	filter: blur(3px);
	z-index: 1;
}
.dsve-skin-sw-candlelight .dsve-play {
	width: 54px; height: 54px;
	background: rgba(30,16,4,0.5);
	border: 1px solid rgba(255,210,140,0.75);
	z-index: 2;
}
.dsve-skin-sw-candlelight .dsve-caption {
	text-align: center;
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 14px;
	color: #e0b878;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.dsve-media, .dsve-play { transition: none !important; }
}