/**
 * Straelos storefront.
 *
 * Everything is scoped under .straelos-storefront so it cannot leak into the
 * host theme, and the theme cannot easily leak in. That matters more than usual
 * here: this stylesheet has to survive being dropped into Divi, Elementor, a
 * block theme, or a fifteen-year-old classic theme, without any of them
 * agreeing on what an <a> or a <section> looks like.
 *
 * Colours come from CSS custom properties written inline by
 * Straelos_Storefront_Renderer::branding_style(), so a customer's branding is
 * one <style> tag rather than generated rules, and a child theme can override
 * any of it with ordinary specificity - no !important anywhere.
 */

.straelos-storefront {
	/* Fallbacks; the inline <style> overrides these with the customer's own. */
	--straelos-accent: #0f5f54;
	--straelos-text: #1a1a17;
	--straelos-muted: #6b7280;
	--straelos-surface: #ffffff;
	--straelos-background: #f5f3ef;
	--straelos-border: rgba( 0, 0, 0, 0.08 );
	--straelos-radius: 10px;
	--straelos-gap: 10px;

	box-sizing: border-box;
	/*
	 * `var(--straelos-measure,640px)`: an explicit `width=` attribute (which
	 * only ever sets --straelos-measure, never writes max-width directly - see
	 * Straelos_Storefront_Layout::width_class()) overrides this default; with
	 * no attribute the custom property is unset and the fallback applies,
	 * unchanged from before this existed.
	 */
	max-width: var( --straelos-measure, 640px );
	margin: 0 auto;
	padding: 24px 16px 48px;
	color: var( --straelos-text );
	font-size: 16px;
	line-height: 1.5;

	/*
	 * `start`, NEVER `left` - here and on every other side-specific property
	 * in this file (inline-start/-end margins, not left/right). The reset exists
	 * to stop a theme centring the storefront; `left` also forced every
	 * right-to-left page (Arabic, Hebrew, Persian) to read ragged the wrong way.
	 * A logical property is identical on a left-to-right page and needs no
	 * second -rtl.css to keep in step.
	 */
	text-align: start;
}

.straelos-storefront *,
.straelos-storefront *::before,
.straelos-storefront *::after {
	box-sizing: inherit;
}

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

.straelos-profile {
	text-align: center;
	margin-bottom: 28px;
}

.straelos-profile__avatar {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	margin: 0 auto 12px;
	border: 3px solid var( --straelos-surface );
	box-shadow: 0 1px 2px rgba( 26, 26, 23, 0.1 );
}

.straelos-profile__name {
	margin: 0 0 8px;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var( --straelos-text );
}

/*
 * `line-height` DECLARED, because a bio is the one paragraph of running prose on
 * a storefront and it was inheriting whatever leading the creator's theme sets
 * on `body` - which on a theme tuned for long-form articles is loose enough to
 * pull a three-line bio apart from the name above it.
 */
.straelos-profile__bio {
	color: var( --straelos-muted );
	font-size: 0.9375rem;
	line-height: 1.55;
	margin: 0 auto;
	max-width: 40ch;
	text-wrap: pretty;
}

.straelos-profile__socials {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
}

/* MEASURED as a 21px-tall hit target before this: a bare 0.875rem text link is
   whatever the line box makes it, which on a phone is the width of the word and
   nothing else. These sit directly under the bio, so a mis-tap opens somebody's
   Instagram instead of scrolling. Padded to 44px vertically - WCAG 2.5.5 - and
   the gap tightens so the row does not grow. Still muted, still secondary; it is
   the target that changes, not the emphasis. */
.straelos-profile__social {
	align-items: center;
	border: 1px solid var( --straelos-border );
	border-radius: 999px;
	color: var( --straelos-muted );
	display: inline-flex;
	font-size: 0.8125rem;
	font-weight: 500;
	min-height: 44px;
	padding: 6px 12px;
	text-decoration: none;
}

.straelos-profile__social:hover,
.straelos-profile__social:focus {
	color: var( --straelos-accent );
	text-decoration: underline;
}

.straelos-profile__social:focus-visible {
	outline: 2px solid var( --straelos-accent );
	outline-offset: 2px;
}

/* An icon link is square rather than pill-shaped, because there is no word to
   set its width - but it keeps the SAME 44px minimum in BOTH directions, so the
   hit target the comment above exists to protect does not shrink when the text
   is replaced by a mark. An unrecognised host still renders the text pill. */
.straelos-profile__social--icon {
	justify-content: center;
	min-width: 44px;
	padding: 6px;
}

/* The mark inherits the link's own colour through `currentColor`, so hover,
   focus and scheme="dark" all keep working with no second palette. */
.straelos-profile__social-icon {
	display: block;
	height: 20px;
	width: 20px;
}

/* CLIPPED, NOT display:none AND NOT hidden - a screen reader must still read
   it, which is the whole point: an icon-only link would otherwise be an
   unlabelled target. The 1px-clip idiom is what WordPress core's own
   .screen-reader-text uses; this is prefixed so it cannot collide with a
   theme's. */
.straelos-visually-hidden {
	border: 0;
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ---------------------------------------------------------------------------
   Sections
   --------------------------------------------------------------------------- */

.straelos-section {
	margin: 0 0 28px;
}

.straelos-section__title {
	margin: 0 0 12px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --straelos-muted );
}

.straelos-section__blocks {
	display: flex;
	flex-direction: column;
	gap: var( --straelos-gap );
}

/* ---------------------------------------------------------------------------
   Blocks - shared
   --------------------------------------------------------------------------- */

.straelos-block {
	display: block;
	position: relative;
	background: var( --straelos-surface );
	border: 1px solid var( --straelos-border );
	border-radius: var( --straelos-radius );
	color: inherit;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.straelos-block:hover,
.straelos-block:focus-visible {
	transform: translateY( -2px );
	border-color: var( --straelos-accent );
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.08 );
}

.straelos-block:focus-visible {
	outline: 2px solid var( --straelos-accent );
	outline-offset: 2px;
}

/* Respect a visitor's motion preference. */
@media ( prefers-reduced-motion: reduce ) {
	.straelos-block {
		transition: none;
	}

	.straelos-block:hover,
	.straelos-block:focus-visible {
		transform: none;
	}
}

.straelos-block__title {
	display: block;
	font-weight: 600;
	line-height: 1.35;
	color: var( --straelos-text );
}

.straelos-block__excerpt {
	display: block;
	margin-top: 4px;
	font-size: 0.875rem;
	color: var( --straelos-muted );
}

/*
 * THE PRICE OUTRANKS THE SUBTITLE, which it did not: both were `0.875rem`, so
 * the single most decision-relevant string on a storefront card was set in the
 * same type as the sentence describing it and smaller than the title.
 *
 * `tabular-nums` because a column of cards is a column of prices, and
 * proportional digits make them ragged for no reason.
 *
 * COLOUR IS THE PAGE'S OWN TEXT, NOT THE ACCENT - the accent is reserved for
 * the one thing on a card that's actually a call to action (the CTA pill / the
 * button-style block, which both override this back to on-accent below). A
 * price in accent colour next to a CTA in accent colour reads as two calls to
 * action competing, not one price and one button.
 */
.straelos-block__price {
	color: var( --straelos-text );
	display: block;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-top: 6px;
}

/*
 * THE "WAS" PRICE ON A SALE. `<del>` renders line-through natively - the
 * decoration is what carries the meaning, so it survives regardless of which
 * colour applies below. `<ins>` is set text-decoration: none because its
 * native underline reads as a link inside a card that is already one.
 *
 * MUTED COLOUR ONLY ON THE PAGE'S OWN GROUND. `.straelos-block--button`
 * overrides this back to inherit, the same rule `.straelos-block--button
 * .straelos-block__price` already established (CLAUDE.md's design-pass
 * section: wherever text sits on a creator-chosen fill rather than the page,
 * font-weight is the only safe de-emphasis lever, never a second derived
 * colour) - a muted grey measured fine against the page can be very nearly
 * invisible against an arbitrary accent fill.
 */
.straelos-block__price-was {
	color: var( --straelos-muted );
	font-weight: 500;
	margin-inline-end: 0.3em;
}

.straelos-block__price-now {
	text-decoration: none;
}

.straelos-block--button .straelos-block__price-was {
	color: inherit;
	font-weight: 400;
}

.straelos-block__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
   Button style
   --------------------------------------------------------------------------- */

.straelos-block--button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 17px 18px;
	text-align: start;
	background: var( --straelos-accent );
	border-color: transparent;
}

.straelos-block--button .straelos-block__body {
	display: block;
	min-width: 0;
}

.straelos-block--button .straelos-block__title,
.straelos-block--button .straelos-block__price {
	color: var( --straelos-on-accent, #fff );
}

.straelos-block--button .straelos-block__chevron {
	color: var( --straelos-on-accent, #fff );
	opacity: 0.6;
}

/*
 * WEIGHT, NOT COLOUR - because this price sits ON the accent fill, not on the
 * page ground. It inherits `--straelos-on-accent` from the rule above, which is
 * derived by WCAG luminance and is the only value guaranteed readable there.
 *
 * MEASURED: the first attempt at removing this rule's `opacity: 0.85` reached
 * for `--straelos-muted` like every other de-emphasised string in this file, and
 * `#6b7280` on the shipped `#2563eb` accent measures **1.05:1** - the price on a
 * button block was very nearly invisible. There is no "muted on accent" token
 * and there should not be one: a second derived colour would have to clear
 * contrast against every accent a creator can pick, which is what makes
 * `--straelos-on-accent` a binary choice in the first place.
 *
 * So the de-emphasis is carried by weight alone. Anywhere text sits on a
 * creator-chosen ground rather than the page, that is the only safe lever.
 */
.straelos-block--button .straelos-block__price {
	font-weight: 500;
	margin-top: 2px;
}

/* ---------------------------------------------------------------------------
   Callout style
   --------------------------------------------------------------------------- */

.straelos-block--callout {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
}

.straelos-block--callout .straelos-block__media {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	overflow: hidden;
	/*
	 * DERIVED, NOT A FLAT LITERAL. tests/e2e/specs/design-measure.spec.js
	 * exercises the floor this formula provides: with a creator's own
	 * --straelos-radius set very small, max(2px, calc(radius - 6px)) still
	 * resolves to a real 2px corner instead of collapsing to a sharp one that
	 * "stopped being tracked" once the setting existed. A flat 6px here would
	 * have silently deleted that anti-collapse behaviour rather than changed
	 * a look.
	 */
	border-radius: max( 2px, calc( var( --straelos-radius ) - 6px ) );
	background: var( --straelos-background );
}

.straelos-block--callout .straelos-block__body {
	flex: 1 1 auto;
	min-width: 0;
}

.straelos-block--callout .straelos-block__price {
	margin-top: 8px;
	/*
	 * ACCENT, NOT THE BASE RULE'S PAGE-TEXT COLOUR - this is the one block style
	 * where the price sits directly beside the chevron as the card's whole call
	 * to action (no separate CTA pill the way the preview/button styles have),
	 * so it gets the same treatment those two already carry.
	 */
	color: var( --straelos-accent );
}

.straelos-block__chevron {
	flex: 0 0 auto;
	font-size: 1.5rem;
	line-height: 1;
	color: var( --straelos-muted );
}

/* ---------------------------------------------------------------------------
   Preview style
   --------------------------------------------------------------------------- */

.straelos-block--preview {
	overflow: hidden;
}

.straelos-block--preview .straelos-block__media--wide {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	background: var( --straelos-background );
}

/* aspect-ratio fallback for older browsers. */
@supports not ( aspect-ratio: 3 / 2 ) {
	.straelos-block--preview .straelos-block__media--wide {
		height: 0;
		padding-bottom: 66.667%;
		position: relative;
	}

	.straelos-block--preview .straelos-block__media--wide img {
		position: absolute;
		inset: 0;
	}
}

.straelos-block--preview .straelos-block__body {
	display: block;
	padding: 18px 20px 20px;
}

.straelos-block--preview .straelos-block__title {
	font-size: 1.125rem;
	font-weight: 700;
}

.straelos-block__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
	/*
	 * ONLY EVER RENDERED BY THE PREVIEW STYLE (see render_preview() - button,
	 * callout and embed don't build this element), so the rule to visually
	 * separate the footer from the body above it lives here rather than a
	 * `.straelos-block--preview .straelos-block__footer` selector that would
	 * say the same thing with more specificity for no reason.
	 */
	padding-top: 14px;
	border-top: 1px solid var( --straelos-border );
}

.straelos-block__footer .straelos-block__price {
	margin-top: 0;
}

.straelos-block__cta {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 8px;
	background: var( --straelos-accent );
	color: var( --straelos-on-accent, #fff );
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Embed style
   --------------------------------------------------------------------------- */

.straelos-block--embed {
	padding: 10px 10px 14px;
}

.straelos-block--embed .straelos-block__title {
	margin-inline-start: 8px;
}

.straelos-block__embed {
	position: relative;
	overflow: hidden;
	border-radius: max( 2px, calc( var( --straelos-radius ) - 6px ) );
	margin-bottom: 10px;
}

.straelos-block__embed iframe,
.straelos-block__embed video,
.straelos-block__embed embed,
.straelos-block__embed object {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* ---------------------------------------------------------------------------
   Single-block and landing contexts
   --------------------------------------------------------------------------- */

.straelos-storefront--single,
.straelos-storefront--landing,
.straelos-storefront--buy {
	padding-top: 0;
	padding-bottom: 0;
}

.straelos-landing__content {
	margin-bottom: 24px;
}

/* ---------------------------------------------------------------------------
   Empty state (visible only to an administrator)
   --------------------------------------------------------------------------- */

.straelos-empty {
	padding: 24px;
	border: 1px dashed var( --straelos-border, rgba( 0, 0, 0, 0.15 ) );
	border-radius: var( --straelos-radius, 14px );
	background: var( --straelos-background, #f9fafb );
	text-align: center;
	color: var( --straelos-muted, #6b7280 );
}

.straelos-empty p {
	margin: 0 0 8px;
}

.straelos-empty__cta {
	display: inline-block;
	margin-top: 4px;
	padding: 9px 18px;
	border-radius: 999px;
	background: var( --straelos-accent, #2563eb );
	color: var( --straelos-on-accent, #fff );
	font-weight: 600;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Wider viewports: two-up preview blocks once there is room.
   --------------------------------------------------------------------------- */

@media ( min-width: 720px ) {
	.straelos-storefront {
		/*
		 * SAME PROPERTY, SAME PRECEDENCE RULE. An explicit `width=` still wins
		 * at this viewport too: --straelos-measure is one value regardless of
		 * media query, so a set custom property beats ITS OWN fallback here
		 * exactly as it does above - the responsive bump only ever changes
		 * which fallback applies, never overrides a real setting.
		 */
		max-width: var( --straelos-measure, 720px );
	}
}

/* ---------------------------------------------------------------------------
   Buy control

   Used by [straelos_checkout] and by the product's own permalink, which render
   the same markup through Straelos_Product_Purchase.

   The <button> reset is not optional. storefront.css sets only box-sizing on
   descendants, so without this a raw button inherits the active theme's own
   button rules - Divi's in particular bring their own padding, border, font and
   ::after glyph - and the buy control would not match the storefront CTAs it
   sits beside.
   --------------------------------------------------------------------------- */

.straelos-storefront--buy {
	margin-top: var( --straelos-gap );
}

.straelos-buy {
	margin: 0;
}

.straelos-buy__button {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 18px 20px;
	border: 1px solid transparent;
	border-radius: var( --straelos-radius );
	background: var( --straelos-accent );
	color: var( --straelos-on-accent, #fff );
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.straelos-buy__button::after {
	content: none;
}

/* MEASURED: `filter: brightness( 0.94 )` moved a dark accent by TWO levels and a
   pale one by fifteen, because brightness() is multiplicative - so a creator
   who picked a dark accent got a button that did not appear to respond at all.
   branding_style() now derives an explicit hover that moves by the same
   perceptual step whatever the accent is, and in the direction that keeps
   --straelos-on-accent correct. The fallback keeps the old behaviour for any
   surface rendering without the token. */
.straelos-buy__button:hover,
.straelos-buy__button:focus {
	background: var( --straelos-accent-hover, var( --straelos-accent ) );
	color: var( --straelos-on-accent, #fff );
}

/* Never rely on colour alone, and never remove the ring - this is the only
   affordance a keyboard user has for the control that spends their money. */
.straelos-buy__button:focus-visible {
	outline: 2px solid var( --straelos-text );
	outline-offset: 2px;
}

/*
 * DISABLED IS A DASHED OUTLINE AND MUTED TEXT, NOT `opacity: 0.55`. Composited
 * over white that drags the label to roughly 2.2:1 - and while WCAG exempts a
 * disabled control from 1.4.3, a label nobody can read is not a useful thing to
 * show somebody wondering why a button will not respond.
 */
.straelos-buy__button[disabled] {
	background: transparent;
	border: 1px dashed var( --straelos-border );
	color: var( --straelos-muted );
	cursor: default;
}

/*
 * OUTLINED AT REST AND OUTLINED ON HOVER. It used to be outlined at rest only:
 * `.straelos-buy__button:hover` sets the accent fill at specificity (0,1,1) and
 * this modifier is (0,1,0), so hovering a Download button repainted it as a
 * call to action - the state the outline exists to say it is not.
 */
.straelos-buy__button--owned,
.straelos-buy__button--owned:hover,
.straelos-buy__button--owned:focus {
	background: transparent;
	border-color: var( --straelos-accent );
	color: var( --straelos-accent );
}

.straelos-buy__signin {
	display: block;
	padding: 16px 20px;
	border: 1px dashed var( --straelos-border );
	border-radius: var( --straelos-radius );
	color: var( --straelos-accent );
	text-align: center;
	text-decoration: none;
}

.straelos-buy__owned {
	margin: 0;
	color: var( --straelos-muted );
	text-align: center;
}

/* Clipped, not hidden: display:none and visibility:hidden both remove text from
   the accessible name, which is the one thing this span exists to contribute. */
.straelos-buy__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.straelos-buy__status {
	margin: 8px 0 0;
	min-height: 1em;
	color: var( --straelos-muted );
	font-size: 14px;
	text-align: center;
}

.straelos-buy__status.is-error {
	color: var( --straelos-danger, #a32a1a );
	font-weight: 600;
}

.straelos-buy__note {
	margin: 8px 0 0;
	color: var( --straelos-muted );
	font-size: 14px;
	text-align: center;
}

.straelos-product__summary {
	margin: 0 0 var( --straelos-gap );
	color: var( --straelos-text );
	line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Consent boxes and the subscribe form

   [straelos_subscribe] and the free-claim buy control both load this file and
   both carry fields, but until these rules neither had a single declaration
   here: the email box, the phone box and every consent line took whatever the
   host theme gives a bare <input>, <label> and <p> - a 20px unbordered field on
   one theme, a full-width one on another, and consent text run straight into
   the checkbox. Mirrors booking.css's own field and consent rules, which settled
   the same questions for the booking form.

   A CONSENT ROW IS A LABEL BESIDE A BOX, NEVER A STRETCHED FIELD, and nothing
   here makes a box look required or unimportant - CLAUDE.md records these
   boxes being separate, unchecked and optional as section 9.7 requirements,
   which makes a box nobody can recognise as one a compliance problem, not a
   cosmetic one. Nothing here sets `display` on `.straelos-subscribe__sms`
   either: it ships `hidden` until subscribe.js has a timezone, and a display
   rule would override the attribute and show a field that submits nothing.
   --------------------------------------------------------------------------- */

.straelos-subscribe__label {
	display: block;
	margin: var( --straelos-gap, 10px ) 0 4px;
	font-weight: 600;
	color: var( --straelos-text, #1a1a17 );
}

.straelos-subscribe__input {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var( --straelos-border, rgba( 0, 0, 0, 0.08 ) );
	border-radius: 8px;
	background: var( --straelos-surface, #fff );
	color: var( --straelos-text, #1a1a17 );
	font: inherit;
}

.straelos-subscribe__input:focus-visible,
.straelos-subscribe__consent input:focus-visible,
.straelos-buy__consent input:focus-visible {
	outline: 2px solid var( --straelos-accent, #0f5f54 );
	outline-offset: 2px;
}

.straelos-subscribe__button {
	margin-top: var( --straelos-gap, 10px );
}

.straelos-subscribe__consent,
.straelos-buy__consent {
	margin: var( --straelos-gap, 10px ) 0 0;
	color: var( --straelos-text, #1a1a17 );
	font-size: 0.875rem;
	line-height: 1.45;
}

.straelos-buy__consent {
	margin: 0 0 var( --straelos-gap, 10px );
}

.straelos-subscribe__consent label,
.straelos-buy__consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
}

.straelos-subscribe__consent input,
.straelos-buy__consent input {
	flex: 0 0 auto;
	margin: 0.2em 0 0;
}

/* ---------------------------------------------------------------------------
   Video

   One player wrapper for every provider, so a provider swap cannot change how
   a lesson page looks. 16:9 with an intrinsic ratio rather than the old
   padding-top hack - supported everywhere that matters since 2021.
   --------------------------------------------------------------------------- */

.straelos-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var( --straelos-radius );
	overflow: hidden;
}

.straelos-video iframe,
.straelos-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------------------------------------------------------------------------
   Video widget
   --------------------------------------------------------------------------- */

.straelos-storefront--video {
	padding-top: 0;
	padding-bottom: 0;
}

.straelos-video-widget__row {
	margin-top: var( --straelos-gap );
}

.straelos-video-widget__label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
	color: var( --straelos-text );
}

/* The file input stays a real, visible, focusable control. Hiding it behind a
   styled div is the usual way this component becomes unreachable by keyboard,
   and drag-and-drop-only is a WCAG 2.1.1 Level A failure. */
.straelos-video-widget__file {
	display: block;
	width: 100%;
	padding: 8px;
	border: 1px solid var( --straelos-border );
	border-radius: 8px;
	background: var( --straelos-surface );
}

.straelos-video-widget__file:focus-visible,
.straelos-video-widget__link:focus-visible,
.straelos-video-widget__button:focus-visible {
	outline: 2px solid var( --straelos-accent );
	outline-offset: 2px;
}

.straelos-video-widget__hint,
.straelos-video-widget__status {
	margin: 6px 0 0;
	font-size: 14px;
	color: var( --straelos-muted );
}

.straelos-video-widget__status.is-error {
	color: var( --straelos-danger, #a32a1a );
	font-weight: 600;
}

/* Purely decorative: aria-hidden in the markup, because everything it does is
   already possible with the input above. */
.straelos-video-widget__drop {
	margin-top: 8px;
	padding: 18px;
	border: 2px dashed var( --straelos-border );
	border-radius: var( --straelos-radius );
	text-align: center;
	color: var( --straelos-muted );
	font-size: 14px;
}

.straelos-video-widget__drop.is-over {
	border-color: var( --straelos-accent );
	color: var( --straelos-accent );
}

.straelos-video-widget__linkrow {
	display: flex;
	gap: 8px;
}

.straelos-video-widget__link {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px;
	border: 1px solid var( --straelos-border );
	border-radius: 8px;
}

.straelos-video-widget__button {
	-webkit-appearance: none;
	appearance: none;
	padding: 10px 16px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var( --straelos-accent );
	color: var( --straelos-on-accent, #fff );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.straelos-video-widget__button[disabled],
.straelos-video-widget__file[disabled],
.straelos-video-widget__link[disabled] {
	background: transparent;
	border: 1px dashed var( --straelos-border );
	color: var( --straelos-muted );
	cursor: default;
}

.straelos-video-widget__bar {
	margin-top: 10px;
	height: 8px;
	border-radius: 4px;
	background: var( --straelos-border );
	overflow: hidden;
}

.straelos-video-widget__bar span {
	display: block;
	height: 100%;
	width: 0;
	background: var( --straelos-accent );
	transition: width 0.2s ease;
}

/* The same motion preference course.css already honours for its own bar: the
   fill still moves, it just stops animating each step. */
@media ( prefers-reduced-motion: reduce ) {
	.straelos-video-widget__bar span {
		transition: none;
	}
}

/* Channel picker. Real buttons in a list, so it is keyboard-operable. */
.straelos-video-widget__channel {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 260px;
	overflow-y: auto;
	border: 1px solid var( --straelos-border );
	border-radius: 8px;
}

.straelos-video-widget__pick {
	-webkit-appearance: none;
	appearance: none;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px;
	border: 0;
	border-bottom: 1px solid var( --straelos-border );
	background: transparent;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.straelos-video-widget__pick:hover {
	background: var( --straelos-background );
}

.straelos-video-widget__pick:focus-visible {
	outline: 2px solid var( --straelos-accent );
	outline-offset: -2px;
}

.straelos-video-widget__pick img {
	flex: 0 0 auto;
	width: 80px;
	height: 45px;
	object-fit: cover;
	border-radius: 4px;
}

/*
 * The buy control when a product sells an appointment: a link to the scheduler
 * rather than a Buy button, because the time has to be chosen before the money
 * is taken. Styled identically so it reads as the same primary action.
 */
.straelos-buy__button--link {
	display: inline-block;
	text-decoration: none;
	text-align: center;
}