/* ==========================================================================
   SEXXIBOI SKIN for the FreeVideos KingTube clone
   --------------------------------------------------------------------------
   Loads AFTER the parent theme's style.css (see functions.php) and after the
   inline <style> that temp-style.php writes from theme options, so most rules
   here win on source order alone. The theme's option-generated CSS uses
   !important in places; those rules are matched or beaten with equal
   specificity + !important, always scoped to body.sb-skin.

   Goal: make the tube read as the same product as sexxiboi.com
   (dark surface, Figtree, cyan #22d3ee accent) WITHOUT touching grid density
   or any of the theme's structural/JS behaviour.

   Deliberately NOT changed:
     - .thumb-block widths  -> still driven by the theme's "videos per row"
                               option, so density stays configurable in wp-admin
     - #site-navigation mechanics, .button-nav, .has-sub, .submenu-button
       (the menumaker JS needs these) -> restyled only
     - every WP/theme hook in header.php / footer.php
   ========================================================================== */

:root {
	--sb-bg:        #000000;
	--sb-bg-2:      #0a0a0a;
	--sb-surface:   rgba(255, 255, 255, 0.05);
	--sb-line:      rgba(255, 255, 255, 0.10);
	--sb-line-soft: rgba(255, 255, 255, 0.06);
	--sb-text:      #e5e7eb;
	--sb-muted:     #9ca3af;
	--sb-dim:       #6b7280;
	--sb-accent:    #22d3ee;
	--sb-accent-dk: #0891b2;
}

/* --------------------------------------------------------------- base ---- */

body.sb-skin {
	background-color: var(--sb-bg);
	color: var(--sb-text);
	font-family: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

body.sb-skin #page {
	background: linear-gradient(to bottom, var(--sb-bg) 0%, var(--sb-bg-2) 50%, var(--sb-bg) 100%);
	min-height: 100vh;
}

body.sb-skin a {
	color: var(--sb-text);
	-webkit-transition: color .18s ease, opacity .18s ease;
	transition: color .18s ease, opacity .18s ease;
}

body.sb-skin a:hover,
body.sb-skin a:focus {
	color: var(--sb-accent);
}

body.sb-skin h1,
body.sb-skin h2,
body.sb-skin h3,
body.sb-skin h4,
body.sb-skin h5,
body.sb-skin h6 {
	color: #ffffff;
	font-weight: 700;
	letter-spacing: -0.01em;
}

body.sb-skin .row {
	max-width: 80em;
	padding: 0 1.25em;
}

/* The theme caps #content at a min-height and pads .site-content. Keep the
   padding modest so the dark grid breathes like the main site. */
body.sb-skin .site-content {
	background: transparent;
}

/* ------------------------------------------------------------- header ---- */

body.sb-skin .site-header.sb-header {
	background: rgba(0, 0, 0, 0.88);
	border-bottom: 1px solid var(--sb-line);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
	backdrop-filter: saturate(140%) blur(10px);
	position: relative;
	z-index: 50;
}

body.sb-skin .sb-bar-inner {
	max-width: 80em;
	margin: 0 auto;
	padding: 0 1.25em;
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5em;
}

/* brand -------------------------------------------------------------- */

body.sb-skin .sb-brand {
	display: flex;
	align-items: center;
	gap: 0.6em;
	flex: 0 0 auto;
	text-decoration: none;
}

body.sb-skin .sb-brand img {
	height: 32px;
	width: auto;
	max-height: none;
	max-width: none;
	margin: 0;
	display: block;
}

body.sb-skin .sb-beta {
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	color: var(--sb-accent);
	background: rgba(34, 211, 238, 0.10);
	border: 1px solid rgba(34, 211, 238, 0.30);
	padding: 3px 8px;
	border-radius: 999px;
	white-space: nowrap;
}

/* nav ---------------------------------------------------------------- */

body.sb-skin .sb-nav.main-navigation,
body.sb-skin .sb-nav {
	clear: none;
	float: none;
	display: block;
	flex: 1 1 auto;
	text-align: center;
}

body.sb-skin .sb-nav > ul {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.5em;
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	position: static;
}

/*
 * The theme's nav is styled with ID selectors:
 *     #site-navigation>ul>li        { float: left }
 *     #site-navigation>ul>li>a      { display:block; padding:21px 18px;
 *                                     color:#646C79; font-weight:bold }
 *     #site-navigation ul li        { display:block; line-height:1 }
 * An ID (1,0,3) always beats class+element (0,2,4), so EVERY property the
 * theme sets there has to be re-asserted with !important - not just padding.
 * (Colour and font-weight were the two that slipped through.)
 *
 * Its menumaker JS also calls jQuery .show()/.hide(), writing an INLINE
 * display on the <ul>, which needs !important as well.
 *
 * Scoped to body.sb-skin, and only above the mobile breakpoint, so nothing
 * leaks into theme markup and menumaker keeps owning the collapsed panel.
 */
@media only screen and (min-width: 48.001em) {
	body.sb-skin .sb-nav > ul {
		display: flex !important;
	}

	body.sb-skin .sb-nav > ul > li {
		float: none !important;
		line-height: 1.5 !important;
	}

	body.sb-skin .sb-nav > ul > li > a {
		display: inline-block !important;
		padding: 0.35em 0 !important;
		color: var(--sb-muted) !important;
		font-size: 14px !important;
		font-weight: 500 !important;
		line-height: 1.5 !important;
		letter-spacing: 0 !important;
		background: none !important;
		text-decoration: none !important;
		border: 0 !important;
		border-bottom: 2px solid transparent !important;
	}

	body.sb-skin .sb-nav > ul > li > a:hover,
	body.sb-skin .sb-nav > ul > li > a:focus {
		color: #ffffff !important;
		background: none !important;
	}

	body.sb-skin .sb-nav > ul > li.current-menu-item > a,
	body.sb-skin .sb-nav > ul > li.current_page_item > a,
	body.sb-skin .sb-nav > ul > li.current_page_parent > a {
		color: #ffffff !important;
		font-weight: 700 !important;
		border-bottom-color: #ffffff !important;
	}

	/*
	 * "♥ Playlists" - appended to the menu by the parent theme's
	 * wp_nav_menu_items filter (kingtube/functions.php). Same treatment as
	 * every other nav item; the heart itself is re-coloured via the
	 * .sb-heart span the child theme wraps around it (see functions.php).
	 */
	body.sb-skin .sb-nav > ul > li > a .sb-heart {
		color: var(--sb-accent);
		font-size: 1.05em;
		line-height: 1;
		margin-right: 0.15em;
	}
}

body.sb-skin .sb-nav > ul > li {
	float: none;
	display: block;
	position: relative;
	border: 0;
}

body.sb-skin .sb-nav > ul > li > a {
	display: inline-block;
	padding: 0.35em 0;
	color: var(--sb-muted);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

body.sb-skin .sb-nav > ul > li > a:hover,
body.sb-skin .sb-nav > ul > li > a:focus {
	color: #ffffff;
}

/* current page -> the underlined "FREE Videos" treatment on the main site */
body.sb-skin .sb-nav > ul > li.current-menu-item > a,
body.sb-skin .sb-nav > ul > li.current_page_item > a,
body.sb-skin .sb-nav > ul > li.current_page_parent > a {
	color: #ffffff;
	font-weight: 700;
	border-bottom-color: #ffffff;
}

/* submenus (desktop hover) -------------------------------------------- */

body.sb-skin .sb-nav ul ul {
	position: absolute;
	left: -9999px;
	top: 100%;
	min-width: 190px;
	margin: 0;
	padding: 0.35em 0;
	list-style: none;
	background: #0d0d0d;
	border: 1px solid var(--sb-line);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
	overflow: hidden;
	z-index: 99999;
}

body.sb-skin .sb-nav li:hover > ul,
body.sb-skin .sb-nav li.focus > ul {
	left: auto;
}

body.sb-skin .sb-nav ul ul li {
	float: none;
	border: 0 !important;
	background: none !important;
}

body.sb-skin .sb-nav ul ul li a {
	display: block;
	width: auto;
	padding: 9px 16px;
	color: var(--sb-muted);
	background: none !important;
	border: 0 !important;
	font-size: 13px;
	text-align: left;
}

body.sb-skin .sb-nav ul ul li a:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.05) !important;
}

/* auth --------------------------------------------------------------- */

body.sb-skin .sb-auth {
	display: flex;
	align-items: center;
	gap: 0.75em;
	flex: 0 0 auto;
}

body.sb-skin .sb-auth-link {
	font-size: 14px;
	font-weight: 500;
	color: var(--sb-muted);
	text-decoration: none;
}

body.sb-skin .sb-auth-link:hover {
	color: #ffffff;
}

body.sb-skin .sb-auth-cta {
	font-size: 14px;
	font-weight: 600;
	color: #000000 !important;
	background: var(--sb-accent);
	padding: 0.5em 1em;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
}

body.sb-skin .sb-auth-cta:hover {
	background: #67e8f9;
	color: #000000 !important;
}

/* search row --------------------------------------------------------- */

body.sb-skin .sb-searchbar {
	border-top: 1px solid var(--sb-line-soft);
	background: rgba(255, 255, 255, 0.02);
}

body.sb-skin .sb-searchbar-inner {
	max-width: 80em;
	margin: 0 auto;
	padding: 0.75em 1.25em;
}

body.sb-skin .sb-search {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 100%;
}

body.sb-skin .sb-search > i.fa {
	position: absolute;
	left: 1em;
	color: var(--sb-dim);
	font-size: 14px;
	pointer-events: none;
}

body.sb-skin .sb-search input[type="text"] {
	width: 100%;
	height: 44px;
	line-height: 44px;
	padding: 0 7.5em 0 2.75em;
	color: var(--sb-text);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--sb-line);
	border-radius: 10px;
	font-size: 14px;
	/*
	 * The parent resets every form control to Helvetica Neue
	 * (body, button, input, select, textarea { font-family: "Helvetica Neue"... }
	 * in style.css) and temp-style.php may re-assert it. Inherit alone is not
	 * enough - the font has to be named here to stay Figtree.
	 */
	font-family: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
	box-shadow: none;
}

body.sb-skin .sb-search button[type="submit"] {
	font-family: inherit;
}

body.sb-skin .sb-search input[type="text"]::placeholder {
	color: var(--sb-dim);
	opacity: 1;
}

body.sb-skin .sb-search input[type="text"]:focus {
	outline: none;
	border-color: rgba(34, 211, 238, 0.55) !important;
	background: rgba(255, 255, 255, 0.07);
}

body.sb-skin .sb-search button[type="submit"] {
	position: absolute;
	right: 5px;
	top: 5px;
	bottom: 5px;
	height: auto !important;
	padding: 0 1.1em;
	font-size: 13px;
	font-weight: 600;
	color: #000000 !important;
	background-color: var(--sb-accent) !important;
	border: 0 !important;
	border-radius: 7px;
	cursor: pointer;
}

body.sb-skin .sb-search button[type="submit"]:hover {
	background-color: #67e8f9 !important;
}

/* ------------------------------------------------------- breadcrumbs ---- */

body.sb-skin .breadcrumbs-area {
	background: transparent;
	border-bottom: 1px solid var(--sb-line-soft);
	height: 35px;
	line-height: 32px;
}

body.sb-skin #breadcrumbs {
	color: var(--sb-dim);
}

body.sb-skin #breadcrumbs li,
body.sb-skin #breadcrumbs li a {
	color: var(--sb-dim);
	text-decoration: none;
}

body.sb-skin #breadcrumbs li a:hover {
	color: var(--sb-accent);
}

body.sb-skin #breadcrumbs .bread-current,
body.sb-skin #breadcrumbs .item-current {
	color: var(--sb-text);
}

/* ------------------------------------------------------ page headings --- */

body.sb-skin .page-header .widget-title,
body.sb-skin h2.widget-title,
body.sb-skin .title-block,
body.sb-skin .homepage-title {
	color: #ffffff;
	font-weight: 700;
}

body.sb-skin .homepage-title {
	border-top: 1px solid var(--sb-line-soft);
	padding-top: 1.25em;
	color: var(--sb-muted);
	font-size: 1.1em;
}

/* Theme marks headings with a left accent bar via .title-block etc. */
body.sb-skin .widget-title:before,
body.sb-skin .page-header .widget-title:before {
	background-color: var(--sb-accent);
}

/* --------------------------------------------------- filters (sort) ----- */

body.sb-skin #filters .filters-select {
	color: var(--sb-muted);
}

body.sb-skin #filters .filters-select:after {
	color: var(--sb-accent);
}

body.sb-skin #filters .filters-options {
	background: #0d0d0d;
	border: 1px solid var(--sb-line);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
	overflow: hidden;
}

body.sb-skin #filters .filters-options span {
	border-bottom: 1px solid var(--sb-line-soft);
}

body.sb-skin #filters .filters-options span a {
	color: var(--sb-muted);
}

body.sb-skin #filters .filters-options span:hover a,
body.sb-skin #filters .filters-options span a.active,
body.sb-skin #filters .filters-options span a:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.05);
}

body.sb-skin #filters .filters-options span a.active {
	color: var(--sb-accent);
}

/* ------------------------------------------------------ video cards ----- */

body.sb-skin .thumb-block .entry-header {
	color: #d4d4d8;
	font-weight: 500;
	text-align: left;
	padding: 11px 2px 0;
	/* The parent pins this box to a fixed 3.5em with overflow:hidden, which
	   HARD-CUTS any title needing a 4th line - measured on the homepage: 65px of
	   text inside a 56px box on 4 of the 55 cards, slicing mid-word. Drop the
	   fixed height (the span below now owns the sizing) so nothing is chopped. */
	height: auto;
	overflow: visible;
}

body.sb-skin .thumb-block .entry-header span {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: #d4d4d8;
	font-size: 0.875em;
	line-height: 1.35;
	/* exactly 3 lines, so every card's title box is the SAME height and the
	   grid stays even while long titles ellipsise instead of being sliced */
	min-height: 4.1em;
}

body.sb-skin .thumb-block:hover .entry-header span {
	color: #ffffff;
}

/* the theme draws a hover ring with an inset box-shadow in main-color */
body.sb-skin .thumb-block .inner-border::after {
	box-shadow: inset 0 0 0 0 rgba(34, 211, 238, 0) !important;
	border-radius: 10px;
}

/* The player and the ad column are BOTH floats sitting in the same box:
     .video-player-area.with-sidebar-ads { float:left;  width:76% }   (>=84em)
     .sidebar-ads                        { float:right; width:18.75em }  = 300px FIXED
   A right float drops BELOW the left float the moment the two no longer fit on
   one line - and because the ads are a FIXED 300px while the player is a
   PERCENTAGE, shrinking the page container (the Stage-1 .row cap above) eats the
   slack silently: 76% + 300px = 1242.4px needed inside a 1240px container, so
   the ads fell ~2px short of fitting and wrapped underneath the player.
   Sizing the player off the ads' own width (100% - 20em leaves 320px for the
   300px ad box plus a 20px gap) makes the fit INDEPENDENT of how wide the page
   is, so no future container change can re-break it. Scoped to the >=84em range
   because that is where the parent mixes a percentage with a fixed sidebar;
   below that the parent already uses two percentages (73% + 25%) and fits. */
@media only screen and (min-width: 84.001em) {
	body.sb-skin .video-player-area.with-sidebar-ads {
		width: calc(100% - 20em);
	}
}

/* Desktop gutters: the theme sets .thumb-block padding to 5px on tablet/mobile
   but the desktop rule keeps the same 5px, so at 4-per-row the cards sit only
   10px apart and read as one solid slab. Widen the horizontal gutter (and keep
   the vertical rhythm) so the grid breathes like the main site.
   Scoped to the content grid so footer/actor card lists are untouched. */
@media only screen and (min-width: 64.001em) {
	body.sb-skin #main .thumb-block {
		padding: 9px;
		margin-bottom: 1.6%;
	}
}

body.sb-skin .thumb-block .inner-border:hover::after {
	box-shadow: inset 0 0 0 2px rgba(34, 211, 238, 0.85) !important;
	border-radius: 10px;
}

body.sb-skin .thumb-block .post-thumbnail,
body.sb-skin .thumb-block .post-thumbnail-container {
	border-radius: 10px;
	overflow: hidden;
	background-color: #0d0d0d;
}

body.sb-skin .thumb-block .post-thumbnail img {
	opacity: 0.92;
	-webkit-transition: opacity .35s ease, transform .45s ease;
	transition: opacity .35s ease, transform .45s ease;
}

body.sb-skin .thumb-block:hover .post-thumbnail img {
	opacity: 1;
	-webkit-transform: scale(1.04);
	transform: scale(1.04);
}

/* view / duration pills */
body.sb-skin span.views,
body.sb-skin span.duration,
body.sb-skin span.hd-video {
	background: rgba(0, 0, 0, 0.78);
	color: #ffffff;
	border-radius: 6px;
	font-weight: 600;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* Pull the pills off the very edge of the thumbnail (the theme parks them 5px
   from the corner, which reads as cramped once the card has a rounded border)
   and give them a hairline edge so they stay legible over bright frames. */
body.sb-skin span.views,
body.sb-skin span.duration {
	bottom: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

body.sb-skin span.views {
	left: 8px;
}

body.sb-skin span.duration {
	right: 8px;
}

body.sb-skin span.views i,
body.sb-skin span.duration i {
	color: var(--sb-accent);
}

body.sb-skin .video-overlay {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0) 55%);
	display: block !important;
	opacity: 0;
	-webkit-transition: opacity .25s ease;
	transition: opacity .25s ease;
	pointer-events: none;
}

body.sb-skin .thumb-block:hover .video-overlay {
	opacity: 1;
}

/* ------------------------------------------------------ pagination ------ */

body.sb-skin .pagination ul li a {
	color: var(--sb-muted);
	background: var(--sb-surface);
	border: 1px solid var(--sb-line);
	border-radius: 8px;
}

body.sb-skin .pagination ul li a:hover {
	color: #ffffff;
	border-color: rgba(34, 211, 238, 0.5);
	background: rgba(255, 255, 255, 0.08);
}

body.sb-skin .pagination ul li a.current {
	color: #000000 !important;
	background: var(--sb-accent) !important;
	border-color: var(--sb-accent) !important;
	font-weight: 700;
}

/* ---------------------------------------------------------- footer ------ */

body.sb-skin #colophon.site-footer {
	background: transparent;
	border-top: 1px solid var(--sb-line);
	padding: 2.5em 0;
	margin-top: 3em;
}

body.sb-skin .site-footer .site-info,
body.sb-skin .site-footer .footer-seo {
	color: var(--sb-dim);
	font-size: 0.8em;
	line-height: 1.6;
	max-width: 60em;
	margin: 0 auto;
}

/* ---- sexxiboi.com footer layout: brand left, legal links right ---- */

body.sb-skin .sb-foot-main {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 2em;
	max-width: 72em;
	margin: 2.4em auto 0;
	padding: 0 1.5em;
	text-align: left;
}

body.sb-skin .sb-foot-brand {
	display: flex;
	flex-direction: column;
	gap: 0.45em;
	min-width: 0;
}

body.sb-skin .sb-foot-word {
	display: flex;
	align-items: baseline;
	gap: 0.55em;
}

body.sb-skin .sb-foot-nm {
	font-family: 'Figtree', system-ui, -apple-system, sans-serif;
	font-size: 1.2em;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: #ffffff;
	text-transform: uppercase;
	line-height: 1;
}

body.sb-skin .sb-foot-tl {
	font-family: 'Figtree', system-ui, -apple-system, sans-serif;
	font-size: 0.68em;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sb-accent);
	border: 1px solid rgba(34, 211, 238, 0.35);
	border-radius: 999px;
	padding: 0.3em 0.7em;
	line-height: 1;
	white-space: nowrap;
}

body.sb-skin .sb-foot-cp {
	font-size: 11px;
	line-height: 1.5;
	color: var(--sb-dim);
}

body.sb-skin .sb-foot-sub {
	display: block;
	margin-top: 0.15em;
	font-size: 10.5px;
	color: #4b5563;
}

body.sb-skin .sb-foot-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.85em;
	font-size: 12px;
	font-family: 'Figtree', system-ui, -apple-system, sans-serif;
}

body.sb-skin .sb-foot-nav a {
	color: var(--sb-muted);
	text-decoration: none;
	transition: color 0.15s ease;
	white-space: nowrap;
}

body.sb-skin .sb-foot-nav a:hover {
	color: var(--sb-accent);
}

body.sb-skin .sb-foot-dot {
	color: #374151;
	font-size: 11px;
}

body.sb-skin .sb-foot-sep {
	height: 1px;
	background: var(--sb-line);
	max-width: 72em;
	margin: 1.6em auto 1.2em;
	padding: 0;
}

/* The disclaimer keeps its original centred, narrow treatment. */
body.sb-skin .sb-footer .site-info {
	text-align: center;
	padding: 0 1.5em;
}

/* Stack on narrow screens - the brand row would otherwise be cramped. */
@media screen and (max-width: 783px) {
	body.sb-skin .sb-foot-main {
		flex-direction: column;
		align-items: center;
		text-align: center;
		margin-top: 1.8em;
	}
	body.sb-skin .sb-foot-brand {
		align-items: center;
	}
	body.sb-skin .sb-foot-nav {
		justify-content: center;
		gap: 0.6em;
	}
}

body.sb-skin .site-footer .widget-title {
	color: #ffffff;
}

body.sb-skin .footer-menu-container ul {
	list-style: none;
	margin: 0 0 1em;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5em;
}

body.sb-skin .footer-menu-container ul li a {
	color: var(--sb-dim);
	font-size: 13px;
	text-decoration: none;
}

body.sb-skin .footer-menu-container ul li a:hover {
	color: var(--sb-accent);
}

body.sb-skin .logo-footer {
	opacity: 0.85;
}

/* ------------------------------------------------------- back to top ---- */

body.sb-skin #back-to-top {
	background: rgba(255, 255, 255, 0.08);
	color: var(--sb-text);
	border-radius: 8px;
}

body.sb-skin #back-to-top:hover {
	background: var(--sb-accent);
	color: #000000;
}

/* --------------------------------------------- forms / buttons / misc --- */

body.sb-skin input[type="text"],
body.sb-skin input[type="email"],
body.sb-skin input[type="url"],
body.sb-skin input[type="password"],
body.sb-skin input[type="search"],
body.sb-skin input[type="number"],
body.sb-skin input[type="tel"],
body.sb-skin textarea,
body.sb-skin select {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--sb-line);
	border-radius: 8px;
	color: var(--sb-text);
}

body.sb-skin input:focus,
body.sb-skin textarea:focus,
body.sb-skin select:focus {
	border-color: rgba(34, 211, 238, 0.55) !important;
	outline: none;
}

/* ------------------------------------------- playlist button (inline) ---- */

/*
 * The playlist control used to sit under the video title. It now lives as the
 * first item in .video-infos-right, alongside Like / Share, so it has to match
 * their metrics exactly. Those are set by the theme as:
 *     span.post-like a, .video-share .button { font-size: 1.15em; border-radius: 4px }
 *     button, .button { border: 1px solid; padding: 0.4em 0.8em; color: #fff }
 *     temp-style.php -> background/border-colour = main-color (with !important)
 * Measured height of the existing pair: 44px. Match that, not a guess.
 */
body.sb-skin .video-infos-right {
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex-wrap: wrap;
}

body.sb-skin .sb-save-wrap {
	position: relative;
	display: inline-block;
	margin: 0;              /* theme's float-based spacing no longer applies */
	vertical-align: middle;
}

body.sb-skin .sb-save-btn {
	display: inline-block;
	height: 44px;           /* == measured height of Like it / Share */
	padding: 0 0.85em;
	border: 1px solid var(--sb-accent-dk);
	border-radius: 4px;
	color: #ffffff;
	background-color: var(--sb-accent);
	font-family: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
	/* 1.15em == the theme's own `span.post-like a, .video-share .button`
	   font-size, so all three buttons in the row read at the same size. */
	font-size: 1.15em;
	font-weight: 600;
	line-height: 42px;      /* 44 - 2px border, keeps the label centred */
	white-space: nowrap;
	cursor: pointer;
	-webkit-transition: background-color .18s ease, border-color .18s ease;
	transition: background-color .18s ease, border-color .18s ease;
}

body.sb-skin .sb-save-btn:hover,
body.sb-skin .sb-save-btn:focus {
	background-color: var(--sb-accent-dk);
	border-color: var(--sb-accent-dk);
	color: #ffffff;
	outline: none;
}

/* confirmation state ("�o" Saved to �?�") driven by the child JS */
body.sb-skin .sb-save-btn.is-flashing {
	background-color: #16a34a;
	border-color: #16a34a;
	color: #ffffff;
}

/* dropdown ------------------------------------------------------------- */

body.sb-skin .sb-save-menu {
	display: none;
	position: absolute;
	z-index: 60;
	top: calc(100% + 6px);
	left: 0;
	min-width: 232px;
	padding: 0.4em 0;
	color: var(--sb-text);
	background: #0d0d0d;
	border: 1px solid var(--sb-line);
	border-radius: 10px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
	text-align: left;
}

body.sb-skin .sb-save-menu.is-open {
	display: block;
}

body.sb-skin .sb-save-menu-title {
	padding: 2px 14px 6px;
	color: var(--sb-dim);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

body.sb-skin .sb-save-lists {
	max-height: 220px;
	overflow: auto;
}

body.sb-skin .sb-save-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 7px 14px;
	font-size: 13px;
	cursor: pointer;
}

body.sb-skin .sb-save-item:hover,
body.sb-skin .sb-save-item:focus {
	background: rgba(255, 255, 255, 0.06);
}

body.sb-skin .sb-save-item-check,
body.sb-skin .sb-save-item .is-saved {
	color: var(--sb-accent);
	font-weight: 700;
}

body.sb-skin .sb-save-menu-new {
	display: flex;
	gap: 6px;
	margin-top: 6px;
	padding: 8px 12px 2px;
	border-top: 1px solid var(--sb-line-soft);
}

body.sb-skin .sb-save-new-name {
	flex: 1;
	min-width: 0;
	height: 30px;
	padding: 0 8px;
	color: var(--sb-text);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--sb-line);
	border-radius: 6px;
	font-family: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
	font-size: 13px;
}

body.sb-skin .sb-save-new-name::placeholder {
	color: var(--sb-dim);
}

body.sb-skin .sb-save-new-name:focus {
	outline: none;
	border-color: rgba(34, 211, 238, 0.55);
}

body.sb-skin .sb-save-new-create {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	color: #000000;
	background: var(--sb-accent);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
}

body.sb-skin .sb-save-new-create:hover {
	background: #67e8f9;
}

/* ------------------------------------------------------------ mobile ---- */
@media only screen and (max-width: 64em) {

	body.sb-skin .sb-bar-inner {
		gap: 0.75em;
	}

	body.sb-skin .sb-nav > ul {
		gap: 1em;
	}

	body.sb-skin .sb-nav > ul > li > a {
		font-size: 13px;
	}
}

/*
 * ------------------------------------------------------ nav: the 48em-64em gap
 *
 * DEAD-ZONE FIX. The parent theme collapses #site-navigation at max-width:64em
 * (navigation.js hard-codes a 1024px breakpoint), but this skin's collapsed-panel
 * styling lives in the max-width:48em block below, while its DESKTOP nav styling
 * lives in a min-width:48.001em block. Between 768px and 1024px both apply -- and
 * the desktop rules lose to the parent on every property the parent sets with an
 * ID (#site-navigation ul), because the desktop rules are class-based:
 *
 *   measured at 800px before this fix --
 *     panel background  rgb(238,238,238)   <- the parent's #eee, not ours
 *     link colour       rgb(156,163,175)   <- our --sb-muted grey
 *     rows              50px apart, 6 deep <- the parent's collapsed li borders
 *
 * i.e. grey text on a grey panel, a big dead block, and no dropdown. This block
 * mirrors the selector shapes of the max-width:48em panel (which already beats the
 * parent's ID rules) so there is ONE panel design across the whole collapsed range.
 * Nothing above is modified: >64em (desktop) and <=48em (phone) are untouched.
 */

/* menumaker toggles the panel with an inline display, which loses to !important.
   Drive the visible state off the `open` class it puts on the <ul> instead. */
@media only screen and (min-width: 48.001em) and (max-width: 64em) {

	/* The parent's .site-branding is absolutely positioned and 3.75em tall. */
	body.sb-skin .site-branding {
		height: auto;
		max-height: none;
		position: static;
		display: block;
		padding: 0;
	}

	body.sb-skin .sb-bar-inner {
		position: relative;
		flex-wrap: nowrap;
	}

	/* The parent sets #site-navigation { width:100% } -- reclaim the row. */
	body.sb-skin #site-navigation {
		position: static !important;
		float: none !important;
		clear: none !important;
		width: auto !important;
		height: auto !important;
		flex: 0 0 auto;
	}

	/* hamburger */
	body.sb-skin #site-navigation .button-nav {
		display: block;
		position: absolute;
		right: 1.25em;
		top: 50%;
		margin-top: -22px;
		height: 44px;
		line-height: 44px;
		width: 44px;
		border-radius: 8px;
		background-color: transparent;
	}

	body.sb-skin #site-navigation .button-nav:after {
		border-top-color: var(--sb-text);
		border-bottom-color: var(--sb-text);
	}

	body.sb-skin #site-navigation .button-nav:before {
		background: var(--sb-text);
	}

	body.sb-skin #site-navigation .button-nav.menu-opened:after,
	body.sb-skin #site-navigation .button-nav.menu-opened:before {
		background: var(--sb-text);
		border: 0;
	}

	/* Closed by default (this also beats the desktop block's display:flex !important,
	   which is why the .open class below is required to reveal the panel). */
	body.sb-skin #site-navigation ul.sb-menu {
		display: none !important;
		position: absolute;
		left: 0;
		right: 0;
		top: 100% !important;
		z-index: 99999;
		margin: 0;
		padding: 0.5em 0;
		list-style: none;
		background: #0d0d0d !important;
		border: 0 !important;
		border-top: 1px solid var(--sb-line) !important;
		border-bottom: 1px solid var(--sb-line) !important;
		box-shadow: 0 22px 48px rgba(0, 0, 0, 0.7);
	}

	body.sb-skin #site-navigation ul.sb-menu.open {
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		flex-wrap: nowrap;
		gap: 0;
		width: auto;
	}

	/* the parent paints every li and its :hover with #eee */
	body.sb-skin #site-navigation ul.sb-menu > li,
	body.sb-skin #site-navigation ul.sb-menu ul li {
		float: none !important;
		width: 100% !important;
		display: block;
		position: relative;
		background: none !important;
		border: 0 !important;
		border-bottom: 1px solid var(--sb-line-soft) !important;
	}

	body.sb-skin #site-navigation ul.sb-menu > li:hover {
		background: none !important;
	}

	body.sb-skin #site-navigation ul.sb-menu > li:last-child {
		border-bottom: 0 !important;
	}

	/* TIGHT rows -- 11px vertical, against the 50px-apart broken state and the
	   parent's 21px+18px desktop padding. */
	body.sb-skin #site-navigation ul.sb-menu > li > a,
	body.sb-skin #site-navigation ul.sb-menu ul li a {
		display: block !important;
		width: 100% !important;
		padding: 11px 1.25em !important;
		color: var(--sb-text) !important;
		font-size: 15px !important;
		font-weight: 500 !important;
		line-height: 1.35 !important;
		letter-spacing: 0 !important;
		text-align: left !important;
		text-decoration: none !important;
		background: none !important;
		border: 0 !important;
	}

	body.sb-skin #site-navigation ul.sb-menu > li > a:hover,
	body.sb-skin #site-navigation ul.sb-menu > li > a:focus {
		color: #ffffff !important;
		background: rgba(255, 255, 255, 0.05) !important;
	}

	body.sb-skin #site-navigation ul.sb-menu > li.current-menu-item > a,
	body.sb-skin #site-navigation ul.sb-menu > li.current_page_item > a,
	body.sb-skin #site-navigation ul.sb-menu > li.current_page_parent > a {
		color: var(--sb-accent) !important;
		font-weight: 700 !important;
	}

	/* submenus sit inline in the panel, indented */
	body.sb-skin #site-navigation ul.sb-menu ul,
	body.sb-skin #site-navigation ul.sb-menu ul ul {
		position: relative !important;
		left: 0 !important;
		top: 0 !important;
		width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: rgba(255, 255, 255, 0.03) !important;
	}

	body.sb-skin #site-navigation ul.sb-menu ul li a {
		padding-left: 2.25em !important;
		color: var(--sb-muted) !important;
	}

	body.sb-skin #site-navigation ul.sb-menu li:hover > ul,
	body.sb-skin #site-navigation ul.sb-menu li.focus > ul {
		left: 0 !important;
	}
}

@media only screen and (max-width: 48em) {

	/*
	 * The parent theme styles the collapsed nav with ID selectors
	 * (#site-navigation ul { top: 100px; background: #eee; ... }), which
	 * outrank class-based child rules no matter how specific. The properties
	 * that actually fight us are re-asserted with !important, scoped to
	 * body.sb-skin. Everything here only applies below the mobile breakpoint,
	 * so the desktop rules above are unaffected.
	 */
	body.sb-skin #site-navigation ul.sb-menu {
		top: 100% !important;
		background: #0d0d0d !important;
		padding: 0.5em 0 !important;
		border: 0 !important;
	}

	body.sb-skin #site-navigation ul.sb-menu > li,
	body.sb-skin #site-navigation ul.sb-menu ul li {
		width: 100% !important;
		float: none !important;
		background: none !important;
		border-bottom: 1px solid var(--sb-line-soft) !important;
	}

	body.sb-skin #site-navigation ul.sb-menu > li:last-child {
		border-bottom: 0 !important;
	}

	body.sb-skin #site-navigation ul.sb-menu > li > a,
	body.sb-skin #site-navigation ul.sb-menu ul li a {
		width: 100% !important;
		color: var(--sb-text) !important;
		background: none !important;
		border: 0 !important;
		text-align: left !important;
	}

	/* Undo the theme's absolutely-positioned nav + fixed 135px branding box. */
	body.sb-skin .site-branding {
		height: auto;
		max-height: none;
		position: static;
		display: block;
		padding: 0;
	}

	body.sb-skin .sb-bar-inner {
		min-height: 58px;
		position: relative;
		flex-wrap: nowrap;
	}

	body.sb-skin .sb-brand img {
		height: 26px;
	}

	body.sb-skin .sb-beta {
		font-size: 9px;
		padding: 2px 6px;
	}

	/* Nav collapses into a panel that the theme's menumaker JS toggles. */
	body.sb-skin .sb-nav.main-navigation,
	body.sb-skin .sb-nav {
		position: static;
		clear: none;
		float: none;
		flex: 0 0 auto;
	}

	body.sb-skin .sb-nav > ul {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 99999;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.5em 0;
		background: #0d0d0d;
		border-top: 1px solid var(--sb-line);
		border-bottom: 1px solid var(--sb-line);
		box-shadow: 0 22px 48px rgba(0, 0, 0, 0.7);
	}

	body.sb-skin .sb-nav > ul > li {
		width: 100%;
		border-bottom: 1px solid var(--sb-line-soft);
	}

	body.sb-skin .sb-nav > ul > li:last-child {
		border-bottom: 0;
	}

	body.sb-skin .sb-nav > ul > li > a {
		display: block;
		padding: 14px 1.25em;
		color: var(--sb-text);
		font-size: 15px;
		font-weight: 500;
		border-bottom: 0;
		text-align: left;
	}

	body.sb-skin .sb-nav > ul > li.current-menu-item > a {
		color: var(--sb-accent);
	}

	/* submenus inside the panel */
	body.sb-skin .sb-nav ul ul,
	body.sb-skin .sb-nav ul ul ul {
		position: relative;
		left: 0 !important;
		top: 0;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0 !important;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		background: rgba(255, 255, 255, 0.03);
	}

	body.sb-skin .sb-nav ul ul li {
		border-bottom: 1px solid var(--sb-line-soft) !important;
	}

	body.sb-skin .sb-nav ul ul li a {
		padding-left: 2.25em;
		color: var(--sb-muted);
	}

	/* hamburger button (menumaker binds .button-nav) */
	body.sb-skin #site-navigation .button-nav {
		display: block;
		position: absolute;
		right: 0.5em;
		top: 50%;
		margin-top: -22px;
		height: 44px;
		line-height: 44px;
		width: 44px;
		border-radius: 8px;
		background-color: transparent;
	}

	body.sb-skin #site-navigation .button-nav:after {
		border-top-color: var(--sb-text);
		border-bottom-color: var(--sb-text);
	}

	body.sb-skin #site-navigation .button-nav:before {
		background: var(--sb-text);
	}

	body.sb-skin #site-navigation .button-nav.menu-opened:after,
	body.sb-skin #site-navigation .button-nav.menu-opened:before {
		background: var(--sb-text);
		border: 0;
	}

	/* the theme positions this panel assuming a tall branded header */
	body.sb-skin #site-navigation ul {
		top: 100%;
	}

	body.sb-skin .sb-auth-link {
		display: none;
	}

	body.sb-skin .sb-searchbar-inner {
		padding: 0.6em 1em;
	}

	body.sb-skin .sb-search input[type="text"] {
		height: 40px;
		line-height: 40px;
		padding: 0 6.5em 0 2.5em;
	}

	body.sb-skin .sb-search button[type="submit"] {
		padding: 0 0.9em;
		font-size: 12px;
	}

	body.sb-skin .thumb-block .entry-header {
		text-align: left;
	}
	/* "♥ Playlists" heart inside the collapsed panel */
	body.sb-skin .sb-nav > ul > li > a .sb-heart {
		color: var(--sb-accent);
	}
}

/* The theme hides .breadcrumbs-area on mobile; keep it hidden so nothing
   shifts on phones. */
@media only screen and (max-width: 48em) {
	body.sb-skin .breadcrumbs-area {
		display: none;
	}
}

/* ------------------------------------------------------------ tags page --- */
/* The parent's template-tags.php renders wp_tag_cloud() in 'flat' format:
   ~5,000 anchors, each carrying an inline font-size between 12px and 24px
   scaled by post count. On a site this size that reads as a jagged wall of
   white boxes. The child theme's own template-tags.php replaces that markup
   with uniform .sb-tag-chip elements; these rules give them the dark/cyan
   treatment used everywhere else in the skin.

   The .tag-cloud-link rules at the end also cover the tag-cloud WIDGET in the
   sidebar, and keep the parent's markup legible if its template is ever
   selected again. */

body.sb-skin .sb-tags {
	margin: 1.5em 0 3em;
}

body.sb-skin .sb-tags-toolbar {
	display: flex;
	align-items: center;
	gap: 1em;
	flex-wrap: wrap;
	margin-bottom: 1.25em;
	padding-bottom: 1.25em;
	border-bottom: 1px solid var(--sb-line-soft);
}

body.sb-skin .sb-tags-search {
	position: relative;
	flex: 1 1 18em;
	min-width: 12em;
}

body.sb-skin .sb-tags-search i {
	position: absolute;
	top: 50%;
	left: 0.9em;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	color: var(--sb-dim);
	font-size: 0.85em;
	pointer-events: none;
}

body.sb-skin .sb-tag-filter {
	width: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0.6em 0.9em 0.6em 2.3em;
	color: var(--sb-text);
	background: var(--sb-surface);
	border: 1px solid var(--sb-line);
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.95em;
	line-height: 1.2;
	-webkit-appearance: none;
	appearance: none;
	-webkit-transition: border-color .18s ease, background-color .18s ease;
	transition: border-color .18s ease, background-color .18s ease;
}

body.sb-skin .sb-tag-filter::placeholder {
	color: var(--sb-dim);
}

body.sb-skin .sb-tag-filter:focus {
	outline: 0;
	border-color: var(--sb-accent);
	background: rgba(255, 255, 255, 0.08);
}

body.sb-skin .sb-tags-stat {
	color: var(--sb-dim);
	font-size: 0.85em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

body.sb-skin .sb-tag-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

/* The chips. Deliberately uniform — same height, same font-size, no inline
   sizing. That is the whole point of the rewrite. */
body.sb-skin a.sb-tag-chip {
	display: -webkit-inline-box;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	max-width: 100%;
	padding: 0.45em 0.8em;
	color: var(--sb-text);
	background: var(--sb-surface);
	border: 1px solid var(--sb-line);
	border-radius: 999px;
	font-size: 0.875em;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	-webkit-transition: color .18s ease, border-color .18s ease,
		background-color .18s ease, -webkit-transform .18s ease;
	transition: color .18s ease, border-color .18s ease,
		background-color .18s ease, transform .18s ease;
}

body.sb-skin a.sb-tag-chip:hover,
body.sb-skin a.sb-tag-chip:focus {
	color: var(--sb-accent);
	background: rgba(34, 211, 238, 0.10);
	border-color: var(--sb-accent);
	-webkit-transform: translateY(-1px);
	transform: translateY(-1px);
}

/* Long tags truncate rather than blow out the row. */
body.sb-skin .sb-tag-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.sb-skin .sb-tag-n {
	color: var(--sb-dim);
	font-size: 0.8em;
	font-variant-numeric: tabular-nums;
	-webkit-transition: color .18s ease;
	transition: color .18s ease;
}

body.sb-skin a.sb-tag-chip:hover .sb-tag-n,
body.sb-skin a.sb-tag-chip:focus .sb-tag-n {
	color: var(--sb-accent);
}

/* The filter script toggles the [hidden] attribute; this makes sure it wins
   over the chip's own inline-flex display. */
body.sb-skin a.sb-tag-chip[hidden] {
	display: none;
}

body.sb-skin .sb-tags-empty {
	margin-top: 1.5em;
	color: var(--sb-dim);
	font-style: italic;
}

/* Keep any remaining tag cloud (e.g. the sidebar widget) legible. */
body.sb-skin .tag-cloud-link,
body.sb-skin .widget a.tag-cloud-link {
	font-size: 0.875em !important;
}

@media only screen and (max-width: 48em) {
	body.sb-skin .sb-tags-toolbar {
		gap: 0.75em;
	}

	body.sb-skin .sb-tags-search {
		flex: 1 1 100%;
	}

	body.sb-skin a.sb-tag-chip {
		font-size: 0.8125em;
		padding: 0.4em 0.7em;
	}
}

/* --------------------------------------------------------- end tags page --- */


/* --------------------------------------------- header: auth <-> burger gap ----
 * The burger ( #site-navigation .button-nav ) is absolutely positioned against
 * .sb-bar-inner, while .sb-auth sits in the normal flex flow -- so inside the
 * range where the burger is actually displayed (768px-1024px) the icon lands
 * directly on top of the "Sign up" button. Measured before this fix:
 *
 *     1024px -> 44px overlap      800px -> 44px overlap
 *      900px -> 44px overlap      768px -> 32px overlap
 *
 * Fix: reserve a right-hand lane for the burger instead of nudging the icon, so
 * the burger keeps its own position and Sign up / Log in slide left to make
 * room. The lane is sized as burger-right-offset + 44px width + 12px breathing
 * room, which holds that 12px gap at every width in the collapsed range:
 *
 *     >48em  : right 1.25em (20px) + 44px + 12px = 76px = 4.75em
 *     <=48em : right  0.5em ( 8px) + 44px + 12px = 64px =  4em
 *
 * Scope is the collapsed range only -- >64em (desktop) is untouched, and the
 * rule lives after every existing .sb-bar-inner declaration so it wins.
 * ------------------------------------------------------------------------- */

@media only screen and (min-width: 48.001em) and (max-width: 64em) {
	body.sb-skin .sb-bar-inner {
		padding-right: 4.75em !important;
	}
}

@media only screen and (max-width: 48em) {
	body.sb-skin .sb-bar-inner {
		padding-right: 4em !important;
	}
}