/* ── Video Bubble Block ─────────────────────────────────────────── */

.ec-bubble {
	position:      absolute;
	width:         var(--ecb-size, 100px);
	height:        var(--ecb-size, 100px);
	border-radius: 50%;
	overflow:      hidden;
	cursor:        pointer;
	z-index:       100;
	transition:    all 0.5s ease-out;
	box-shadow:
		0 4px 20px rgba(0,0,0,0.6),
		0 0 0 3px rgba(255,255,255,0.6),
		0 0 25px rgba(255,255,255,0.4);
}

.ec-bubble:hover {
	box-shadow:
		0 6px 25px rgba(0,0,0,0.7),
		0 0 0 3px rgba(255,255,255,0.9),
		0 0 35px rgba(255,255,255,0.6);
	transform: scale(1.05);
}

.ec-bubble__poster {
	position:        absolute;
	inset:           0;
	background-size:     cover;
	background-position: center;
	background-repeat:   no-repeat;
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      opacity 0.3s;
}

.ec-bubble__play {
	width:           28px;
	height:          28px;
	background:      rgba(0,0,0,0.5);
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.ec-bubble__play::after {
	content:       '';
	border-style:  solid;
	border-width:  6px 0 6px 12px;
	border-color:  transparent transparent transparent white;
	margin-left:   3px;
}

.ec-bubble__iframe {
	position:       absolute;
	inset:          0;
	width:          100%;
	height:         100%;
	border:         none;
	opacity:        0;
	transition:     opacity 0.3s;
	pointer-events: none;
}

.ec-bubble__close {
	display:    none;
	position:   absolute;
	top:        8px;
	right:      8px;
	width:      26px;
	height:     26px;
	z-index:    10;
	cursor:     pointer;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='20.9787' height='21' rx='10.4893' stroke='white'/%3E%3Cpath d='M13.9922 8L7.99219 14M7.99219 8L13.9922 14' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/100%;
}

/* Expanded / active state — size driven by PHP via CSS custom properties */
.ec-bubble.is-active {
	width:               var(--ecb-expanded-w, 560px);
	height:              var(--ecb-expanded-h, 400px);
	border-radius:       16px;
	cursor:              default;
	transition-duration: 0.3s;
}

.ec-bubble.is-active .ec-bubble__poster  { opacity: 0; pointer-events: none; }
.ec-bubble.is-active .ec-bubble__iframe  { opacity: 1; pointer-events: auto; }
.ec-bubble.is-active .ec-bubble__close   { display: block; }

/* ── Editor preview ─────────────────────────────────────────────── */

.wc-video-bubble-preview {
	padding:         16px;
	display:         flex;
	flex-direction:  column;
	align-items:     flex-start;
	gap:             8px;
}

.wc-video-bubble-preview__empty {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             4px;
	padding:         24px 32px;
	border:          2px dashed #ccc;
	border-radius:   8px;
	color:           #888;
	text-align:      center;
}

.wc-video-bubble-preview__empty .dashicons {
	font-size: 32px;
	width:     32px;
	height:    32px;
	color:     #aaa;
}