/**
 * Muslim Kidz Product Videos — floating player + popup.
 *
 * Brand: Huda the owl mascot palette
 *   Crimson  #C4193D   — brand red, primary actions
 *   Gold     #FFC107   — Huda's gold, buy buttons, active dots
 *   Cream    #FFF3E0   — warm background, text on dark
 *   Maroon   #6D0F1E   — deep maroon, text on cream
 *   Maroon shadow rgba(109,15,30,…)
 *
 * Font: Baloo 2 (display) + system-ui (body) — loaded by theme,
 * falls back gracefully if plugin is used standalone.
 */

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */

.mkpv-root {
	--mkpv-red:    var(--mk-coral,    #C4193D);
	--mkpv-red-d:  var(--mk-coral-dark, #A01430);
	--mkpv-gold:   var(--mk-yellow,   #FFC107);
	--mkpv-gold-l: var(--mk-yellow-light, #FFF6E0);
	--mkpv-cream:  var(--mk-primary,  #FFF3E0);
	--mkpv-maroon: var(--mk-secondary, #6D0F1E);
	--mkpv-r:      var(--mk-radius,   20px);
	--mkpv-r-sm:   var(--mk-radius-sm, 12px);
	--mkpv-r-pill: 999px;
	--mkpv-sh:     0 8px 28px rgba(109,15,30,.22);
	--mkpv-font:   'Baloo 2', system-ui, sans-serif;
}

/* ------------------------------------------------------------------ */
/* Floating player                                                     */
/* ------------------------------------------------------------------ */

.mkpv-float {
	position: fixed;
	right: 16px;
	bottom: 84px;
	z-index: 9998;
	width: 158px;
	height: auto;
	aspect-ratio: 9 / 16;
	border-radius: var(--mkpv-r);
	overflow: hidden;
	background: #000;
	/* Warm maroon shadow + thick cream border — playful, not corporate */
	box-shadow: var(--mkpv-sh);
	border: 3px solid var(--mkpv-cream);
	cursor: pointer;
	opacity: 0;
	transform: translateY(14px) scale(.94);
	transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .3, 1);
}

.mkpv-float.is-in {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.mkpv-float.is-hidden {
	display: none;
}

.mkpv-float:hover {
	border-color: var(--mkpv-gold);
	transform: scale(1.03);
}

.mkpv-float:focus-visible {
	outline: 3px solid var(--mkpv-gold);
	outline-offset: 3px;
}

.mkpv-float__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Badge — crimson pill, Baloo 2, friendly */
.mkpv-float__badge {
	position: absolute;
	left: 8px;
	bottom: 8px;
	padding: 4px 10px;
	font-family: var(--mkpv-font);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--mkpv-cream);
	background: var(--mkpv-red);
	border-radius: var(--mkpv-r-pill);
	pointer-events: none;
	max-width: calc(100% - 60px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mkpv-float__close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(109,15,30,.6);
	cursor: pointer;
	transition: background .2s ease;
}

.mkpv-float__close:hover {
	background: rgba(109,15,30,.9);
}

.mkpv-float__close svg {
	width: 14px;
	height: 14px;
	stroke: var(--mkpv-cream);
	stroke-width: 2.5;
	stroke-linecap: round;
	fill: none;
}

/* ------------------------------------------------------------------ */
/* Minimised pill — Huda-red circle                                    */
/* ------------------------------------------------------------------ */

.mkpv-pill {
	position: fixed;
	right: 16px;
	bottom: 84px;
	z-index: 9998;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 3px solid var(--mkpv-cream);
	border-radius: 50%;
	background: var(--mkpv-red);
	box-shadow: 0 6px 20px rgba(109,15,30,.35);
	cursor: pointer;
	animation: mkpv-pop .35s cubic-bezier(.2, .8, .3, 1);
	transition: transform .15s ease, background .15s ease;
}

.mkpv-pill:hover {
	background: var(--mkpv-red-d);
	transform: scale(1.08);
}

.mkpv-pill svg {
	width: 22px;
	height: 22px;
	fill: var(--mkpv-gold);
	margin-left: 2px;
}

@keyframes mkpv-pop {
	from { opacity: 0; transform: scale(.7); }
	to   { opacity: 1; transform: scale(1); }
}

/* ------------------------------------------------------------------ */
/* Popup modal                                                         */
/* ------------------------------------------------------------------ */

.mkpv-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 20px;
}

.mkpv-modal__overlay {
	position: absolute;
	inset: 0;
	/* Warm maroon overlay instead of cold black — on-brand */
	background: rgba(74, 16, 24, .9);
	backdrop-filter: blur(4px);
	animation: mkpv-fade .25s ease;
}

@keyframes mkpv-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.mkpv-modal__inner {
	position: relative;
	z-index: 1;
	width: auto;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	animation: mkpv-rise .3s cubic-bezier(.2, .8, .3, 1);
}

@keyframes mkpv-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

.mkpv-modal__stage {
	position: relative;
	width: auto;
	max-width: 100%;
	/* Rounded corners — matches the theme's playful radius */
	border-radius: var(--mkpv-r);
	overflow: hidden;
	background: #000;
	box-shadow: 0 20px 56px rgba(109,15,30,.5);
	/* Gold accent border on the popup */
	border: 3px solid var(--mkpv-gold);
}

.mkpv-modal__mount {
	position: relative;
	inset: auto;
	height: min(62vh, 620px);
	width: auto;
	max-width: 100%;
	max-height: none;
	aspect-ratio: 9 / 16;
	background: #000;
}

.mkpv-modal__mount video,
.mkpv-modal__mount .mkpv-embed,
.mkpv-modal__mount > * {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

.mkpv-modal__mount video {
	object-fit: contain;
}

/* Title + caption — Baloo 2, cream */
.mkpv-modal__title,
.mkpv-modal__caption {
	margin: 0;
	font-family: var(--mkpv-font);
	font-weight: 700;
	color: var(--mkpv-cream);
	font-size: 15px;
	line-height: 1.4;
	text-align: center;
}

.mkpv-modal__close {
	position: absolute;
	top: -50px;
	right: 0;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 2px solid rgba(255,255,255,.3);
	border-radius: 50%;
	background: rgba(109,15,30,.6);
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
}

.mkpv-modal__close:hover {
	background: var(--mkpv-red);
	border-color: var(--mkpv-cream);
}

.mkpv-modal__close svg {
	width: 18px;
	height: 18px;
	stroke: var(--mkpv-cream);
	stroke-width: 2.5;
	stroke-linecap: round;
	fill: none;
}

body.mkpv-modal-open {
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Gallery navigation                                                  */
/* ------------------------------------------------------------------ */

.mkpv-float__count {
	position: absolute;
	top: 6px;
	left: 6px;
	padding: 2px 8px;
	font-family: var(--mkpv-font);
	font-size: 10px;
	font-weight: 700;
	color: var(--mkpv-cream);
	background: rgba(109,15,30,.75);
	border-radius: var(--mkpv-r-pill);
	pointer-events: none;
}

.mkpv-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(109,15,30,.55);
	cursor: pointer;
	transition: background .2s ease;
}

.mkpv-nav:hover {
	background: var(--mkpv-red);
}

.mkpv-nav--prev { left: 10px; }
.mkpv-nav--next { right: 10px; }

.mkpv-nav svg {
	width: 20px;
	height: 20px;
	stroke: var(--mkpv-cream);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

/* Dots — gold when active */
.mkpv-dots {
	display: flex;
	gap: 8px;
	justify-content: center;
}

.mkpv-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.35);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.mkpv-dot.is-active {
	background: var(--mkpv-gold);
	transform: scale(1.3);
}

/* ------------------------------------------------------------------ */
/* Video commerce — hotspots + buy bar                                 */
/* ------------------------------------------------------------------ */

.mkpv-spots {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
}

.mkpv-spot-marker {
	position: absolute;
	transform: translate(-50%, -50%);
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

.mkpv-spot-marker[hidden] { display: none; }

/* Gold pulsing dot */
.mkpv-spot-marker__dot {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	border-radius: 50%;
	background: var(--mkpv-gold);
	box-shadow: 0 0 0 4px rgba(255,193,7,.3);
	animation: mkpv-pulse 2s ease-out infinite;
}

@keyframes mkpv-pulse {
	0%   { box-shadow: 0 0 0 3px rgba(255,193,7,.5); }
	70%  { box-shadow: 0 0 0 12px rgba(255,193,7,0); }
	100% { box-shadow: 0 0 0 3px rgba(255,193,7,0); }
}

.mkpv-spot-marker.is-added .mkpv-spot-marker__dot {
	background: #5FBE8C;
	animation: none;
}

.mkpv-spot-marker__card {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 190px;
	padding: 6px 10px 6px 6px;
	border-radius: var(--mkpv-r-pill);
	background: rgba(255,243,224,.97);
	box-shadow: 0 4px 14px rgba(109,15,30,.28);
	border: 1.5px solid var(--mkpv-gold);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}

.mkpv-spot-marker:hover .mkpv-spot-marker__card,
.mkpv-spot-marker:focus-visible .mkpv-spot-marker__card {
	opacity: 1;
	transform: translateX(0);
}

.mkpv-spot-marker__card img {
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	object-fit: cover;
	border-radius: 50%;
}

.mkpv-spot-marker__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
	text-align: left;
}

.mkpv-spot-marker__name {
	font-family: var(--mkpv-font);
	font-size: 12px;
	font-weight: 700;
	color: var(--mkpv-maroon);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mkpv-spot-marker__price {
	font-size: 11px;
	color: var(--mkpv-red);
	font-weight: 600;
}

/* Buy bar — gold button, cream text links */
.mkpv-buy {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.mkpv-buy__btn {
	flex: 1 1 auto;
	max-width: 320px;
	padding: 13px 20px;
	border: 0;
	border-radius: var(--mkpv-r-pill);
	background: var(--mkpv-gold);
	color: var(--mkpv-maroon);
	font-family: var(--mkpv-font);
	font-size: 16px;
	font-weight: 800;
	cursor: pointer;
	transition: filter .2s ease, transform .15s ease;
}

.mkpv-buy__btn:hover:not(:disabled) {
	filter: brightness(1.08);
	transform: translateY(-2px);
}

.mkpv-buy__btn:disabled {
	opacity: .7;
	cursor: default;
}

.mkpv-buy__cart {
	color: var(--mkpv-cream);
	font-family: var(--mkpv-font);
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	white-space: nowrap;
}

.mkpv-buy__cart[hidden] { display: none; }

/* Offer bar — gold tinted */
.mkpv-offerbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	padding: 8px 16px;
	border-radius: var(--mkpv-r-pill);
	background: rgba(255,193,7,.18);
	border: 1.5px solid rgba(255,193,7,.55);
}

.mkpv-offerbar[hidden] { display: none; }

.mkpv-offerbar__text {
	color: var(--mkpv-gold);
	font-family: var(--mkpv-font);
	font-size: 13px;
	font-weight: 700;
}

.mkpv-offerbar__timer {
	font-variant-numeric: tabular-nums;
	color: #fff;
	font-size: 13px;
	font-weight: 800;
}

.mkpv-offerbar__btn {
	padding: 5px 14px;
	border: 0;
	border-radius: var(--mkpv-r-pill);
	background: var(--mkpv-gold);
	color: var(--mkpv-maroon);
	font-family: var(--mkpv-font);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.mkpv-offerbar__btn[hidden] { display: none; }

/* Related products strip */
.mkpv-related[hidden] { display: none; }

.mkpv-related {
	width: 100%;
}

.mkpv-related__title {
	margin: 0 0 8px;
	font-family: var(--mkpv-font);
	font-weight: 700;
	color: var(--mkpv-cream);
	font-size: 13px;
	text-align: center;
}

.mkpv-related__strip {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: thin;
}

.mkpv-card {
	flex: 0 0 132px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px;
	border-radius: var(--mkpv-r-sm);
	background: var(--mkpv-cream);
	border: 1.5px solid rgba(255,193,7,.4);
}

.mkpv-card img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

.mkpv-card__name {
	font-family: var(--mkpv-font);
	font-size: 12px;
	font-weight: 700;
	color: var(--mkpv-maroon);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mkpv-card__price {
	font-size: 12px;
	color: var(--mkpv-red);
	font-weight: 600;
}

.mkpv-card__btn {
	margin-top: 2px;
	padding: 6px 8px;
	border: 0;
	border-radius: var(--mkpv-r-pill);
	background: var(--mkpv-red);
	color: var(--mkpv-cream);
	font-family: var(--mkpv-font);
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease;
}

.mkpv-card__btn:hover {
	background: var(--mkpv-red-d);
}

/* ------------------------------------------------------------------ */
/* Mount points + embed helpers                                        */
/* ------------------------------------------------------------------ */

.mkpv-float__mount,
.mkpv-modal__mount {
	position: absolute;
	inset: 0;
}

.mkpv-modal__mount {
	position: relative;
	inset: auto;
}

.mkpv-float__mount > *,
.mkpv-modal__mount > * {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

.mkpv-float__mount video {
	object-fit: cover;
	background: #000;
}

.mkpv-float__poster,
.mkpv-float__facade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

.mkpv-float__poster[hidden],
.mkpv-float__facade[hidden] { display: none; }

.mkpv-float__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(196,25,61,.82);
	border: 2px solid var(--mkpv-cream);
	pointer-events: none;
	transition: transform .2s ease;
}

.mkpv-float__play[hidden] { display: none; }

.mkpv-float:hover .mkpv-float__play {
	transform: translate(-50%, -50%) scale(1.12);
}

.mkpv-float__play svg {
	width: 18px;
	height: 18px;
	fill: var(--mkpv-gold);
	margin-left: 2px;
}

.mkpv-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 9 / 16;
	max-height: 74vh;
	background: #000;
}

.mkpv-embed[hidden] { display: none; }

.mkpv-embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.mkpv-modal__stage video[hidden] { display: none; }

.mkpv-video {
	width: 100%;
	height: 100%;
	display: block;
	background: #000;
}

/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* ------------------------------------------------------------------ */

@media (max-width: 1023px) {
	.mkpv-float {
		width: 120px;
		height: auto;
		aspect-ratio: 9 / 16;
		right: 12px;
		bottom: 130px;
	}

	.mkpv-pill {
		right: 12px;
		bottom: 130px;
	}

	.mkpv-modal {
		padding: 16px;
	}

	.mkpv-modal__mount {
		height: min(58vh, 540px);
	}

	.mkpv-modal__close {
		top: -48px;
	}

	.mkpv-nav {
		width: 34px;
		height: 34px;
	}

	.mkpv-nav--prev { left: 6px; }
	.mkpv-nav--next { right: 6px; }

	.mkpv-spot-marker__card {
		max-width: 150px;
	}

	.mkpv-buy__btn {
		font-size: 15px;
		padding: 12px 16px;
	}
}

/* ------------------------------------------------------------------ */
/* Hidden must actually hide                                           */
/* ------------------------------------------------------------------ */

.mkpv-root[hidden],
.mkpv-root [hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                      */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.mkpv-float,
	.mkpv-pill,
	.mkpv-modal__overlay,
	.mkpv-modal__inner,
	.mkpv-dot,
	.mkpv-spot-marker__dot {
		animation: none !important;
		transition: none !important;
	}
}