/*
Theme Name: Video Theme
Theme URI: https://www.facebook.com/soyrickyads/
Author: RICKY SAN CRISTOBAL
Author URI: https://www.facebook.com/soyrickyads/
Description: Tema optimizado para publicar videos con enlace directo.
Version: 1.1.19
*/

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	background: #ffffff;
}

body {
	margin: 0;
	background: #ffffff;
	color: #15171c;
	font-family: Arial, sans-serif;
}

img,
iframe,
video {
	max-width: 100%;
}

.container {
	width: min(100% - 24px, 860px);
	margin: 0 auto;
	padding: 18px 0 28px;
}

.post-content {
	margin: 0 auto 24px;
}

.entry-content {
	margin: 0 0 16px;
	color: #2c313a;
	line-height: 1.55;
}

.video-container {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
	border: 1px solid rgba(20, 24, 32, 0.12);
	border-radius: 8px;
	box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
	isolation: isolate;
}

.video-container iframe,
.video-container video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

.video-container--file video {
	object-fit: contain;
}

.video-theme-start-overlay,
.video-theme-embed-loader {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background:
		radial-gradient(circle at center, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 36%),
		linear-gradient(180deg, rgba(15, 17, 21, 0.04), rgba(15, 17, 21, 0.58)),
		#11141a;
	cursor: pointer;
	transition: opacity 180ms ease, visibility 180ms ease;
	z-index: 2;
}

.video-container--has-poster .video-theme-start-overlay {
	background:
		radial-gradient(circle at center, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 34%),
		linear-gradient(180deg, rgba(15, 17, 21, 0.06), rgba(15, 17, 21, 0.28));
}

.video-theme-start-overlay::after,
.video-theme-embed-loader::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 32%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.46));
	pointer-events: none;
}

.video-container.is-playing .video-theme-start-overlay {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.video-theme-play {
	position: relative;
	width: clamp(64px, 16vw, 86px);
	height: clamp(64px, 16vw, 86px);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.94);
	box-shadow:
		0 14px 34px rgba(0, 0, 0, 0.38),
		0 0 0 10px rgba(255, 255, 255, 0.1);
	transform: scale(1);
	transition: transform 160ms ease, background 160ms ease;
	z-index: 1;
}

.video-theme-start-overlay:hover .video-theme-play,
.video-theme-embed-loader:hover .video-theme-play,
.video-theme-start-overlay:focus-visible .video-theme-play,
.video-theme-embed-loader:focus-visible .video-theme-play {
	background: #fff;
	transform: scale(1.05);
}

.video-theme-play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	border-top: clamp(13px, 3.2vw, 17px) solid transparent;
	border-bottom: clamp(13px, 3.2vw, 17px) solid transparent;
	border-left: clamp(20px, 4.6vw, 27px) solid #111;
	transform: translate(-38%, -50%);
}

.video-theme-start-overlay:focus-visible,
.video-theme-embed-loader:focus-visible {
	outline: 2px solid #8fd3ff;
	outline-offset: -4px;
}

.post-content :where(
	.wp-block-social-links,
	.sharedaddy,
	.sd-sharing,
	.addtoany_share_save_container,
	.a2a_kit,
	.heateor_sss_sharing_container,
	.social,
	.social-icons,
	.social-links,
	.social-share,
	.share,
	.share-buttons,
	.sharing
) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: 360px;
	margin: 18px auto 0;
	padding: 0;
}

.post-content :where(
	.wp-block-social-links,
	.social-icons,
	.social-links,
	.share-buttons
) {
	list-style: none;
}

.post-content :where(
	.wp-block-social-links,
	.sharedaddy,
	.sd-sharing,
	.addtoany_share_save_container,
	.a2a_kit,
	.heateor_sss_sharing_container,
	.social,
	.social-icons,
	.social-links,
	.social-share,
	.share,
	.share-buttons,
	.sharing
) :where(a, button, .wp-social-link) {
	display: inline-grid !important;
	place-items: center;
	flex: 0 0 auto;
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	min-height: 42px !important;
	max-width: 42px !important;
	max-height: 42px !important;
	padding: 0 !important;
	border-radius: 999px;
	overflow: hidden;
}

.post-content :where(
	.wp-block-social-links,
	.sharedaddy,
	.sd-sharing,
	.addtoany_share_save_container,
	.a2a_kit,
	.heateor_sss_sharing_container,
	.social,
	.social-icons,
	.social-links,
	.social-share,
	.share,
	.share-buttons,
	.sharing
) :where(img, svg) {
	display: block !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	min-height: 24px !important;
	max-width: 24px !important;
	max-height: 24px !important;
	object-fit: contain;
}

.post-content :where(
	a[href*="facebook."],
	a[href*="fb."],
	a[href*="instagram."],
	a[href*="tiktok."],
	a[href*="x.com"],
	a[href*="twitter."],
	a[href*="telegram."],
	a[href*="whatsapp."],
	a[href*="youtube."]
) {
	display: inline-grid !important;
	place-items: center;
	width: 44px !important;
	height: 44px !important;
	max-width: 44px !important;
	max-height: 44px !important;
	vertical-align: middle;
}

.post-content :where(
	a[href*="facebook."],
	a[href*="fb."],
	a[href*="instagram."],
	a[href*="tiktok."],
	a[href*="x.com"],
	a[href*="twitter."],
	a[href*="telegram."],
	a[href*="whatsapp."],
	a[href*="youtube."]
) :where(img, svg) {
	width: 44px !important;
	height: 44px !important;
	max-width: 44px !important;
	max-height: 44px !important;
	object-fit: contain;
}

body :where(
	.wp-block-social-links,
	.sharedaddy,
	.sd-sharing,
	.sd-content,
	.addtoany_share_save_container,
	.a2a_kit,
	.heateor_sss_sharing_container,
	.heateor_sss_horizontal_sharing,
	.social,
	.social-icons,
	.social-links,
	.social-share,
	.share,
	.share-buttons,
	.sharing
) {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	max-width: 360px !important;
	margin: 18px auto 0 !important;
	padding: 0 !important;
}

body :where(
	a[href*="facebook" i],
	a[href*="fb." i],
	a[href*="instagram" i],
	a[href*="tiktok" i],
	a[href*="twitter" i],
	a[href*="x.com" i],
	a[href*="telegram" i],
	a[href*="whatsapp" i],
	a[href*="youtube" i],
	.a2a_button_facebook,
	.a2a_button_whatsapp,
	.a2a_button_telegram,
	.a2a_button_x,
	.a2a_dd,
	.heateor_sss_facebook,
	.heateor_sss_whatsapp,
	.heateor_sss_telegram,
	.sd-button,
	.wp-social-link
) {
	display: inline-grid !important;
	place-items: center !important;
	flex: 0 0 auto !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	max-width: 44px !important;
	max-height: 44px !important;
	padding: 0 !important;
	margin: 4px !important;
	border-radius: 999px !important;
	overflow: hidden !important;
	font-size: 22px !important;
	line-height: 1 !important;
}

body :where(
	a[href*="facebook" i],
	a[href*="fb." i],
	a[href*="instagram" i],
	a[href*="tiktok" i],
	a[href*="twitter" i],
	a[href*="x.com" i],
	a[href*="telegram" i],
	a[href*="whatsapp" i],
	a[href*="youtube" i],
	.a2a_button_facebook,
	.a2a_button_whatsapp,
	.a2a_button_telegram,
	.a2a_button_x,
	.a2a_dd,
	.heateor_sss_facebook,
	.heateor_sss_whatsapp,
	.heateor_sss_telegram,
	.sd-button,
	.wp-social-link
) :where(img, svg, i, span, .a2a_svg, .heateor_sss_svg) {
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	min-height: 24px !important;
	max-width: 24px !important;
	max-height: 24px !important;
	font-size: 22px !important;
	line-height: 1 !important;
	object-fit: contain !important;
}

body :where(
	img[src*="facebook" i],
	img[alt*="facebook" i],
	img[class*="facebook" i],
	svg[class*="facebook" i],
	svg[aria-label*="facebook" i],
	.fa-facebook,
	.fa-facebook-f,
	.fab.fa-facebook,
	.fab.fa-facebook-f,
	.a2a_svg,
	.heateor_sss_svg
) {
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	min-height: 24px !important;
	max-width: 24px !important;
	max-height: 24px !important;
	font-size: 22px !important;
	line-height: 1 !important;
}

body :where(
	.a2a_floating_style,
	.a2a_vertical_style,
	.heateor_sss_vertical_sharing,
	.heateor_sss_floating_follow_icons_container,
	.sfsi_floater,
	.sfsi_widget,
	.sfsiplus_floater,
	.addthis-smartlayers,
	.at-share-dock,
	.atss,
	.essb_fixed,
	.essb_sidebar,
	.essb_links_fixed,
	.sticky-social,
	.floating-social,
	.fixed-social,
	.social-floating,
	.social-sidebar,
	.video-theme-social-fixed
) {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 8px !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: 58px !important;
	padding: 6px !important;
	margin: 0 !important;
}

body :where(
	.a2a_floating_style,
	.a2a_vertical_style,
	.heateor_sss_vertical_sharing,
	.heateor_sss_floating_follow_icons_container,
	.sfsi_floater,
	.sfsi_widget,
	.sfsiplus_floater,
	.addthis-smartlayers,
	.at-share-dock,
	.atss,
	.essb_fixed,
	.essb_sidebar,
	.essb_links_fixed,
	.sticky-social,
	.floating-social,
	.fixed-social,
	.social-floating,
	.social-sidebar,
	.video-theme-social-fixed
) :where(a, button, div[role="button"], .wp-social-link, .a2a_button, .heateor_sss_button, .sfsi_wicons, .essb_link) {
	display: inline-grid !important;
	place-items: center !important;
	flex: 0 0 auto !important;
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	min-height: 42px !important;
	max-width: 42px !important;
	max-height: 42px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 999px !important;
	overflow: hidden !important;
	font-size: 22px !important;
	line-height: 1 !important;
}

body :where(
	.a2a_floating_style,
	.a2a_vertical_style,
	.heateor_sss_vertical_sharing,
	.heateor_sss_floating_follow_icons_container,
	.sfsi_floater,
	.sfsi_widget,
	.sfsiplus_floater,
	.addthis-smartlayers,
	.at-share-dock,
	.atss,
	.essb_fixed,
	.essb_sidebar,
	.essb_links_fixed,
	.sticky-social,
	.floating-social,
	.fixed-social,
	.social-floating,
	.social-sidebar,
	.video-theme-social-fixed
) :where(img, svg, i, span, .a2a_svg, .heateor_sss_svg) {
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	min-height: 24px !important;
	max-width: 24px !important;
	max-height: 24px !important;
	font-size: 22px !important;
	line-height: 1 !important;
	object-fit: contain !important;
}

body :where(.video-theme-social-fixed) {
	z-index: 9999 !important;
}

.video-theme-social-rail {
	position: fixed !important;
	top: 52% !important;
	left: 10px !important;
	right: auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 10px !important;
	width: 46px !important;
	max-width: 46px !important;
	padding: 0 !important;
	margin: 0 !important;
	transform: translateY(-50%) !important;
	z-index: 9999 !important;
	pointer-events: auto !important;
}

.video-theme-social-rail :where(a, button, div[role="button"]) {
	display: inline-grid !important;
	place-items: center !important;
	width: 42px !important;
	height: 42px !important;
	min-width: 42px !important;
	min-height: 42px !important;
	max-width: 42px !important;
	max-height: 42px !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 999px !important;
	overflow: hidden !important;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28) !important;
}

.video-theme-social-rail :where(img, svg, i, span, .a2a_svg, .heateor_sss_svg) {
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	min-height: 24px !important;
	max-width: 24px !important;
	max-height: 24px !important;
	font-size: 22px !important;
	line-height: 1 !important;
	object-fit: contain !important;
}

@media (max-width: 520px) {
	.video-theme-social-rail {
		top: 58% !important;
		left: 8px !important;
		width: 40px !important;
		max-width: 40px !important;
		gap: 8px !important;
	}

	.video-theme-social-rail :where(a, button, div[role="button"]) {
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		min-height: 36px !important;
		max-width: 36px !important;
		max-height: 36px !important;
	}

	.video-theme-social-rail :where(img, svg, i, span, .a2a_svg, .heateor_sss_svg) {
		width: 21px !important;
		height: 21px !important;
		min-width: 21px !important;
		min-height: 21px !important;
		max-width: 21px !important;
		max-height: 21px !important;
		font-size: 20px !important;
	}
}

.video-theme-extra-html,
.entry-title {
	display: none;
}

.empty-state {
	margin: 48px 0;
	color: #4f5663;
	text-align: center;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@supports (content-visibility: auto) {
	.post-content {
		content-visibility: auto;
		contain-intrinsic-size: 480px;
	}
}