/* ==========================================================================
   EZ Youtube Plugin — Frontend Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout wrapper
   -------------------------------------------------------------------------- */
.ez-yt-layout {
	display: flex;
	gap: 2rem;
	align-items: flex-start;
	width: 100%;
	box-sizing: border-box;
	font-family: 'Cairo', 'Segoe UI', Arial, sans-serif;
}

/*
 * RTL LAYOUT EXPLAINED
 * --------------------
 * When `direction: rtl` is set on a flex-row container the browser places
 * items from RIGHT to LEFT.  That means the first DOM element (Player) lands
 * on the RIGHT and the second (List) lands on the LEFT — exactly what we want.
 *
 * We must NOT add flex-direction:row-reverse or swap `order` values here:
 * either of those would double-reverse the already-reversed axis and put the
 * player back on the left.
 *
 * The same cascade applies inside each .ez-yt-item card:
 *   – Thumb (first in DOM) → RIGHT  ✓
 *   – Info text (second)   → LEFT, right-aligned  ✓
 */
.ez-yt-layout.ez-yt-rtl {
	direction: rtl;
}

/* --------------------------------------------------------------------------
   Player panel (sticky)
   -------------------------------------------------------------------------- */
.ez-yt-player {
	flex: 1.2;
	position: sticky;
	top: 100px; /* overridden by the Elementor Layout slider */
	min-width: 0;
}

.ez-yt-iframe-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
}

.ez-yt-iframe-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

.ez-yt-player-title {
	font-size: 1.1em;
	font-weight: 700;
	color: #1E6264;
	margin: 1rem 0 0.25rem;
	line-height: 1.4;
}

.ez-yt-player-meta {
	font-size: 0.85em;
	color: #888;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Episode list panel
   -------------------------------------------------------------------------- */
.ez-yt-list {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Episode card
   -------------------------------------------------------------------------- */
.ez-yt-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: #fff;
	border: 1.5px solid #e0e0e0;
	border-radius: 12px;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
	outline: none;
}

.ez-yt-item:hover {
	border-color: #1E6264;
	background-color: #1E626408;
	box-shadow: 0 2px 8px rgba(30, 98, 100, 0.08);
}

.ez-yt-item.active {
	border-color: #1E6264;
	background-color: #1E626410;
}

.ez-yt-item:focus-visible {
	box-shadow: 0 0 0 3px rgba(30, 98, 100, 0.3);
}

/*
 * RTL cards: `direction: rtl` is inherited from .ez-yt-layout.ez-yt-rtl.
 * The .ez-yt-item flex row already flows right-to-left, so Thumb lands on
 * the RIGHT and Info lands on the LEFT — no extra rules needed.
 * We only add text-align:right so the episode text renders from the right edge.
 */
.ez-yt-layout.ez-yt-rtl .ez-yt-info {
	text-align: right;
}

/* --------------------------------------------------------------------------
   Play icon thumb
   -------------------------------------------------------------------------- */
.ez-yt-thumb {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	background: #1E6264;
	color: #fff;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ez-yt-thumb svg { display: block; }

/* --------------------------------------------------------------------------
   Episode info text block
   -------------------------------------------------------------------------- */
.ez-yt-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.ez-yt-ep-num {
	font-size: 0.68em;
	font-weight: 700;
	color: #1E6264;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ez-yt-item-title {
	display: block;
	font-size: 0.95em;
	font-weight: 700;
	color: #222;
	line-height: 1.35;
	word-break: break-word;
}

.ez-yt-ep-meta {
	font-size: 0.8em;
	color: #888;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet */
@media (max-width: 900px) {
	.ez-yt-layout { gap: 1.25rem; }

	.ez-yt-thumb {
		width: 46px;
		height: 46px;
	}

	.ez-yt-item-title   { font-size: 0.88em; }
	.ez-yt-ep-num       { font-size: 0.63em; }
	.ez-yt-player-title { font-size: 1em; }
}

/* Mobile — stack vertically (direction:rtl with flex-direction:column still
   stacks top-to-bottom, so no reset needed — player is first in DOM) */
@media (max-width: 650px) {
	.ez-yt-layout {
		flex-direction: column;
	}

	.ez-yt-player {
		position: static;
		width: 100%;
	}

	.ez-yt-list { width: 100%; }
}

/* Small phones */
@media (max-width: 400px) {
	.ez-yt-item { padding: 0.75rem; gap: 0.75rem; }

	.ez-yt-thumb {
		width: 40px;
		height: 40px;
	}

	.ez-yt-thumb svg { width: 18px; height: 18px; }

	.ez-yt-item-title   { font-size: 0.82em; }
	.ez-yt-ep-meta      { font-size: 0.72em; }
	.ez-yt-player-title { font-size: 0.95em; }
}