/**
 * Product video popup.
 *
 * The theme's style.css carries
 *
 *     #productModal iframe { height:280px !important; width:498px !important; display:block !important; }
 *
 * A fixed 498x280 box inside a responsive dialog is what left the video sitting
 * small in the corner of a large empty panel. Because that rule is !important it
 * has to be beaten rather than simply overridden, which is what the iframe block
 * near the bottom of this file does: a longer selector, also !important, so it
 * wins on specificity. It also beats the inline width the theme's own script
 * writes onto the iframe.
 *
 * @package ProductVideoPopup
 */

/* max-width is set inline by PHP from the Max width setting. */
#productModal .modal-dialog {
	width: calc(100% - 32px);
	margin: 1.75rem auto;
}

#productModal .modal-content {
	position: relative;
	background: #0b0b0b;
	border: 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

#productModal .modal-header {
	display: block;
	border: 0;
	padding: 16px 64px 14px 20px;
	background: #0b0b0b;
}

#productModal .modal-title {
	margin: 0;
	color: #fff;
	font-size: 17px;
	line-height: 1.35;
	font-weight: 600;
	letter-spacing: .2px;
}

/* No title to show: keep the bar only as tall as the close button needs. */
#productModal.tpvp-no-title .modal-header {
	padding: 0;
	height: 52px;
}

#productModal .close {
	position: absolute;
	top: 8px;
	right: 10px;
	z-index: 3;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: #fff;
	font-size: 30px;
	line-height: 36px;
	font-weight: 400;
	text-shadow: none;
	opacity: .7;
	transition: opacity .15s ease, background-color .15s ease;
}

#productModal .close:hover,
#productModal .close:focus {
	color: #fff;
	opacity: 1;
	background: rgba(255, 255, 255, .12);
	outline: none;
}

#productModal .modal-body {
	padding: 0 !important;
	background: #000;
}

/* The 16:9 box. Padding on a pseudo element holds the ratio at every width. */
#productModal .embed-responsive {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
}

#productModal .embed-responsive::before {
	display: block;
	content: "";
	padding-top: 56.25%;
}

/* See the note at the top of the file: this is the block that beats the theme. */
#productModal .modal-body .embed-responsive .embed-responsive-item,
#productModal .modal-body .embed-responsive iframe {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	display: block !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #000;
}

@media (max-width: 575px) {

	#productModal .modal-dialog {
		width: calc(100% - 16px);
		margin: .5rem auto;
	}

	#productModal .modal-header {
		padding: 14px 56px 12px 14px;
	}

	#productModal .modal-title {
		font-size: 15px;
	}
}

/* Page-builder buttons are rendered with an empty link, so they get no pointer. */
.tpvp-trigger {
	cursor: pointer;
}