/*
 * BeTube YouTube-style Home widget set styles.
 * Scoped entirely to the btp-yt-* classes rendered by:
 *   yt-navbar-widget.php, yt-sidebar-widget.php, yt-categories-bar-widget.php, yt-posts-widget.php
 * Color accents (--btp-yt-*) are emitted globally by themes/betube/assets/colors.php
 * (betubepro_load_head()) - the one place in this theme where Theme Options become CSS.
 * Surface tones below (page/card backgrounds) have no equivalent Theme Option, so they're fixed here
 * and, on the actual homepage body, are set instead via Elementor's own Section/Container background
 * control so the site owner can repaint them without touching code.
 */

/* ---------- Navbar ---------- */
.btp-yt-navbar {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 12px 24px;
	background: var(--btp-yt-nav-bg, #0f0f0f);
	color: var(--btp-yt-nav-link, #f1f1f1);
	position: sticky;
	top: 0;
	z-index: 999;
}
.btp-yt-navbar__left {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}
.btp-yt-navbar__menu-btn {
	background: transparent;
	border: 0;
	color: inherit;
	font-size: 18px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
}
.btp-yt-navbar__menu-btn:hover {
	background: rgba(255, 255, 255, 0.08);
}
.btp-yt-navbar__logo img {
	max-height: 28px;
	width: auto;
	display: block;
}
.btp-yt-navbar__search {
	flex: 1 1 auto;
	max-width: 640px;
	margin: 0 auto;
}
.btp-yt-navbar__search_ig {
	display: flex;
	align-items: stretch;
	height: 40px;
}
.btp-yt-navbar__search_input {
	flex: 1 1 auto;
	background: #121212;
	border: 3px solid var(--btp-yt-border, #303030);
	border-right: 0;
	border-radius: 20px 0 0 20px;
	padding: 0 16px;
	color: #f1f1f1;
	min-width: 0;
}
.btp-yt-navbar__search_input::placeholder {
	color: #909090;
}
.btp-yt-navbar__search_btn {
	background: #222;
	border: 1px solid var(--btp-yt-border, #303030);
	border-radius: 0 20px 20px 0;
	color: #f1f1f1;
	padding: 0 18px;
	cursor: pointer;
}
.btp-yt-navbar__right {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
	margin-left: auto;
}
/* Below tablet width, hamburger+logo and the account/upload buttons no longer fit on
   one row alongside a usable search box - wrap it onto its own full-width row right
   after them, instead of letting it overflow/get clipped off the edge of the screen. */
@media (max-width: 767.98px) {
	.btp-yt-navbar {
		flex-wrap: wrap;
		row-gap: 10px;
	}
	.btp-yt-navbar__search {
		order: 3;
		flex: 1 1 100%;
		max-width: 100%;
		margin: 0;
	}
}
.btp-yt-navbar__upload,
.btp-yt-navbar__signin {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 20px;
	text-decoration: none;
	font-size: 14px;
	white-space: nowrap;
}
.btp-yt-navbar__upload {
	background: var(--btp-yt-primary, #dc3545);
	color: #fff;
}
.btp-yt-navbar__upload:hover {
	opacity: 0.9;
	color: #fff;
}
.btp-yt-navbar__signin {
	border: 1px solid var(--btp-yt-border, #303030);
	color: var(--btp-yt-nav-link, #f1f1f1);
}
.btp-yt-navbar__account img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/*
 * Elementor's own auto-generated wrapper around this widget (class "elementor-widget-betube-yt-sidebar",
 * added automatically - no manual CSS class needed) is the actual flex item Elementor sizes at build time.
 * It has to be the thing that shrinks on collapse, not just the <aside> inside it, otherwise the
 * wrapper's original width just shows through as empty space next to the now-narrower <aside>.
 */
.elementor-widget-betube-yt-sidebar {
	flex: 0 0 240px !important;
	width: 240px !important;
	max-width: 240px !important;
	transition: flex-basis 0.25s ease, width 0.25s ease, max-width 0.25s ease;
}
body.btp-yt-sidebar-collapsed .elementor-widget-betube-yt-sidebar {
	flex: 0 0 72px !important;
	width: 72px !important;
	max-width: 72px !important;
}
/* ---------- Sidebar ---------- */
.btp-yt-sidebar {
	background: var(--btp-yt-nav-bg, #181818);
	width: 100%;
	padding: 20px 12px;
	position: sticky;
	top: 0;
	align-self: flex-start;
	max-height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
	box-sizing: border-box;
	border-right: 1px solid rgba(255, 255, 255, 0.06);
	scrollbar-width: thin;
}
.btp-yt-sidebar::-webkit-scrollbar {
	width: 6px;
}
.btp-yt-sidebar::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 3px;
}
/*
 * Opt-in utility: add the "btp-yt-main" CSS class (Advanced tab) to whatever
 * Elementor Container/Column holds the Categories Bar + Posts widgets, next to
 * the Sidebar in the same row. It forces that column to grow and fill whatever
 * width the sidebar frees up when collapsed, instead of staying a fixed width -
 * this is what makes the grid gain space exactly like youtube.com when its rail collapses.
 * !important is needed here because Elementor writes each column's own width as an
 * inline style (e.g. style="flex-basis:85%"), which otherwise wins over a plain class rule.
 */
.btp-yt-main {
	flex: 1 1 0% !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
}
body.btp-yt-sidebar-collapsed .btp-yt-sidebar {
	padding: 20px 8px;
}
body.btp-yt-sidebar-collapsed .btp-yt-sidebar span,
body.btp-yt-sidebar-collapsed .btp-yt-sidebar__heading {
	display: none;
}
body.btp-yt-sidebar-collapsed .btp-yt-sidebar__list li a {
	justify-content: center;
	padding: 12px 0;
	gap: 0;
}
body.btp-yt-sidebar-collapsed .btp-yt-sidebar__list li.is-active a {
	padding-left: 0;
}
.btp-yt-sidebar__list {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}
.btp-yt-sidebar__list li {
	margin-bottom: 4px;
}
.btp-yt-sidebar__list li a {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 11px 14px;
	border-radius: 10px;
	/* Paired with the sidebar's own background (--btp-yt-topbar-bg, the "Topbar Background"
	   option), so its text uses the matching "Navbar Link" option instead of a fixed color -
	   this is what keeps it legible whether that background ends up light or dark. */
	color: var(--btp-yt-nav-link, #f1f1f1);
	text-decoration: none;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
}
.btp-yt-sidebar__list li a i {
	width: 20px;
	text-align: center;
	flex: 0 0 auto;
	font-size: 15px;
}
.btp-yt-sidebar__list li a:hover {
	background: rgba(128, 128, 128, 0.16);
	color: var(--btp-yt-nav-link-hover, var(--btp-yt-nav-link, #f1f1f1));
}
.btp-yt-sidebar__list li.is-active a {
	background: rgba(255, 255, 255, 0.1);
	border-left: 3px solid var(--btp-yt-primary, #dc3545);
	padding-left: 11px;
}
/*
 * Site's existing Primary Menu (Appearance > Menus), rendered via the theme's own
 * betubePrimaryNav(). Its markup nests a <ul> inside a <ul> (theme behavior, not ours) -
 * so unlike the sidebar's own lists we deliberately do NOT set "ul" to display:flex here
 * (that combination is what caused the earlier navbar layout bug); every "ul" is just
 * reset to a plain block list and each link is styled directly, which is safe at any nesting depth.
 */
.btp-yt-sidebar__menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
/*
 * Only the top-level <ul> (a direct child of this wrapper) needs the centering fix below -
 * using ">" instead of a descendant selector keeps this from also matching the nested
 * ".dropdown-menu" <ul>, which must stay controlled by its own display:none/hover rules.
 * The theme's own betubePrimaryNav() hard-codes an "align-items-center" Bootstrap class
 * onto this <ul> (meant for a horizontal top navbar); combined with Bootstrap's
 * ".navbar-nav{display:flex;flex-direction:column}", that centers every <li>
 * horizontally instead of stacking them flush left like the rest of the sidebar.
 */
.btp-yt-sidebar__menu > ul {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	width: 100%;
}
.btp-yt-sidebar__menu li {
	margin-bottom: 4px;
	width: 100%;
}
.btp-yt-sidebar__menu a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	padding: 11px 14px !important;
	border-radius: 10px;
	color: var(--btp-yt-nav-link, #f1f1f1);
	text-decoration: none;
	font-size: 14px;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	box-sizing: border-box;
}
.btp-yt-sidebar__menu a:hover {
	background: rgba(128, 128, 128, 0.16);
	color: var(--btp-yt-nav-link-hover, var(--btp-yt-nav-link, #f1f1f1));
}
.btp-yt-sidebar__menu a i {
	width: 20px;
	margin-right: 20px;
	text-align: center;
	flex: 0 0 auto;
}
/*
 * Submenu items come from Bootstrap's dropdown component (wp_bootstrap_navwalker,
 * used site-wide by betubePrimaryNav()) - its default ".dropdown-menu" is a white,
 * absolutely-positioned floating panel, which is fine in the top navbar but reads
 * as a broken white box inside this narrow dark rail. Re-skinned to sit inline,
 * indented, as a natural continuation of the sidebar list instead of a popover.
 */
.btp-yt-sidebar__menu .dropdown-menu {
	position: static;
	float: none;
	display: none;
	/* A translucent overlay instead of a fixed hex - darkens a light sidebar background
	   and subtly lightens a dark one, so the "elevated panel" look holds either way. */
	background: rgba(0, 0, 0, 0.18);
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	padding: 4px;
	margin: 2px 0 6px 14px;
	min-width: 0;
}
.btp-yt-sidebar__menu .dropdown-menu a {
	padding: 9px 12px;
	font-size: 13px;
	color: var(--btp-yt-nav-link, #f1f1f1);
	opacity: 0.85;
	border-radius: 6px;
}
.btp-yt-sidebar__menu .dropdown-toggle::after {
	margin-left: 10px;
}
/* Open on hover (either the trigger or the panel itself) instead of requiring a click */
.btp-yt-sidebar__menu li.dropdown:hover > .dropdown-menu,
.btp-yt-sidebar__menu .dropdown-menu:hover,
.btp-yt-sidebar__menu .dropdown-menu.show {
	display: block;
}
body.btp-yt-sidebar-collapsed .btp-yt-sidebar__menu {
	display: none;
}
.btp-yt-sidebar__divider {
	height: 1px;
	background: var(--btp-yt-border, #303030);
	opacity: 0.5;
	margin: 14px 8px;
}
.btp-yt-sidebar__heading {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--btp-yt-nav-link, #909090);
	opacity: 0.6;
	margin: 4px 14px 8px;
}
@media (max-width: 991.98px) {
	.btp-yt-sidebar {
		display: none;
	}
}

/* ---------- Categories pill bar ---------- */
.btp-yt-catbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 24px;
}
.btp-yt-catbar__track {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.btp-yt-catbar__track::-webkit-scrollbar {
	display: none;
}
.btp-yt-catbar__pill {
	flex: 0 0 auto;
	padding: 8px 16px;
	border-radius: 8px;
	background: #272727;
	color: #f1f1f1;
	text-decoration: none;
	font-size: 14px;
	white-space: nowrap;
}
.btp-yt-catbar__pill:hover {
	background: #3a3a3a;
	color: #f1f1f1;
}
.btp-yt-catbar__pill.is-active {
	background: var(--btp-yt-primary, #dc3545);
	color: #fff;
}
.btp-yt-catbar__arrow {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 3px solid var(--btp-yt-border, #303030);
	background: #181818;
	color: #f1f1f1;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
}
@media (min-width: 768px) {
	.btp-yt-catbar__arrow {
		display: flex;
	}
}

/* ---------- Video cards ---------- */
.btp-yt-posts__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 24px 0;
	margin-bottom: 18px;
}
.btp-yt-posts__title {
	/* No color set here on purpose: this is a real <h4>, so it inherits the theme's own
	   global "h4{color:...}" rule (colors.php, from the H4 typography option) rather than
	   a fixed value - correct on both light and dark section backgrounds automatically. */
	font-size: 18px;
	font-weight: 700;
	margin: 0;
}
.btp-yt-posts__viewall {
	color: var(--btp-yt-primary, #dc3545);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
}
.btp-yt-posts__track {
	padding: 0 24px 32px;
}
.btp-yt-posts--grid .btp-yt-posts__track {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 28px 20px;
}
.btp-yt-posts--shelf .btp-yt-posts__track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.btp-yt-posts--shelf .btp-yt-posts__track::-webkit-scrollbar {
	display: none;
}
.btp-yt-posts--shelf .btp-yt-card {
	flex: 0 0 280px;
}
.btp-yt-posts__loadmore-wrap {
	display: flex;
	justify-content: center;
	padding: 4px 24px 32px;
}
/*
 * Uses Bootstrap's own .btn.btn-primary.btn-lg (already loaded site-wide and already
 * wired to the real "Primary color" Theme Option by the theme's colors.php) instead of
 * a custom button, so it automatically matches whatever accent color is configured.
 * Only the pill shape, hover/press motion, breathing glow, and spinner are ours.
 */
.btp-yt-posts__loadmore {
	border-radius: 28px;
	padding: 12px 36px;
	font-weight: 600;
	letter-spacing: 0.02em;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	animation: btpYtPulse 2.4s ease-in-out infinite;
}
.btp-yt-posts__loadmore:hover,
.btp-yt-posts__loadmore:focus {
	transform: translateY(-2px);
	animation-play-state: paused;
}
.btp-yt-posts__loadmore:active {
	transform: translateY(0);
}
.btp-yt-posts__loadmore:disabled {
	opacity: 0.75;
	cursor: default;
	transform: none;
	animation: none;
}
.btp-yt-posts__loadmore-spinner {
	display: none;
}
.btp-yt-posts__loadmore:disabled .btp-yt-posts__loadmore-spinner {
	display: inline-block;
}
@keyframes btpYtPulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.45);
	}
	50% {
		box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
	}
}
.btp-yt-card {
	display: block;
}
.btp-yt-card__thumb {
	display: block;
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #202020;
}
.btp-yt-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}
.btp-yt-card:hover .btp-yt-card__thumb img {
	transform: scale(1.06);
}
.btp-yt-card__duration,
.btp-yt-card__quality {
	position: absolute;
	bottom: 6px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	font-size: 12px;
	padding: 2px 6px;
	border-radius: 4px;
}
.btp-yt-card__duration {
	right: 6px;
}
.btp-yt-card__quality {
	left: 6px;
}
.btp-yt-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 28px;
	background: rgba(0, 0, 0, 0.25);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.btp-yt-card:hover .btp-yt-card__play {
	opacity: 1;
}
.btp-yt-card__body {
	display: flex;
	gap: 12px;
	margin-top: 12px;
}
.btp-yt-card__avatar img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.btp-yt-card__meta {
	min-width: 0;
}
.btp-yt-card__title {
	margin: 0 0 4px;
	font-size: 15px;
	line-height: 1.3;
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.btp-yt-card__title a {
	/* Inherits from the enclosing <h3> (this element), which already picks up the theme's
	   real "H3" heading-color option via colors.php's global "h3{color:...}" rule - so it
	   reads correctly whether the section background an admin chose in Elementor is light or dark. */
	color: inherit;
	text-decoration: none;
}
.btp-yt-card__title a:hover {
	color: var(--btp-yt-primary, #dc3545);
}
.btp-yt-card__channel {
	display: block;
	/* Inherits the theme's real body text color (colors.php, Body Font option) instead of a
	   fixed gray, then dims it - stays legible against whatever background is actually behind it. */
	color: inherit;
	opacity: 0.75;
	text-decoration: none;
	font-size: 13px;
	margin-bottom: 2px;
}
.btp-yt-card__channel:hover {
	opacity: 1;
	color: var(--btp-yt-primary, #dc3545);
}
.btp-yt-card__stats {
	color: inherit;
	opacity: 0.6;
	font-size: 13px;
	margin: 0;
}
.btp-yt-card__dot {
	margin: 0 4px;
}

/* ----------------------------------------------------------------
 * Overrides for the existing, reused betube-elementor widgets
 * (Trending Videos / Shorts) ONLY when placed inside a section the
 * site owner has explicitly tagged with the "btp-yt-home" CSS class
 * in Elementor's Advanced tab. This never affects other pages.
 * ---------------------------------------------------------------- */
.btp-yt-home .btp_post_card__title,
.btp-yt-home .btp_post_card__author,
.btp-yt-home .btp_section_head__title,
.btp-yt-home .btp_cat_card__title {
	/* Inherit the theme's own real heading/link colors (h4/h5/h6, colors.php) instead of a
	   fixed light color, so these reused widgets stay legible whatever background an admin
	   picks for the section they're placed in. */
	color: inherit;
}
.btp-yt-home .btp_post_card__author_text,
.btp-yt-home .btp_post_card small {
	color: inherit;
	opacity: 0.7;
}
.btp-yt-home .btp_post_card__top {
	border-radius: 12px;
	overflow: hidden;
}