/* Partner Page Specific Styles */

/* Commerce Platform Video Integration */
.commerce-platform-container {
	position: relative;
	display: inline-block;
}
.creative-platforms-image img{
	height:100%;
}
.creative-platforms-image img.adtech-video-blurred {
	width: 80%;
	margin-left: 10%;
  }
.commerce-frame {
	position: relative;
	z-index: 3;
}

.commerce-video-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60%;
	height: 60%;
	z-index: 1;
	border-radius: 15px;
	overflow: hidden;
}

.commerce-video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 15px;
	z-index: 2;
}

.commerce-video-blurred {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 15px;
	filter: blur(10px) brightness(0.7);
	z-index: 1;
}

/* Video Controls */
.video-controls {
	position: absolute;
	bottom: 20px;
	left: 30%;
	right: 20px;
	padding: 15px;
	z-index: 4;
	border-radius: 0 0 15px 15px;
	display: none;
}

.controls-wrapper {
	display: flex;
	align-items: center;
	gap: 15px;
}

.control-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	border-radius: 50%;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.control-btn:hover {
	background: rgba(255, 255, 255, 0.2);
}

.commerce-video-controls {
	position: absolute;
	bottom: 0px;
	left: 30%;
	right: 20px;
	padding: 15px;
	z-index: 10;
	border-radius: 0 0 15px 15px;
	display: none;
}

.commerce-frame {
	position: relative;
	z-index: 2;
	pointer-events: none;
}

.commerce-video-container {
	overflow: visible;
}
.adtech-video-container {
	width:100%;
	height:80%;
}
.video-action-thumbnails {
	position: relative;
	z-index: 5;
	padding: 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	width: 80%;
	margin-left:8%;
}
/* Mobile responsive for commerce platform */
@media screen and (max-width: 768px) {
	.commerce-video-container {
		width: 55%;
		height: 55%;
		border-radius: 10px;
	}
	
	.commerce-video,
	.commerce-video-blurred {
		border-radius: 10px;
	}
	
	.commerce-video-blurred {
		filter: blur(8px) brightness(0.7);
	}
	.adtech-video-container {
		height:100%;
	}
	
	.commerce-video-controls {
		bottom: 0px;
		left: 10px;
		right: 10px;
		padding: 10px;
	}
	
	.video-controls {
		padding: 10px;
	}
	
	.controls-wrapper {
		gap: 10px;
	}
	
	.control-btn svg {
		width: 20px;
		height: 20px;
	}
	.video-action-thumbnails {
		align-items: stretch;
		width: 100%;
		margin:auto;
	  }
	  .video-action-thumbnails img{
		width: 24%;
	  }
}

@media screen and (max-width: 480px) {
	.commerce-video-container {
		width: 60%;
		height: 65%;
		border-radius: 8px;
	}
	.adtech-video-container {
		height:80%;
	}
	
	.commerce-video,
	.commerce-video-blurred {
		border-radius: 8px;
	}
	
	.commerce-video-blurred {
		filter: blur(6px) brightness(0.7);
	}
	
	.commerce-video-controls {
		bottom: 0px;
		left: 5px;
		right: 5px;
		padding: 8px;
	}
	
	.video-controls {
		padding: 8px;
	}
	
	.control-btn {
		padding: 6px;
	}
	
	.control-btn svg {
		width: 18px;
		height: 18px;
	}
}

/* Agencies Video Grid - Masonry Layout */
.agencies-video-container {
	position: relative;
	width: 100%;
	border-radius: 15px;
}

.agencies-video-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: start;
	position: relative;
	width: 100%;
	height: 100%;
	padding-left: 0;
	margin-bottom: 0;
	list-style-type: none;
	gap: 0;
}

.agencies-video-item {
	display: inline-block;
	position: relative;
	flex: 0 0 30%;
	border-radius: 8px;
	box-sizing: border-box;
	padding: 15px;
	overflow: hidden;
}

/* Masonry layout wave effect for 5 videos */
.agencies-video-item:nth-child(1) {
	transform: translateY(130px);
}

.agencies-video-item:nth-child(2) {
	transform: translateY(30px);
}

.agencies-video-item:nth-child(3) {
	transform: translateY(0);
}

.agencies-video-item:nth-child(4) {
	opacity: 0;
}
.agencies-video-item:nth-child(5) {
	transform: translateY(30px);
  }

.agencies-video-item video {
	display: block;
	position: relative;
	width: 100%;
	border-radius: 8px;
}

.agencies-video-container .agencies-bubble {
	position: absolute;
	z-index: 1;
	border-radius: 103.745px;
	background: #6B2AFF;
	box-shadow: 0 4.262px 25.575px -1.066px rgba(0, 0, 0, 0.20);
	backdrop-filter: blur(21.3121395111084px);
	color: #fff;
	padding: 5px 10px;
	font-size: 14px;
  }
  .agencies-video-container .agencies-bubble:nth-child(1) {
	left: 0px;
  }
  .agencies-video-container .agencies-bubble:nth-child(2) {
	right: 10%;
	top:35%;
  }
  .agencies-video-container .agencies-bubble:nth-child(3) {
	left: 6%;
	bottom: 20%
  }.agencies-video-container .agencies-bubble:nth-child(4) {
	right: 10%;
	bottom: 10%
  }.agencies-bubble .round-white-dot {
	display: inline-block;
	background: #fff;
	height: 8px;
	width: 8px;
	border-radius: 50%;
	margin: auto 5px;
  }
  .creator-hero-image,.creative-platforms-image{
	position: relative;
  }

/* Responsive adjustments for agencies video grid */
@media screen and (max-width: 768px) {
	
	.agencies-video-item {
		flex: 0 0 25%;
	}
	
	.agencies-video-item:nth-child(2) {
		transform: translateY(40px);
	}
	
	.agencies-video-item:nth-child(3) {
		transform: translateY(0px);
	}
	
	.agencies-video-item:nth-child(5) {
		transform: translateY(40px);
	}
	.agencies-video-container .agencies-bubble{
		display: none;
	}
	
}

@media screen and (max-width: 480px) {
	
	.agencies-video-item {
		flex: 0 0 33.33%;
	}
	
	.agencies-video-item:nth-child(2) {
		transform: translateY(30px);
	}
	
	.agencies-video-item:nth-child(3) {
		transform: translateY(0px);
	}
	
	.agencies-video-item:nth-child(5) {
		transform: translateY(30px);
	}
}