/* Custom YouTube Transcripts — minimal styling. Fonts and colours are
   inherited from Storefront; only spacing, borders and the highlight are set. */

.ytt-search {
	margin: 0 0 2em;
}

.ytt-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 0.7em 0.9em;
	border: 1px solid currentColor;
	border-radius: 0;
	font-size: 1.1em;
}

.ytt-status {
	margin: 0.6em 0 1em;
	opacity: 0.7;
	min-height: 1.4em;
}

.ytt-result {
	padding: 0.9em 0;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.ytt-result:last-child {
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.ytt-title {
	margin: 0 0 0.25em;
	font-size: 1.05em;
	line-height: 1.3;
}

.ytt-meta {
	margin: 0 0 0.4em;
	font-size: 0.85em;
	opacity: 0.65;
}

.ytt-snippet {
	margin: 0;
	line-height: 1.5;
}

.ytt-snippet mark {
	background: #ffec80;
	color: inherit;
	padding: 0;
	border-radius: 0;
}

.ytt-footer,
.ytt-notice {
	margin: 1.5em 0 0;
	padding-top: 1em;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	font-size: 0.95em;
}

/* Upgrade block shown to free users above the search box */
.ytt-upgrade {
	border: 1px solid rgba(0, 0, 0, 0.18);
	padding: 1em 1.2em;
	margin: 0 0 1.5em;
}

.ytt-upgrade p {
	margin: 0 0 0.7em;
}

.ytt-upgrade p:last-child {
	margin-bottom: 0;
}

.ytt-upgrade-head {
	font-weight: 700;
	font-size: 1.05em;
}

.ytt-upgrade-sub,
.ytt-upgrade-also {
	font-size: 0.92em;
	opacity: 0.72;
}

/* the two-line exchange */
.ytt-upgrade-demo {
	margin: 0.9em 0 0.9em 0.6em;
	padding: 0.2em 0 0.2em 1em;
	border-left: 3px solid #c9a227;
}

.ytt-upgrade-demo p {
	margin: 0 0 0.6em;
}

.ytt-upgrade-demo p:last-child {
	margin-bottom: 0;
}

.ytt-demo-q {
	font-style: italic;
	opacity: 0.8;
}

.ytt-demo-a {
	background: rgba(201, 162, 39, 0.10);
	padding: 0.55em 0.8em;
}

.ytt-demo-note {
	font-size: 0.82em;
	opacity: 0.62;
	margin-top: 0.7em;
}

.ytt-demo-label {
	display: block;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.55;
	margin-bottom: 0.2em;
	font-style: normal;
}

.ytt-upgrade-cta a {
	display: inline-block;
	padding: 0.55em 1em;
	border: 2px solid currentColor;
	font-weight: 700;
	text-decoration: none;
}

.ytt-upgrade-cta a:hover,
.ytt-upgrade-cta a:focus {
	text-decoration: underline;
}

/* Pro: the jump-to-second link beside a result title */
.ytt-jump {
	font-size: 0.8em;
	font-weight: 700;
	text-decoration: none;
	padding: 0.1em 0.45em;
	border: 1px solid currentColor;
	border-radius: 3px;
	white-space: nowrap;
	opacity: 0.8;
}

.ytt-jump:hover,
.ytt-jump:focus {
	opacity: 1;
	text-decoration: none;
}

/* Free tier: an inline promo row. Deliberately unlike a result — boxed,
   tinted, labelled, and never carrying a result title. */
.ytt-promo {
	display: block;
	margin: 1.4em 0;
	padding: 0.9em 1em;
	border: 1px dashed rgba(127, 127, 127, 0.55);
	border-radius: 4px;
	background: rgba(127, 127, 127, 0.07);
}

.ytt-promo-label {
	display: block;
	margin-bottom: 0.5em;
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	opacity: 0.6;
}

.ytt-promo-body > :first-child { margin-top: 0; }
.ytt-promo-body > :last-child { margin-bottom: 0; }

.ytt-promo-body img {
	max-width: 100%;
	height: auto;
}

/* Paging. Buttons, so they cannot be styled away by link rules; states are
   stated explicitly for the same reason the tabs are. */
.ytt-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em;
	align-items: center;
	margin: 1.6em 0 0.4em;
}

.ytt-pager button.ytt-page {
	appearance: none;
	-webkit-appearance: none;
	min-width: 2.4em;
	padding: 0.45em 0.7em;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	color: #1d2327;
	background: #fff;
	background-image: none;
	border: 1px solid rgba(0, 0, 0, 0.28);
	border-radius: 3px;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
}

.ytt-pager button.ytt-page:hover:not(:disabled),
.ytt-pager button.ytt-page:focus:not(:disabled) {
	color: #000;
	background: #f0f0f1;
	border-color: rgba(0, 0, 0, 0.45);
}

.ytt-pager button.ytt-page.is-current {
	color: #fff;
	background: #1d2327;
	border-color: #1d2327;
	cursor: default;
}

.ytt-pager button.ytt-page:disabled {
	opacity: 0.45;
	cursor: default;
}

.ytt-page-gap {
	padding: 0 0.2em;
	opacity: 0.6;
}

@media (prefers-color-scheme: dark) {
	.ytt-pager button.ytt-page {
		color: #f0f0f1;
		background: #23282d;
		border-color: rgba(255, 255, 255, 0.35);
	}
	.ytt-pager button.ytt-page.is-current {
		color: #1d2327;
		background: #f0f0f1;
		border-color: #f0f0f1;
	}
}

/* ---------------------------------------------------------------------------
   The inline player (2.7). Nothing here is loaded until a timestamp is
   clicked; this is only the box it lands in.
   --------------------------------------------------------------------------- */

.ytt-player {
	margin: 0.6em 0 1.4em;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 6px;
	overflow: hidden;
	background: #000;
}

.ytt-player-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

/* aspect-ratio is everywhere now, but a padding box costs nothing and keeps
   an older browser from collapsing the player to nothing. */
@supports not (aspect-ratio: 16 / 9) {
	.ytt-player-frame { height: 0; padding-bottom: 56.25%; }
}

.ytt-player-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.ytt-player-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.2em;
	align-items: center;
	justify-content: flex-start;
	margin: 0;
	padding: 0.5em 0.7em;
	background: #1d2327;
	color: #fff;
	font-size: 0.9em;
}

.ytt-player-bar a.ytt-player-out,
.ytt-player-bar a.ytt-player-like {
	color: #fff;
	text-decoration: underline;
}

/* The close button keeps the right-hand end of the bar however many links
   there are beside "Open on YouTube" (2.15). */
.ytt-player-bar button.ytt-player-close {
	margin-left: auto;
}

button.ytt-player-close {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0.3em 0.8em;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 4px;
	background: transparent;
	color: #fff;
	font: inherit;
	line-height: 1.3;
	cursor: pointer;
}

button.ytt-player-close:hover,
button.ytt-player-close:focus-visible {
	background: rgba(255, 255, 255, 0.15);
}

.ytt-player-note {
	margin: 0;
	padding: 0.5em 0.7em;
	background: #fcf9e8;
	color: #1d2327;
	font-size: 0.9em;
}

@media (max-width: 480px) {
	.ytt-player-bar { flex-direction: column; align-items: stretch; gap: 0.5em; text-align: center; }
	.ytt-player-bar button.ytt-player-close { width: 100%; margin-left: 0; }
}

/* ---------------------------------------------------------------------------
   The Subscribe bar above the search box (2.15). Members only; the free card
   never shows it, and YouTube's script is not loaded for anyone who sees one.
   --------------------------------------------------------------------------- */

.ytt-subscribe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em 1em;
	align-items: center;
	margin: 0 0 1em;
	padding: 0.6em 0.9em;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 8px;
	background: #f8fafc;
}

.ytt-subscribe-text {
	flex: 1 1 auto;
	min-width: 0;
	color: #334155;
	font-size: 0.95em;
	line-height: 1.4;
}

.ytt-subscribe-widget {
	flex: 0 0 auto;
	min-height: 24px;
}

a.ytt-subscribe-fallback {
	display: inline-block;
	padding: 0.25em 0.8em;
	border-radius: 4px;
	background: #c00;
	color: #fff;
	font-size: 0.9em;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
}

@media (prefers-color-scheme: dark) {
	.ytt-subscribe { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.05); }
	.ytt-subscribe-text { color: inherit; }
}

@media (max-width: 480px) {
	.ytt-subscribe { flex-direction: column; align-items: flex-start; }
}

/* ---------------------------------------------------------------------------
   The three ways to buy Pro (2.10). Monthly is the filled button; the other
   two are outlined, so the eye lands on the one most people want first.
   --------------------------------------------------------------------------- */

.ytt-upgrade-buy {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7em;
	margin: 1.1em 0 0;
}

a.ytt-buy {
	position: relative;
	flex: 1 1 12em;
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	padding: 0.85em 1em;
	border: 2px solid #64748b;
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	background: #fff;
	line-height: 1.3;
}

/* Yearly is the one being recommended (2.16): a heavier border, a tinted
   panel and the saving on a badge. No "most popular" claim anywhere. */
a.ytt-buy.is-best {
	border-color: #0b2545;
	border-width: 3px;
	padding-top: 1.35em;
	background: #f8fafc;
}

.ytt-buy-badge {
	position: absolute;
	top: -0.75em;
	left: 0.9em;
	padding: 0.15em 0.7em;
	border-radius: 999px;
	background: #0b2545;
	color: #fff;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.6;
	white-space: nowrap;
}

.ytt-buy-sub {
	color: #475569;
	font-size: 0.88em;
}

a.ytt-buy:hover,
a.ytt-buy:focus-visible {
	text-decoration: none;
	outline: 2px solid transparent;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.18);
}

.ytt-buy-name {
	font-weight: 700;
	font-size: 1.02em;
}

.ytt-buy-price {
	font-weight: 700;
}

.ytt-buy-note {
	font-size: 0.86em;
	opacity: 0.78;
}

@media (prefers-color-scheme: dark) {
	a.ytt-buy { background: #fff; color: #1d2327; }
	a.ytt-buy.is-best { background: #f8fafc; }
}

@media (max-width: 600px) {
	.ytt-upgrade-buy { flex-direction: column; gap: 1.2em; }
	a.ytt-buy { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------------------
   The free-access banner lives in ytt-card.css (2.17), loaded only for
   somebody who cannot search yet. What stays here is the bar that follows a
   phone reader past it (2.16, unchanged).
   --------------------------------------------------------------------------- */

/* The bar lives outside the card, so it carries the two colours it needs
   rather than inheriting the card's custom properties. */
.ytt-sticky {
	--ytt-rust: #c2410c;
	--ytt-rust-dark: #9a3412;
	display: none;
}

.ytt-sticky[hidden] {
	display: none;
}

@media (max-width: 600px) {
	/* the bar that follows the reader once the card has gone by */
	.ytt-sticky:not([hidden]) {
		display: flex;
		position: fixed;
		z-index: 99990;
		right: 8px;
		bottom: 8px;
		left: 8px;
		gap: 8px;
		align-items: stretch;
		padding: 8px;
		border-radius: 12px;
		background: #0b2545;
		box-shadow: 0 8px 24px rgba(11, 37, 69, 0.35);
	}

	a.ytt-sticky-go {
		flex: 1 1 auto;
		padding: 12px 14px;
		/* the rust reads 2.97:1 against the navy panel, just under 1.4.11, so
		   the button carries its own light edge */
		border: 1px solid rgba(255, 255, 255, 0.55);
		border-radius: 8px;
		background: var(--ytt-rust);
		color: #fff;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.3;
		text-align: center;
		text-decoration: none;
	}

	a.ytt-sticky-go:hover,
	a.ytt-sticky-go:focus-visible {
		background: var(--ytt-rust-dark);
		color: #fff;
		text-decoration: none;
	}

	button.ytt-sticky-close {
		flex: 0 0 auto;
		width: 40px;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.45);
		border-radius: 8px;
		background: transparent;
		color: #fff;
		font: inherit;
		font-size: 20px;
		line-height: 1;
		cursor: pointer;
	}

	button.ytt-sticky-close:hover,
	button.ytt-sticky-close:focus-visible {
		background: rgba(255, 255, 255, 0.16);
	}
}

/* The line above My Account's forms, for somebody sent there by the card. */
.ytt-account-intro {
	margin: 0 0 1em;
	padding: 0.7em 1em;
	border-left: 4px solid #c2410c;
	background: #f8fafc;
	color: #334155;
	font-size: 1.05em;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   The "Try it" chips under the search box, for members (2.12).
   --------------------------------------------------------------------------- */

.ytt-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45em;
	margin: 0.6em 0 0;
}

.ytt-chips-label {
	font-size: 0.9em;
	opacity: 0.7;
}

button.ytt-chip {
	padding: 0.28em 0.75em;
	border: 1px solid rgba(0, 0, 0, 0.22);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.9em;
	line-height: 1.5;
	cursor: pointer;
}

button.ytt-chip:hover,
button.ytt-chip:focus-visible {
	border-color: currentColor;
	background: rgba(0, 0, 0, 0.05);
}

@media (prefers-color-scheme: dark) {
	button.ytt-chip { border-color: rgba(255, 255, 255, 0.3); }
	button.ytt-chip:hover,
	button.ytt-chip:focus-visible { background: rgba(255, 255, 255, 0.08); }
}