/**
 * Escape Video Library — Frontend Styles
 *
 * Mobile-first, responsive, YouTube-like browsing experience.
 * All classes prefixed with evl- to prevent collisions.
 */

/* ---------------------------------------------------------------
   Light scoped reset — only targets list chrome and box-sizing.
--------------------------------------------------------------- */

#evl-root *,
.evl-shortcode-wrap *,
.evl-modal *,
.evl-clean-player * {
	box-sizing: border-box;
}

#evl-root ul,
#evl-root ol,
.evl-shortcode-wrap ul,
.evl-shortcode-wrap ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------
   ARMOR — block Elementor + theme intrusions on plugin-internal
   elements ONLY. Theme components (.eti_btn, .eti_page-header, etc.)
   are intentionally left untouched — they're meant to track the
   design system.
--------------------------------------------------------------- */

/* Pure-trigger buttons that should have no chrome of their own (the
   play SVG paints itself). Listed by their evl-* class, so theme
   buttons in the same wrappers stay safe. */
.evl-cover-player,
.evl-clean-player__play,
.evl-video-card__play,
.evl-featured__play,
.evl-modal__close,
.evl-playlist-embed__play-btn,
.evl-playlist-embed__carousel-prev,
.evl-playlist-embed__carousel-next {
	-webkit-appearance: none !important;
	appearance:         none !important;
	background:         transparent !important;
	border:             none !important;
	border-radius:      0 !important;
	padding:            0 !important;
	margin:             0 !important;
	box-shadow:         none !important;
	text-shadow:        none !important;
	text-transform:     none !important;
	letter-spacing:     normal !important;
	cursor:             pointer !important;
	color:              inherit !important;
	font:               inherit !important;
	font-family:        inherit !important;
	line-height:        1 !important;
	min-height:         0 !important;
	min-width:          0 !important;
}

/* Cover player IS a button — restore its black backdrop and radius
   after the trigger reset above strips them. */
.evl-cover-player {
	background:    #000 !important;
	border-radius: 25px !important;
}

/* Cancel injected hover backgrounds on those pure triggers. */
.evl-cover-player:hover,
.evl-cover-player:focus,
.evl-clean-player__play:hover,
.evl-video-card__play:hover,
.evl-featured__play:hover,
.evl-modal__close:hover,
.evl-modal__close:focus,
.evl-playlist-embed__play-btn:hover,
.evl-playlist-embed__carousel-prev:hover,
.evl-playlist-embed__carousel-next:hover {
	box-shadow:  none !important;
	text-shadow: none !important;
}

.evl-cover-player:hover,
.evl-cover-player:focus {
	background: #000 !important;
}

/* Modal links — themes love adding underlines and color. */
.evl-modal a,
.evl-modal__source-link {
	text-decoration: none !important;
	box-shadow:      none !important;
}

/* Images inside EVL components — themes that add forced
   border-radius / max-width / filter would distort the player. */
.evl-cover-player img,
.evl-clean-player img,
.evl-video-card img,
.evl-featured img,
.evl-playlist-embed img,
.evl-modal img {
	max-width:  100% !important;
	box-shadow: none !important;
	filter:     none !important;
}

/* ---------------------------------------------------------------
   Layout
--------------------------------------------------------------- */

#evl-root {
	width:          100% !important;
	max-width:      1600px !important;
	margin-inline:  auto !important;
	margin-bottom:  var( --eti-container-padding, 1.5rem ) !important;
	padding-inline: var( --eti-container-padding, 1.5rem ) !important;
}

/* ---------------------------------------------------------------
   Archive Banner — slate hero treatment for the All Videos page.
   Scoped to #evl-archive-banner so other pages using
   .eti_page-header keep the theme defaults.
--------------------------------------------------------------- */

#evl-root .eti_page-header {
	margin-bottom: 1rem;
}

#evl-archive-banner {
	background:    #4B6568 !important;
	color:         #fff !important;
	padding:       3.5rem 1.5rem !important;
	margin:        0 0 2rem !important;
	text-align:    center !important;
	border-radius: 0 !important;
}

#evl-archive-banner .eti_page-header__inner {
	max-width:   720px !important;
	margin:      0 auto !important;
	padding:     0 !important;
	display:     flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap:         0.85rem !important;
	text-align:  center !important;
}

#evl-archive-banner .evl-archive-eyebrow {
	display:         inline-block !important;
	color:           rgba( 255, 255, 255, 0.75 ) !important;
	font-size:       0.85rem !important;
	font-weight:     500 !important;
	letter-spacing:  0.02em !important;
	text-transform:  none !important;
	padding:         0 !important;
	margin:          0 !important;
	background:      transparent !important;
	border:          none !important;
	line-height:     1.4 !important;
}

#evl-archive-banner .eti_page-header__title {
	color:          #fff !important;
	font-size:      clamp(2rem, 4vw, 2.75rem) !important;
	font-weight:    600 !important;
	line-height:    1.1 !important;
	margin:         0 !important;
	padding:        0 !important;
	letter-spacing: -0.01em !important;
}

#evl-archive-banner .eti_page-header__subtitle {
	color:       rgba( 255, 255, 255, 0.85 ) !important;
	font-size:   1.05rem !important;
	line-height: 1.5 !important;
	margin:      0 !important;
	padding:     0 !important;
	max-width:   620px !important;
}

/* ---------------------------------------------------------------
   Playlist Navigation — primary tabs (button style)
--------------------------------------------------------------- */

.evl-playlist-nav {
	position: relative;
	margin-top: 2rem;
	margin-bottom: 0;
}

/* Force pure white text on active slate buttons — cream doesn't have
   enough contrast on our particular slate shade. */
#evl-root .eti_btn--secondary,
#evl-root .eti_btn--secondary:hover {
	color: #fff !important;
}

.evl-playlist-nav__scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 0.35rem 0;
}

.evl-playlist-nav__scroll::-webkit-scrollbar {
	display: none;
}

.evl-playlist-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.35rem;
	white-space: nowrap;
}

.evl-playlist-nav__item {
	flex-shrink: 0;
}

/* Playlist nav pills — force consistent compact pill styling.
   Active state uses slate; default uses outlined ghost. */
#evl-root .evl-playlist-nav__link,
.evl-shortcode-wrap .evl-playlist-nav__link {
	display:          inline-flex !important;
	align-items:      center !important;
	gap:              0.4rem !important;
	padding:          0.45rem 0.95rem !important;
	min-height:       32px !important;
	height:           auto !important;
	font-size:        0.85rem !important;
	font-weight:      500 !important;
	line-height:      1 !important;
	white-space:      nowrap !important;
	border-radius:    999px !important;
	text-transform:   none !important;
	letter-spacing:   normal !important;
	text-decoration:  none !important;
	background:       transparent !important;
	color:            #4B6568 !important;
	border:           1px solid rgba( 75, 101, 104, 0.25 ) !important;
	box-shadow:       none !important;
	transition:       background 150ms ease, color 150ms ease, border-color 150ms ease !important;
}

#evl-root .evl-playlist-nav__link:hover,
.evl-shortcode-wrap .evl-playlist-nav__link:hover {
	background:   rgba( 75, 101, 104, 0.08 ) !important;
	color:        #4B6568 !important;
	border-color: rgba( 75, 101, 104, 0.45 ) !important;
}

#evl-root .evl-playlist-nav__item--active .evl-playlist-nav__link,
#evl-root .evl-playlist-nav__link.is-active,
.evl-shortcode-wrap .evl-playlist-nav__item--active .evl-playlist-nav__link {
	background:   #4B6568 !important;
	color:        #fff !important;
	border-color: #4B6568 !important;
}

#evl-root .evl-playlist-nav__item--active .evl-playlist-nav__link:hover,
.evl-shortcode-wrap .evl-playlist-nav__item--active .evl-playlist-nav__link:hover {
	background:   #3a4f51 !important;
	color:        #fff !important;
	border-color: #3a4f51 !important;
}

/* Fade hints when scrollable */

.evl-playlist-nav::before,
.evl-playlist-nav::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 40px;
	pointer-events: none;
	z-index: 1;
	opacity: 0;
	transition: opacity 200ms;
}

.evl-playlist-nav::before {
	left: 0;
	background: linear-gradient(to right, var(--evl-bg, #f5f5f5), transparent);
}

.evl-playlist-nav::after {
	right: 0;
	background: linear-gradient(to left, var(--evl-bg, #f5f5f5), transparent);
}

/* Hide fade hints when compact dropdown is active */
.evl-playlist-nav--compact::before,
.evl-playlist-nav--compact::after {
	display: none !important;
}

.evl-playlist-nav--scroll-left::before {
	opacity: 1;
}

.evl-playlist-nav--scroll-right::after {
	opacity: 1;
}

/* Divider below nav */

.evl-playlist-nav__divider {
	height: 1px !important;
	background: #e0e0e0 !important;
	margin: 0.25rem 0 0 !important;
}

/* ---------------------------------------------------------------
   Playlist Navigation — Compact Dropdown (overflow-triggered)
--------------------------------------------------------------- */

.evl-playlist-nav__compact {
	display: none;
	position: relative;
	padding: 0.4rem 0;
}

/* JS adds this class when tabs overflow */
.evl-playlist-nav--compact .evl-playlist-nav__desktop {
	display: none !important;
}

.evl-playlist-nav--compact .evl-playlist-nav__compact {
	display: block !important;
}

#evl-root .evl-playlist-nav__compact-toggle {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	padding: 0.6rem 1.1rem !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	color: #333 !important;
	background: #fff !important;
	border: 1px solid rgba(0, 0, 0, 0.1) !important;
	border-radius: 15px !important;
	cursor: pointer !important;
	transition: all 200ms ease-out !important;
	box-shadow: rgba(99, 99, 99, 0.08) 0px 1px 4px 0px !important;
	min-height: 0 !important;
	line-height: 1.4 !important;
}

#evl-root .evl-playlist-nav__compact-toggle:hover,
#evl-root .evl-playlist-nav__compact-toggle:focus,
#evl-root .evl-playlist-nav__compact-toggle:active {
	border-color: rgba(0, 0, 0, 0.18) !important;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 4px 12px 0px !important;
	transform: scale(1.03) !important;
	font-size: 16px !important;
	padding: 0.6rem 1.1rem !important;
	line-height: 1.4 !important;
	border-radius: 15px !important;
	background: #fff !important;
}

.evl-playlist-nav__compact-label {
	color: #999 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
}

.evl-playlist-nav__compact-current {
	color: #4B6568 !important;
	font-weight: 600 !important;
}

.evl-playlist-nav__compact-chevron {
	color: #999;
	flex-shrink: 0;
	transition: transform 200ms ease-out;
}

.evl-playlist-nav__compact--open .evl-playlist-nav__compact-chevron {
	transform: rotate(180deg);
}

/* Dropdown panel */

.evl-playlist-nav__compact-dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 100;
	min-width: 220px;
	max-width: 340px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 15px;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 20px 0px;
	padding: 0.4rem;
	overflow: hidden;
}

.evl-playlist-nav__compact-dropdown[hidden] {
	display: none;
}

#evl-root .evl-playlist-nav__compact-item {
	display: block !important;
	padding: 0.55rem 1rem !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: #555 !important;
	text-decoration: none !important;
	border-radius: 10px !important;
	transition: all 150ms ease-out !important;
	box-shadow: none !important;
	border: none !important;
	background: none !important;
}

#evl-root .evl-playlist-nav__compact-item:hover {
	color: #030303 !important;
	background: rgba(75, 101, 104, 0.08) !important;
}

#evl-root .evl-playlist-nav__compact-item--active,
#evl-root a.evl-playlist-nav__compact-item--active,
#evl-root a.evl-playlist-nav__compact-item--active:visited {
	color: #fff !important;
	font-weight: 600 !important;
	background: #4B6568 !important;
}

#evl-root .evl-playlist-nav__compact-item--active:hover,
#evl-root a.evl-playlist-nav__compact-item--active:hover {
	color: #fff !important;
	background: #3d5456 !important;
}

/* ---------------------------------------------------------------
   Toolbar — sub-nav + sort on one row
--------------------------------------------------------------- */

.evl-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.65rem 0;
	margin-bottom: 1rem;
	flex-wrap: nowrap;
	min-height: 40px;
}

/* ---------------------------------------------------------------
   Playlist Sub-Navigation — condensed button style
--------------------------------------------------------------- */

.evl-playlist-subnav {
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.evl-playlist-subnav::-webkit-scrollbar {
	display: none;
}

.evl-playlist-subnav[hidden] {
	display: none;
}

.evl-playlist-subnav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.3rem;
	white-space: nowrap;
}

.evl-playlist-subnav__item {
	flex-shrink: 0;
}

/* Sub-playlist button styling comes from .eti_btn theme component. */

#evl-root .evl-playlist-subnav__link.eti_btn {
	gap: 0.35rem !important;
}

.evl-playlist-subnav__count {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	min-width: 1.3em;
	text-align: center;
	padding: 0.05rem 0.35rem;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.07);
	color: #888;
	line-height: 1.4;
}

.evl-playlist-subnav__item--active .evl-playlist-subnav__count {
	background: rgba(255, 255, 255, 0.25);
	color: #fff;
}

/* ---------------------------------------------------------------
   Sort Bar — button-style sort options
--------------------------------------------------------------- */

.evl-sort-bar {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex-shrink: 0;
	margin: 0;
	margin-left: auto;
}

.evl-sort-bar__label {
	font-size: 0.78rem;
	color: #999;
	white-space: nowrap;
	margin-right: 0.15rem;
}

/* Sort buttons — force a compact horizontal pill layout regardless of
   what the theme's .eti_btn does. The buttons keep theme colors
   (slate when active, ghost otherwise) but their structure is pinned
   here so they can't render as stacked icon-over-text boxes. */
#evl-root .evl-sort-btn,
.evl-shortcode-wrap .evl-sort-btn {
	display:        inline-flex !important;
	flex-direction: row !important;
	align-items:    center !important;
	justify-content: center !important;
	gap:            0.3rem !important;
	padding:        0.35rem 0.75rem !important;
	min-height:     28px !important;
	height:         auto !important;
	width:          auto !important;
	min-width:      0 !important;
	max-width:      none !important;
	font-size:      0.78rem !important;
	font-weight:    500 !important;
	line-height:    1 !important;
	white-space:    nowrap !important;
	border-radius:  999px !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow:     none !important;
}

.evl-sort-btn__icon {
	display:        inline-flex !important;
	align-items:    center !important;
	justify-content: center !important;
	flex-shrink:    0 !important;
	width:          14px !important;
	height:         14px !important;
}

.evl-sort-btn__icon svg {
	display:    block !important;
	width:      14px !important;
	height:     14px !important;
	flex-shrink: 0 !important;
}

.evl-sort-btn__label {
	display:     inline-block !important;
	font-size:   0.78rem !important;
	line-height: 1 !important;
	white-space: nowrap !important;
}

/* Hide sort labels on small screens, keep icons */
@media (max-width: 600px) {
	.evl-sort-btn__label {
		display: none !important;
	}
	#evl-root .evl-sort-btn,
	.evl-shortcode-wrap .evl-sort-btn {
		padding: 0.35rem 0.5rem !important;
	}
}

/* ---------------------------------------------------------------
   Video Grid
--------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Clean Inline Player (shortcode display="clean" or direct embed)
--------------------------------------------------------------- */

.evl-clean-player {
	position: relative;
	max-width: 100%;
	border-radius: 25px;
	overflow: hidden;
	background: #000;
	cursor: pointer;
}

.evl-clean-player__media {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 */
	overflow: hidden;
}

.evl-clean-player__media iframe,
.evl-clean-player__media video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.evl-clean-player__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.evl-clean-player__placeholder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #1a1a1a;
}

.evl-clean-player__play {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	padding: 0 !important;
	transition: opacity 150ms ease-out, transform 150ms ease-out !important;
	z-index: 1 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	min-height: 0 !important;
	min-width: 0 !important;
}

.evl-clean-player__play:hover {
	opacity: 0.85 !important;
	transform: translate(-50%, -50%) scale(1.08) !important;
	background: none !important;
	box-shadow: none !important;
}

.evl-clean-player--playing .evl-clean-player__play,
.evl-clean-player--playing .evl-clean-player__image,
.evl-clean-player--playing .evl-clean-player__placeholder {
	display: none;
}

.evl-clean-player--playing {
	cursor: default;
}

/* ---------------------------------------------------------------
   Cover Player (cover image + play overlay, opens in modal)
   Used by [escape_video display="cover"] — the click handler in
   evl-modal.js picks up [data-evl-embed] anywhere in the document.
--------------------------------------------------------------- */

.evl-cover-player {
	position:      relative !important;
	display:       block !important;
	width:         100% !important;
	overflow:      hidden !important;
	aspect-ratio:  16 / 9 !important;
	text-align:    inherit !important;
	height:        auto !important;
}

.evl-cover-player:focus-visible {
	outline:        2px solid var( --eti-accent, #4B6568 ) !important;
	outline-offset: 2px !important;
}

.evl-cover-player__media {
	position: relative !important;
	display:  block !important;
	width:    100% !important;
	height:   100% !important;
	margin:   0 !important;
	padding:  0 !important;
}

.evl-cover-player__image {
	width:         100% !important;
	height:        100% !important;
	object-fit:    cover !important;
	display:       block !important;
	border-radius: 0 !important;
	margin:        0 !important;
}

.evl-cover-player__placeholder {
	display: block !important;
	width:   100% !important;
	height:  100% !important;
	background: linear-gradient( 135deg, #2a2a2a 0%, #1a1a1a 100% ) !important;
}

.evl-cover-player__play {
	position:       absolute !important;
	top:            50% !important;
	left:           50% !important;
	transform:      translate( -50%, -50% ) !important;
	pointer-events: none !important;
	transition:     transform 200ms ease, opacity 200ms ease !important;
	opacity:        0.95 !important;
	width:          auto !important;
	height:         auto !important;
	background:     none !important;
}

.evl-cover-player__play svg {
	display: block !important;
	width:   68px !important;
	height:  48px !important;
}

.evl-cover-player:hover .evl-cover-player__image,
.evl-cover-player:focus-visible .evl-cover-player__image {
	transform: scale( 1.03 ) !important;
	opacity:   0.9 !important;
}

.evl-cover-player:hover .evl-cover-player__play,
.evl-cover-player:focus-visible .evl-cover-player__play {
	transform: translate( -50%, -50% ) scale( 1.08 ) !important;
	opacity:   1 !important;
}

/* ---------------------------------------------------------------
   Video Grid
--------------------------------------------------------------- */

.evl-video-grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 1.5rem;
	transition: opacity 200ms ease-out;
}

@media (min-width: 540px) {
	.evl-video-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.evl-video-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------------------------------------------------------------
   Video Card
--------------------------------------------------------------- */

#evl-root .evl-video-card,
.evl-shortcode-wrap .evl-video-card {
	cursor: pointer !important;
	border-radius: 25px !important;
	overflow: hidden !important;
	transition: background-color 200ms ease-out, box-shadow 200ms ease-out !important;
	background-color: rgba(255, 255, 255, 0.35) !important;
	box-shadow: none !important;
}

#evl-root .evl-video-card:hover,
.evl-shortcode-wrap .evl-video-card:hover {
	background-color: rgba(255, 255, 255, 0.75) !important;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px !important;
}

.evl-video-card__thumbnail {
	position:    relative !important;
	width:       100% !important;
	padding-top: 56.25% !important; /* 16:9 */
	background:  #0d0d0d !important;
	overflow:    hidden !important;
	margin:      0 !important;
}

.evl-video-card__image {
	position:      absolute !important;
	top:           0 !important;
	left:          0 !important;
	width:         100% !important;
	height:        100% !important;
	object-fit:    cover !important;
	border-radius: 0 !important;
	margin:        0 !important;
	padding:       0 !important;
}

.evl-video-card__placeholder {
	position:   absolute !important;
	top:        0 !important;
	left:       0 !important;
	width:      100% !important;
	height:     100% !important;
	background: #1a1a1a !important;
}

.evl-video-card__play {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	opacity: 0 !important;
	transition: opacity 0.2s !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	min-height: 0 !important;
	min-width: 0 !important;
}

.evl-video-card:hover .evl-video-card__play {
	opacity: 1 !important;
}

.evl-video-card__play-icon {
	display: block;
}

.evl-video-card__duration {
	position: absolute;
	bottom: 8px;
	right: 8px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 500;
	padding: 2px 6px;
	border-radius: 4px;
	line-height: 1.4;
}

.evl-video-card__info {
	padding: 0.85rem 0.75rem;
}

#evl-root .evl-video-card__title,
.evl-shortcode-wrap .evl-video-card__title,
#evl-root h3.evl-video-card__title,
.evl-shortcode-wrap h3.evl-video-card__title {
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 0.25rem;
	padding: 0;
	color: #030303;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	border: none;
	letter-spacing: normal;
	text-transform: none;
}

.evl-video-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 0.15rem;
}

#evl-root .evl-video-card__source,
#evl-root a.evl-video-card__source,
.evl-shortcode-wrap .evl-video-card__source,
.evl-shortcode-wrap a.evl-video-card__source {
	font-size: 0.8rem;
	color: #606060;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	box-shadow: none;
	border: none;
	background: none;
	padding: 0;
}

#evl-root .evl-video-card__source:hover,
#evl-root a.evl-video-card__source:hover,
.evl-shortcode-wrap .evl-video-card__source:hover,
.evl-shortcode-wrap a.evl-video-card__source:hover {
	color: #030303;
	text-decoration: none;
}

.evl-external-icon {
	vertical-align: middle;
	flex-shrink: 0;
}

.evl-video-card__date {
	font-size: 0.75rem;
	color: #606060;
	white-space: nowrap;
	flex-shrink: 0;
}

/* ---------------------------------------------------------------
   Featured Video
--------------------------------------------------------------- */

.evl-featured {
	margin-bottom: 2.5rem;
	border-radius: 25px;
	overflow: hidden;
	background: #4B6568;
}

@media (min-width: 768px) {
	.evl-featured {
		display: grid;
		grid-template-columns: 1fr 340px;
	}
}

/* Player wrapper — proportional 16:9 */

.evl-featured__player {
	position: relative;
	cursor: pointer;
}

.evl-featured__media {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 */
	background: #000;
	overflow: hidden;
}

.evl-featured__media iframe,
.evl-featured__media video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.evl-featured--playing .evl-featured__player {
	cursor: default;
}

.evl-featured__image {
	position:      absolute !important;
	top:           0 !important;
	left:          0 !important;
	width:         100% !important;
	height:        100% !important;
	object-fit:    cover !important;
	border-radius: 0 !important;
	margin:        0 !important;
	padding:       0 !important;
}

.evl-featured__placeholder {
	position:   absolute !important;
	top:        0 !important;
	left:       0 !important;
	width:      100% !important;
	height:     100% !important;
	background: #1a1a1a !important;
}

.evl-featured__play {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	background: none !important;
	border: none !important;
	cursor: pointer !important;
	padding: 0 !important;
	transition: opacity 0.2s !important;
	z-index: 1 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	min-height: 0 !important;
	min-width: 0 !important;
}

.evl-featured__play:hover {
	opacity: 0.8 !important;
	background: none !important;
	box-shadow: none !important;
}

.evl-featured--playing .evl-featured__play {
	display: none;
}

.evl-featured__duration {
	position: absolute;
	bottom: 12px;
	right: 12px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 500;
	padding: 3px 8px;
	border-radius: 4px;
	z-index: 1;
}

.evl-featured--playing .evl-featured__duration {
	display: none;
}

/* Info sidebar */

.evl-featured__info {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #fff;
}

.evl-featured__badge {
	display: inline-block;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 3px 8px;
	border-radius: 3px;
	margin-bottom: 0.75rem;
	align-self: flex-start;
}

#evl-root .evl-featured__title,
#evl-root h2.evl-featured__title,
.evl-shortcode-wrap h2.evl-featured__title {
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	padding: 0;
	color: #fff;
	line-height: 1.3;
	border: none;
	letter-spacing: normal;
	text-transform: none;
}

.evl-featured__excerpt {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.7);
	margin: 0 0 0.75rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.evl-featured__meta {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 0.5rem;
}

#evl-root .evl-featured__source,
#evl-root a.evl-featured__source,
.evl-shortcode-wrap a.evl-featured__source {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
	box-shadow: none;
	background: none;
	border: none;
	padding: 0;
}

#evl-root .evl-featured__source:hover,
#evl-root a.evl-featured__source:hover,
.evl-shortcode-wrap a.evl-featured__source:hover {
	color: #fff;
	text-decoration: none;
}

/* ---------------------------------------------------------------
   Modal
--------------------------------------------------------------- */

.evl-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.evl-modal[hidden] {
	display: none;
}

.evl-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
}

.evl-modal__container {
	position: relative;
	width: 90vw;
	max-width: 960px;
	z-index: 1;
}

.evl-modal .evl-modal__close {
	position: absolute !important;
	top: -40px !important;
	right: 0 !important;
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	color: #fff !important;
	font-size: 2rem !important;
	cursor: pointer !important;
	line-height: 1 !important;
	padding: 4px 8px !important;
	min-height: 0 !important;
	min-width: 0 !important;
	box-shadow: none !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	border-radius: 0 !important;
	outline: none !important;
}

.evl-modal .evl-modal__close:hover,
.evl-modal .evl-modal__close:focus,
.evl-modal .evl-modal__close:active {
	color: #ccc !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
	outline: none !important;
}

.evl-modal__content {
	position:      relative !important;
	width:         100% !important;
	padding-top:   56.25% !important; /* 16:9 */
	background:    #000 !important;
	border-radius: 25px 25px 0 0 !important;
	overflow:      hidden !important;
	margin:        0 !important;
}

.evl-modal__content iframe,
.evl-modal__content video {
	position: absolute !important;
	top:      0 !important;
	left:     0 !important;
	width:    100% !important;
	height:   100% !important;
	border:   0 !important;
	margin:   0 !important;
	padding:  0 !important;
	max-width: none !important;
}

/* Modal info bar */

.evl-modal__info {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1rem;
	background: #1a1a1a;
	border-radius: 0 0 25px 25px;
	min-height: 44px;
}

.evl-modal__title {
	color: #fff;
	font-size: 0.95rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}

.evl-modal__details {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-shrink: 0;
}

.evl-modal__duration {
	color: #aaa;
	font-size: 0.85rem;
	font-weight: 500;
}

.evl-modal__separator {
	color: #555;
	font-size: 0.85rem;
}

.evl-modal .evl-modal__source-link,
a.evl-modal__source-link {
	color:           #aaa !important;
	font-size:       0.85rem !important;
	text-decoration: none !important;
	display:         inline-flex !important;
	align-items:     center !important;
	gap:             4px !important;
	white-space:     nowrap !important;
	transition:      color 0.15s !important;
	box-shadow:      none !important;
	background:      none !important;
	border:          none !important;
	padding:         0 !important;
	text-shadow:     none !important;
	font-weight:     500 !important;
}

.evl-modal .evl-modal__source-link:hover,
a.evl-modal__source-link:hover {
	color:           #fff !important;
	text-decoration: none !important;
	background:      none !important;
	box-shadow:      none !important;
}

.evl-modal__source-link svg {
	vertical-align: middle;
}

/* ---------------------------------------------------------------
   Grid Container & Loading Overlay
--------------------------------------------------------------- */

.evl-grid-container {
	position: relative;
}

.evl-loading-overlay {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 120px;
	background: rgba(245, 245, 245, 0.7);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.evl-loading-overlay[hidden] {
	display: none;
}

.evl-loading-overlay__spinner {
	display: block;
	width: 36px;
	height: 36px;
	border: 3px solid #e0e0e0;
	border-top-color: #4B6568;
	border-radius: 50%;
	animation: evl-spin 0.65s linear infinite;
}

/* ---------------------------------------------------------------
   Card Drop-In Animation
--------------------------------------------------------------- */

@keyframes evl-drop-in {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.evl-video-grid--animate > .evl-video-card {
	animation: evl-drop-in 0.4s ease-out both;
}

/* Stagger: each card delays slightly more than the previous */
.evl-video-grid--animate > .evl-video-card:nth-child(1)  { animation-delay: 0ms; }
.evl-video-grid--animate > .evl-video-card:nth-child(2)  { animation-delay: 50ms; }
.evl-video-grid--animate > .evl-video-card:nth-child(3)  { animation-delay: 100ms; }
.evl-video-grid--animate > .evl-video-card:nth-child(4)  { animation-delay: 140ms; }
.evl-video-grid--animate > .evl-video-card:nth-child(5)  { animation-delay: 180ms; }
.evl-video-grid--animate > .evl-video-card:nth-child(6)  { animation-delay: 220ms; }
.evl-video-grid--animate > .evl-video-card:nth-child(7)  { animation-delay: 250ms; }
.evl-video-grid--animate > .evl-video-card:nth-child(8)  { animation-delay: 280ms; }
.evl-video-grid--animate > .evl-video-card:nth-child(9)  { animation-delay: 310ms; }
.evl-video-grid--animate > .evl-video-card:nth-child(10) { animation-delay: 340ms; }
.evl-video-grid--animate > .evl-video-card:nth-child(11) { animation-delay: 360ms; }
.evl-video-grid--animate > .evl-video-card:nth-child(12) { animation-delay: 380ms; }

/* Cards loaded via AJAX get a class-based animation */
.evl-video-card--entering {
	animation: evl-drop-in 0.35s ease-out both;
}

/* Prefers reduced motion — respect accessibility */
@media (prefers-reduced-motion: reduce) {
	.evl-video-grid--animate > .evl-video-card,
	.evl-video-card--entering {
		animation: none;
	}
}

/* ---------------------------------------------------------------
   Load More / Infinite Scroll
--------------------------------------------------------------- */

.evl-load-more {
	margin-top: 2rem;
	text-align: center;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.evl-load-more[hidden] {
	display: none;
}

/* Load-more button styling comes from .eti_btn theme component. */

.evl-load-more__btn[hidden] {
	display: none;
}

.evl-load-more__btn-spinner,
.evl-btn-spinner {
	display: inline-block !important;
	width: 14px !important;
	height: 14px !important;
	border: 2px solid rgba(0, 0, 0, 0.15) !important;
	border-top-color: #4B6568 !important;
	border-radius: 50% !important;
	animation: evl-spin 0.65s linear infinite !important;
	vertical-align: middle !important;
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

.evl-load-more__btn-spinner {
	width: 18px !important;
	height: 18px !important;
}

.evl-btn-spinner-overlay {
	position: absolute !important;
	inset: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(255, 255, 255, 0.7) !important;
	border-radius: inherit !important;
	z-index: 1 !important;
}

.evl-load-more__spinner {
	display: inline-block;
	width: 28px;
	height: 28px;
	border: 3px solid #e0e0e0;
	border-top-color: #4B6568;
	border-radius: 50%;
	animation: evl-spin 0.7s linear infinite;
}

.evl-load-more__spinner[hidden] {
	display: none;
}

@keyframes evl-spin {
	to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------
   No Videos Message
--------------------------------------------------------------- */

.evl-no-videos {
	text-align: center;
	padding: 3rem 1rem;
	color: #606060;
	font-size: 1rem;
}

/* ---------------------------------------------------------------
   Playlist Embed — Shared
--------------------------------------------------------------- */

.evl-playlist-embed {
	border-radius: 25px !important;
	overflow:      hidden !important;
	background:    #1a1a1a !important;
	max-width:     100% !important;
	margin:        0 !important;
	padding:       0 !important;
}

.evl-playlist-embed *,
.evl-playlist-embed *::before,
.evl-playlist-embed *::after {
	box-sizing: border-box;
}

.evl-playlist-embed button {
	font-family: inherit !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	cursor: pointer !important;
	min-height: 0 !important;
	min-width: 0 !important;
	color: inherit !important;
	outline: none !important;
}

.evl-playlist-embed__media {
	position:    relative !important;
	width:       100% !important;
	padding-top: 56.25% !important;
	background:  #000 !important;
	overflow:    hidden !important;
	margin:      0 !important;
}

.evl-playlist-embed__media iframe,
.evl-playlist-embed__media video {
	position:  absolute !important;
	top:       0 !important;
	left:      0 !important;
	width:     100% !important;
	height:    100% !important;
	border:    0 !important;
	margin:    0 !important;
	padding:   0 !important;
	max-width: none !important;
}

.evl-playlist-embed__poster {
	position:      absolute !important;
	top:           0 !important;
	left:          0 !important;
	width:         100% !important;
	height:        100% !important;
	object-fit:    cover !important;
	border-radius: 0 !important;
	margin:        0 !important;
	padding:       0 !important;
}

.evl-playlist-embed__play-btn {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	z-index: 1;
	transition: opacity 150ms !important;
}

.evl-playlist-embed__play-btn:hover {
	opacity: 0.8 !important;
}

.evl-playlist-embed--playing .evl-playlist-embed__poster,
.evl-playlist-embed--playing .evl-playlist-embed__play-btn {
	display: none;
}

.evl-playlist-embed__now-playing {
	padding: 0.85rem 1rem;
	font-size: 1.15rem;
	font-weight: 700;
	color: #fff;
	background: #111;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.evl-playlist-embed--carousel .evl-playlist-embed__now-playing {
	color: #333;
	font-size: 1.2rem;
	background: rgba(255, 255, 255, 0.35);
	padding: 0.9rem 1rem;
}

/* ---------------------------------------------------------------
   Playlist Embed — Sidebar Layout
--------------------------------------------------------------- */

.evl-playlist-embed--sidebar {
	display: flex;
	flex-direction: column;
}

@media (min-width: 768px) {
	.evl-playlist-embed--sidebar {
		display: grid;
		grid-template-columns: 1fr 320px;
	}
}

.evl-playlist-embed__sidebar {
	display: flex;
	flex-direction: column;
	background: #4B6568;
	min-height: 0;
	max-height: 450px;
}

.evl-playlist-embed__sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.65rem 0.85rem;
	background: rgba(0, 0, 0, 0.15);
}

.evl-playlist-embed__sidebar-title {
	font-size: 0.88rem;
	font-weight: 700;
	color: #fff;
}

.evl-playlist-embed__sidebar-count {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.6);
}

.evl-playlist-embed__list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow-y: auto;
	flex: 1;
}

.evl-playlist-embed__item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.85rem;
	cursor: pointer;
	transition: background 150ms;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.evl-playlist-embed__item:hover {
	background: rgba(255, 255, 255, 0.08);
}

.evl-playlist-embed__item--active {
	background: rgba(0, 0, 0, 0.2);
	border-left: 3px solid #fff;
}

.evl-playlist-embed__item-thumb {
	position:      relative !important;
	width:         72px !important;
	height:        40px !important;
	flex-shrink:   0 !important;
	border-radius: 3px !important;
	overflow:      hidden !important;
	background:    #333 !important;
	margin:        0 !important;
	padding:       0 !important;
}

.evl-playlist-embed__item-thumb img {
	width:         100% !important;
	height:        100% !important;
	object-fit:    cover !important;
	display:       block !important;
	border-radius: 0 !important;
	margin:        0 !important;
	padding:       0 !important;
}

.evl-playlist-embed__item-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 0.7rem;
	background: rgba(0, 0, 0, 0.35);
	opacity: 0;
	transition: opacity 150ms;
}

.evl-playlist-embed__item:hover .evl-playlist-embed__item-play {
	opacity: 1;
}

.evl-playlist-embed__item--active .evl-playlist-embed__item-play {
	opacity: 1;
	background: rgba(0, 0, 0, 0.5);
}

.evl-playlist-embed__item-info {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.evl-playlist-embed__item-title {
	font-size: 0.78rem;
	font-weight: 500;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.evl-playlist-embed__item-duration {
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.5);
}

/* ---------------------------------------------------------------
   Playlist Embed — Carousel Layout
--------------------------------------------------------------- */

.evl-playlist-embed--carousel {
	display: flex;
	flex-direction: column;
	background: transparent;
}

.evl-playlist-embed__player--full .evl-playlist-embed__media {
	border-radius: 25px 25px 0 0;
}

.evl-playlist-embed__carousel {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: rgba(255, 255, 255, 0.35);
	padding: 0.75rem 0 0.5rem;
}

/* Viewport with edge fade masks */

.evl-playlist-embed__carousel-viewport {
	position: relative;
	overflow: hidden;
}

.evl-playlist-embed__carousel-viewport::before,
.evl-playlist-embed__carousel-viewport::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50px;
	z-index: 2;
	pointer-events: none;
}

.evl-playlist-embed__carousel-viewport::before {
	left: 0;
	background: linear-gradient(to right, rgba(255, 255, 255, 0.35), transparent);
}

.evl-playlist-embed__carousel-viewport::after {
	right: 0;
	background: linear-gradient(to left, rgba(255, 255, 255, 0.35), transparent);
}

.evl-playlist-embed__carousel-track {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 0.5rem 0 0.5rem 2rem;
	scroll-behavior: smooth;
}

.evl-playlist-embed__carousel-track::-webkit-scrollbar {
	display: none;
}

/* End spacer — overflow containers eat padding-right, so use a pseudo-element */
.evl-playlist-embed__carousel-track::after {
	content: '';
	flex-shrink: 0;
	width: 2rem;
}

/* Arrow controls below the track */

.evl-playlist-embed__carousel-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.4rem 0 0;
}

.evl-playlist-embed__carousel-prev,
.evl-playlist-embed__carousel-next {
	width: 36px !important;
	height: 36px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #555 !important;
	background: rgba(0, 0, 0, 0.06) !important;
	border-radius: 50% !important;
	transition: all 150ms ease-out !important;
}

.evl-playlist-embed__carousel-prev:hover,
.evl-playlist-embed__carousel-next:hover {
	color: #030303 !important;
	background: rgba(0, 0, 0, 0.12) !important;
	box-shadow: rgba(99, 99, 99, 0.15) 0px 2px 6px 0px !important;
}

.evl-playlist-embed__carousel-item {
	position: relative;
	flex-shrink: 0;
	width: 160px;
	border-radius: 15px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.6;
	transform: scale(1);
	transition: opacity 250ms ease-out, transform 250ms ease-out, box-shadow 250ms ease-out;
}

.evl-playlist-embed__carousel-item:hover {
	opacity: 0.9;
	transform: scale(1.03);
	box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 12px 0px;
}

.evl-playlist-embed__carousel-item--active {
	opacity: 1;
	transform: scale(1.06);
	box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 16px 0px;
}

.evl-playlist-embed__carousel-thumb {
	position:   relative !important;
	width:      100% !important;
	height:     90px !important;
	overflow:   hidden !important;
	background: #ddd !important;
	margin:     0 !important;
	padding:    0 !important;
}

.evl-playlist-embed__carousel-thumb img {
	width:         100% !important;
	height:        100% !important;
	object-fit:    cover !important;
	display:       block !important;
	border-radius: 0 !important;
	margin:        0 !important;
	padding:       0 !important;
}

.evl-playlist-embed__carousel-duration {
	position: absolute;
	bottom: 4px;
	right: 4px;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 0.65rem;
	padding: 1px 5px;
	border-radius: 3px;
	line-height: 1.4;
}

.evl-playlist-embed__carousel-title {
	padding: 0.65rem 0.85rem;
	font-size: .92rem;
	font-weight: 600;
	color: #333;
	line-height: 1.35;
	background: rgb(212, 206, 197);
	/* Fixed 2-line height so all cards match */
	height: calc(0.78rem * 1.35 * 2 + 0.9rem);
	display: flex;
	align-items: center;
	/* Inner span handles the clamping */
}

.evl-playlist-embed__carousel-title-text {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	width: 100%;
}