@import '~magnific-popup/src/css/main';

a.wpzoom-video-popup-block,
.editor-styles-wrapper a.wpzoom-video-popup-block {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	position: relative;
	font-family: inherit;
	font-size: 2rem;
	font-weight: inherit;
	font-style: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-decoration: none;
	line-height: inherit;
	color: inherit;
	background: inherit;
	height: auto;
	min-height: 100px;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
	cursor: pointer;

	* {
		box-sizing: border-box;
	}

	.wpzoom-video-popup-block_icon {
		display: block;
		font-size: inherit;
		font-weight: inherit;
		font-style: inherit;
		letter-spacing: inherit;
		text-transform: inherit;
		line-height: inherit;
		color: inherit;
		height: 1.5em;
		width: 1.5em;
		cursor: pointer;

		svg {
			display: block;
			color: inherit;
			height: 100%;
			width: 100%;
			cursor: pointer;
		}
	}
}


.mfp-close {
  width: 27px;
  font-size: 35px;
  font-weight: 300;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

.mfp-close:hover,
.mfp-close:focus {
    cursor: pointer;
}

.mfp-close-btn-in .mfp-close {
  color: #fff;
  top: -40px;
}


.mfp-close {
    svg {
      pointer-events: none;
    }
}

/* Portrait orientation styles for YouTube Shorts and TikTok */
.wpzoom-video-popup-portrait {
  .mfp-iframe-scaler {
    padding-top: 177.7778%; /* 16:9 inverted for portrait orientation */
    max-width: 325px !important;
    margin: 0 auto;
  }
  
  /* Specific adjustments for TikTok embeds */
  iframe[src*="tiktok.com"] {
    background-color: white;
  }
}