/* NR YouTube Feed Pro — Frontend CSS v1.1 */

/* =====================================================================
   CSS Variables — overridable by Elementor selectors
   ===================================================================== */
.nrytpro-feed {
	--nrytpro-cols: 2;
	--nrytpro-gap: 16px;
	--nrytpro-play-bg: #ff0000;
	--nrytpro-play-fg: #ffffff;
	--nrytpro-radius: 12px;
	--nrytpro-duration: 0.3s;
	--nrytpro-card-bg: #1a1a1a;
	--nrytpro-title-color: #ffffff;
	--nrytpro-meta-color: rgba(255,255,255,0.55);

	position: relative;
	width: 100%;
	/* CRITICAL: prevents carousel overflow outside container */
	overflow: hidden;

	/* Reset any inherited pink/color from theme */
	background-color: transparent;
}

/* Remove any box-model issues */
.nrytpro-feed *, .nrytpro-feed *::before, .nrytpro-feed *::after {
	box-sizing: border-box;
}

/* =====================================================================
   Dark Mode
   ===================================================================== */
.nrytpro-feed.nrytpro-dark {
	--nrytpro-card-bg: #1a1a1a;
	--nrytpro-title-color: #f0f0f0;
	--nrytpro-meta-color: rgba(255,255,255,0.5);
	background: #111;
	border-radius: 8px;
	padding: 16px;
}

@media (prefers-color-scheme: dark) {
	.nrytpro-feed.nrytpro-dark-auto {
		--nrytpro-card-bg: #1a1a1a;
		--nrytpro-title-color: #f0f0f0;
		--nrytpro-meta-color: rgba(255,255,255,0.5);
	}
}

/* =====================================================================
   Track
   ===================================================================== */
.nrytpro-layout-carousel .nrytpro-track {
	display: flex;
	gap: var(--nrytpro-gap, 16px);
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.nrytpro-layout-grid .nrytpro-track {
	display: grid;
	gap: var(--nrytpro-gap, 16px);
	grid-template-columns: repeat(var(--nrytpro-cols, 3), 1fr);
}

.nrytpro-layout-list .nrytpro-track {
	display: flex;
	flex-direction: column;
	gap: var(--nrytpro-gap, 16px);
}

.nrytpro-layout-masonry .nrytpro-track {
	column-count: var(--nrytpro-cols, 3);
	column-gap: var(--nrytpro-gap, 16px);
}

.nrytpro-layout-masonry .nrytpro-item {
	break-inside: avoid;
	margin-bottom: var(--nrytpro-gap, 16px);
}

/* =====================================================================
   Item / Card — NO pink, NO unwanted color
   ===================================================================== */
.nrytpro-layout-carousel .nrytpro-item {
	flex-shrink: 0;
	/* Initial width via CSS — prevents flash of wrong size before JS runs */
	width: calc((100% - (var(--nrytpro-gap, 16px) * (var(--nrytpro-cols, 3) - 1))) / var(--nrytpro-cols, 3));
	min-width: calc((100% - (var(--nrytpro-gap, 16px) * (var(--nrytpro-cols, 3) - 1))) / var(--nrytpro-cols, 3));
}

.nrytpro-item {
	background: var(--nrytpro-card-bg, #1a1a1a);
	border-radius: var(--nrytpro-radius, 12px);
	overflow: hidden;
	/* ONLY transform + shadow transition — never background (causes pink flash) */
	transition:
		transform var(--nrytpro-duration, 0.3s) ease,
		box-shadow var(--nrytpro-duration, 0.3s) ease;
	color: inherit;
}

/* ALL hover states — override any Elementor gradient with !important */
.nrytpro-item:hover,
.nrytpro-hover-lift .nrytpro-item:hover,
.nrytpro-hover-scale .nrytpro-item:hover,
.nrytpro-hover-glow .nrytpro-item:hover,
.nrytpro-hover-tilt .nrytpro-item:hover {
	background-image: none !important;
	/* background-color is allowed (set via Elementor card_hover_bg control) */
}

.nrytpro-hover-lift .nrytpro-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.nrytpro-hover-scale .nrytpro-item:hover {
	transform: scale(1.03);
}

.nrytpro-hover-glow .nrytpro-item:hover {
	box-shadow: 0 0 24px rgba(255, 0, 0, 0.4);
}

.nrytpro-hover-tilt .nrytpro-item:hover {
	transform: perspective(600px) rotateY(3deg) translateY(-3px);
}

/* List layout */
.nrytpro-layout-list .nrytpro-item {
	display: flex;
	align-items: stretch;
	background: var(--nrytpro-card-bg, #f6f7f7);
	border-radius: 8px;
}

.nrytpro-layout-list .nrytpro-item:hover {
	background-image: none !important;
}


.nrytpro-layout-list .nrytpro-thumb-wrap { flex-shrink: 0; width: 220px; }
.nrytpro-layout-list .nrytpro-info {
	flex: 1;
	padding: 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* =====================================================================
   Thumbnail
   ===================================================================== */
.nrytpro-thumb-wrap {
	position: relative;
	overflow: hidden;
	/* No background — prevents pink/dark showing behind thumbnail */
	background: transparent;
	display: block;
}

.nrytpro-ratio-16-9 { aspect-ratio: 16 / 9; }
.nrytpro-ratio-9-16 { aspect-ratio: 9 / 16; }
.nrytpro-ratio-1-1  { aspect-ratio: 1; }
.nrytpro-ratio-4-3  { aspect-ratio: 4 / 3; }
.nrytpro-ratio-3-2  { aspect-ratio: 3 / 2; }
.nrytpro-ratio-5-4  { aspect-ratio: 5 / 4; }
.nrytpro-ratio-21-9 { aspect-ratio: 21 / 9; }
.nrytpro-ratio-auto { aspect-ratio: auto; }

.nrytpro-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* NO color transition — prevents pink flash on hover */
	transition: transform var(--nrytpro-duration, 0.3s) ease;
	/* Ensure no background bleeds through */
	background-color: transparent !important;
}

/* Scale on hover — only transform, nothing else */
.nrytpro-item:hover .nrytpro-thumb {
	transform: scale(1.05);
	background-color: transparent !important;
}

.nrytpro-thumb-wrap.nrytpro-playing .nrytpro-thumb { display: none; }
.nrytpro-thumb-wrap.nrytpro-playing .nrytpro-overlay { display: none; }
.nrytpro-thumb-wrap.nrytpro-playing .nrytpro-play-btn { display: none; }

/* Inline iframe — fills thumb-wrap completely */
.nrytpro-thumb-wrap.nrytpro-playing {
	position: relative !important;
}

.nrytpro-thumb-wrap.nrytpro-playing iframe {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
	display: block !important;
	z-index: 10;
}

/* Overlay — starts transparent, Elementor selectors control this */
.nrytpro-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	transition: opacity var(--nrytpro-duration, 0.3s) ease;
	/* DEFAULT: fully transparent — prevents pink Elementor default gradient showing */
	background: transparent !important;
	background-image: none !important;
	z-index: 1;
}

/* Type badges */
.nrytpro-type-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	z-index: 4;
	line-height: 1.6;
}

.nrytpro-badge-short    { background: #ff0000; color: #fff; }
.nrytpro-badge-live     { background: #cc0000; color: #fff; }
.nrytpro-badge-premiere { background: #6441a5; color: #fff; }

.nrytpro-duration {
	position: absolute;
	bottom: 6px;
	right: 6px;
	background: rgba(0, 0, 0, 0.82);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 3px;
	pointer-events: none;
	z-index: 4;
}

/* =====================================================================
   Play Button — sits above overlay
   ===================================================================== */
.nrytpro-play-btn {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	cursor: pointer;
	padding: 0;
	z-index: 3;
	color: inherit !important;
	text-decoration: none !important;
	box-shadow: none !important;
	outline: none;
}

/* Override theme button:hover pink */
.nrytpro-play-btn:hover,
.nrytpro-play-btn:focus,
.nrytpro-play-btn:active {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: inherit !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.nrytpro-play-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.5));
	transition: transform 0.2s ease, filter 0.2s ease;
	pointer-events: none;
}

.nrytpro-play-icon svg { width: 60px; height: auto; }

.nrytpro-play-btn:hover .nrytpro-play-icon {
	transform: scale(1.15);
	filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.75));
}

/* Play style variants */
.nrytpro-play-white .nrytpro-play-icon svg path:first-child { fill: rgba(255,255,255,0.92); }
.nrytpro-play-white .nrytpro-play-icon svg path:last-child  { fill: #000; }
.nrytpro-play-dark  .nrytpro-play-icon svg path:first-child { fill: rgba(0,0,0,0.72); }
.nrytpro-play-dark  .nrytpro-play-icon svg path:last-child  { fill: #fff; }

/* Hover-only visibility */
.nrytpro-play-vis-hover .nrytpro-play-icon        { opacity: 0; transition: opacity 0.2s; }
.nrytpro-play-vis-hover .nrytpro-item:hover .nrytpro-play-icon { opacity: 1; }

/* =====================================================================
   Info Area
   ===================================================================== */
.nrytpro-info { padding: 10px 12px 12px; }

.nrytpro-title {
	margin: 0 0 6px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--nrytpro-title-color, #fff);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nrytpro-desc {
	font-size: 12px;
	color: var(--nrytpro-meta-color, rgba(255,255,255,0.55));
	margin: 0 0 6px;
	line-height: 1.4;
}

.nrytpro-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 4px;
}

.nrytpro-date,
.nrytpro-channel,
.nrytpro-views,
.nrytpro-likes {
	font-size: 11px;
	color: var(--nrytpro-meta-color, rgba(255,255,255,0.55));
	display: inline-flex;
	align-items: center;
	gap: 3px;
}

/* Buttons */
.nrytpro-btns {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap;
}

.nrytpro-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 14px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	transition: opacity 0.2s, transform 0.15s;
	cursor: pointer;
	border: none;
	line-height: 1;
}

.nrytpro-btn:hover { opacity: 0.85; transform: translateY(-1px); }

.nrytpro-btn-watch { background: #ff0000; color: #fff; }
.nrytpro-btn-sub   { background: #fff; color: #111; border: 1px solid #ccc; }

/* =====================================================================
   Carousel Arrows
   ===================================================================== */
.nrytpro-prev,
.nrytpro-next {
	position: absolute;
	top: 38%;
	transform: translateY(-50%);
	z-index: 10;
	background: rgba(0, 0, 0, 0.55);
	border: none;
	color: #fff;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.2s, opacity 0.2s, transform 0.2s;
	line-height: 1;
}

.nrytpro-prev:hover,
.nrytpro-next:hover {
	background: rgba(0, 0, 0, 0.9);
	transform: translateY(-50%) scale(1.05);
}

.nrytpro-prev svg, .nrytpro-next svg { width: 18px; height: 18px; }

/* Inner mode: arrows positioned inside feed */
.nrytpro-arrows-inner .nrytpro-prev,
.nrytpro-prev { left: 8px; }

.nrytpro-arrows-inner .nrytpro-next,
.nrytpro-next { right: 8px; }

/* Outer mode: arrows positioned on wrapper */
.nrytpro-arrows-outer .nrytpro-prev,
.nrytpro-arrows-outer .nrytpro-next {
	/* Override feed-relative positioning — now relative to wrapper */
	position: absolute;
}

/* =====================================================================
   Carousel Dots
   ===================================================================== */
.nrytpro-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
	flex-wrap: wrap;
}

.nryt-dot, .nrytpro-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: #ccc;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s, transform 0.2s;
}

.nryt-dot--active, .nrytpro-dot--active {
	background: #ff0000;
	transform: scale(1.3);
}

/* =====================================================================
   Load More
   ===================================================================== */
.nrytpro-load-more-wrap { text-align: center; margin-top: 24px; }

.nrytpro-load-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 32px;
	background: #ff0000;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.2s;
}

.nrytpro-load-more-btn:hover    { opacity: 0.85; }
.nrytpro-load-more-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* =====================================================================
   Lightbox
   ===================================================================== */
.nrytpro-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nrytpro-lb-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
}

.nrytpro-lb-inner {
	position: relative;
	z-index: 1;
	width: 92vw;
	max-width: 960px;
}

.nrytpro-lb-close {
	position: absolute;
	top: -48px;
	right: 0;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 6px;
	opacity: 0.85;
	display: flex;
	align-items: center;
	border-radius: 50%;
	transition: opacity 0.2s, background 0.2s;
}

.nrytpro-lb-close:hover { opacity: 1; background: rgba(255,255,255,0.15); }
.nrytpro-lb-close svg   { width: 24px; height: 24px; }

.nrytpro-lb-title {
	color: rgba(255,255,255,0.85);
	font-size: 14px;
	margin-bottom: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nrytpro-lb-embed iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: none;
	border-radius: 8px;
	display: block;
}

/* =====================================================================
   Elementor Editor Placeholder
   ===================================================================== */
.nrytpro-placeholder {
	padding: 40px 32px;
	background: #f6f7f7;
	border: 2px dashed #c3c4c7;
	border-radius: 8px;
	text-align: center;
	color: #787c82;
}

.nrytpro-placeholder-icon { font-size: 48px; margin-bottom: 8px; color: #c3c4c7; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1024px) {
	.nrytpro-layout-grid .nrytpro-track { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.nrytpro-layout-grid .nrytpro-track    { grid-template-columns: 1fr; }
	.nrytpro-layout-list .nrytpro-thumb-wrap { width: 130px; }
	.nrytpro-prev, .nrytpro-next           { width: 34px; height: 34px; }
	.nrytpro-prev svg, .nrytpro-next svg   { width: 14px; height: 14px; }
	.nrytpro-lb-inner  { width: 98vw; }
	.nrytpro-lb-close  { top: -40px; }
}

/* =====================================================================
   RTL
   ===================================================================== */
[dir="rtl"] .nrytpro-prev { left: auto; right: 8px; }
[dir="rtl"] .nrytpro-next { right: auto; left: 8px; }
[dir="rtl"] .nrytpro-meta { flex-direction: row-reverse; }
[dir="rtl"] .nrytpro-type-badge { left: auto; right: 8px; }

===
   FILTER BAR
   ===================================================================== */
.nrytpro-filter-bar {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 20px;
}

.nrytpro-filter-btn {
	padding: 7px 18px;
	border: none;
	border-radius: 20px;
	background: #f0f0f0;
	color: #333;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s, color 0.2s, transform 0.15s;
	white-space: nowrap;
}

.nrytpro-filter-btn:hover { background: #e0e0e0; transform: translateY(-1px); }
.nrytpro-filter-btn.active { background: #ff0000; color: #fff; }

/* =====================================================================
   HOVER ANIMATIONS (prefix-class based)
   ===================================================================== */
.nrytpro-hover-lift .nrytpro-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 36px rgba(0,0,0,0.2);
}
.nrytpro-hover-scale .nrytpro-item:hover { transform: scale(1.04); }
.nrytpro-hover-glow  .nrytpro-item:hover { box-shadow: 0 0 30px rgba(255,0,0,0.5); }
.nrytpro-hover-tilt  .nrytpro-item:hover { transform: perspective(600px) rotateY(3deg) translateY(-3px); }

/* =====================================================================
   CRITICAL: Override Elementor default gradient (#f2295b pink)
   Elementor injects inline <style> with high specificity via {{WRAPPER}}
   We need !important on background-image for ALL states
   ===================================================================== */

/* Prevent any gradient on items — background-color is still allowed */
.nrytpro-feed .nrytpro-item,
.nrytpro-feed .nrytpro-item:hover,
.nrytpro-feed .nrytpro-item:focus,
.nrytpro-feed .nrytpro-item:active {
	background-image: none !important;
}

/* Prevent gradient on thumb-wrap and overlay */
.nrytpro-feed .nrytpro-thumb-wrap,
.nrytpro-feed .nrytpro-thumb-wrap:hover {
	background-image: none !important;
}

.nrytpro-feed .nrytpro-overlay,
.nrytpro-feed .nrytpro-item:hover .nrytpro-overlay {
	background-image: none !important;
	background-color: transparent !important;
}

/* Thumbnail itself — no background color ever */
.nrytpro-feed .nrytpro-thumb,
.nrytpro-feed .nrytpro-thumb:hover {
	background-color: transparent !important;
	background-image: none !important;
}

/* =====================================================================
   Carousel Wrapper
   ===================================================================== */
.nrytpro-wrapper {
	position: relative;
}

/* =====================================================================
   Arrow Position: Outer
   ===================================================================== */

/* Outer mode: overflow visible on feed, arrows positioned on wrapper */
.nrytpro-arrows-outer .nrytpro-wrapper {
	padding: 0 60px;
}

.nrytpro-arrows-outer .nrytpro-feed {
	overflow: hidden; /* Keep hidden for carousel */
}

.nrytpro-arrows-outer .nrytpro-prev {
	left: 0 !important;
}

.nrytpro-arrows-outer .nrytpro-next {
	right: 0 !important;
}

.nrytpro-filter-bar {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

.nrytpro-filter-bar button {
    font-size: 15px;
    margin: 10px;
    padding: 8px 30px;
}