/**
 * JuryBoard Install Card — frontend styles.
 *
 * Same contract as the other JuryBoard widgets: every value an Elementor
 * control can change is a custom property on .jb-install-card, and the controls
 * write those properties on {{WRAPPER}} .jb-install-card. The values below are
 * defaults only.
 *
 * Do not add responsive overrides here for anything a control sets a default
 * for — Elementor emits its desktop value at a higher specificity and would win
 * at every breakpoint. Responsive defaults belong in the PHP control definitions.
 */

.jb-install-card {
	/* Card */
	--jb-ic-accent: #2563eb;
	--jb-ic-bg: #eef4fd;
	--jb-ic-bar-width: 5px;
	--jb-ic-bar-color: #2563eb;
	--jb-ic-radius: 16px;
	--jb-ic-pad: 28px;
	--jb-ic-shadow: 0 4px 18px rgba(15, 23, 42, .07);

	/* Icon tile */
	--jb-ic-tile-size: 56px;
	--jb-ic-tile-radius: 14px;
	--jb-ic-tile-bg: #dbe9fb;
	--jb-ic-icon-size: 26px;
	--jb-ic-icon-color: #2563eb;
	--jb-ic-head-gap: 16px;
	--jb-ic-head-space: 24px;

	/* Title */
	--jb-ic-title-color: #0f2350;
	--jb-ic-title-size: 22px;
	--jb-ic-title-weight: 800;
	--jb-ic-title-lh: 1.28;
	--jb-ic-title-ls: -.015em;

	/* Steps */
	--jb-ic-step-color: #12275b;
	--jb-ic-step-size: 16px;
	--jb-ic-step-weight: 600;
	--jb-ic-step-lh: 1.4;
	--jb-ic-step-gap: 13px;
	--jb-ic-step-space: 20px;
	--jb-ic-num-size: 24px;
	--jb-ic-num-font: 13px;
	--jb-ic-num-bg: #2563eb;
	--jb-ic-num-color: #ffffff;
	--jb-ic-link-color: #2563eb;
	--jb-ic-link-weight: 700;

	/* Demo player */
	--jb-ic-fig-space: 24px;
	--jb-ic-fig-bg: #ffffff;
	--jb-ic-fig-radius: 12px;
	--jb-ic-fig-pad: 12px;
	--jb-ic-fig-border: #e3e9f2;
	--jb-ic-fig-shadow: 0 1px 3px rgba(15, 23, 42, .05);
	--jb-ic-screen-ratio: 16 / 9;
	--jb-ic-screen-bg: #f7fafe;
	--jb-ic-win-border: #dde5f0;
	--jb-ic-play-size: 52px;
	--jb-ic-play-bg: #2563eb;
	--jb-ic-play-color: #ffffff;
	--jb-ic-demo-color: #12275b;
	--jb-ic-demo-size: 15px;

	/* Lightbox — inherited by the trigger and copied onto .jb-vl by the JS.
	   Everything the lightbox needs beyond these two falls back to its own
	   stylesheet's defaults. */
	--jb-vl-ratio: 16 / 9;
	--jb-vl-max-width: 980px;

	position: relative;
	box-sizing: border-box;

	/* Room for the accent bar on top of the normal padding, so the bar reads as
	   a band above the content rather than eating into it. */
	padding: calc(var(--jb-ic-pad) + var(--jb-ic-bar-width)) var(--jb-ic-pad) var(--jb-ic-pad);
	background: var(--jb-ic-bg);
	border-radius: var(--jb-ic-radius);
	box-shadow: var(--jb-ic-shadow);

	/* Lets the card's own radius clip the bar's top corners. A border-top would
	   be simpler, but browsers taper a border where it meets a rounded corner,
	   which thins the bar to nothing at both ends. Clipping keeps it full width
	   and constant thickness — and works whatever shape the radius control
	   writes, which a border-radius on the bar itself would not. */
	overflow: hidden;
}

.jb-install-card::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: var(--jb-ic-bar-width);
	background: var(--jb-ic-bar-color);
}

/* ---------------------------------------------------------------- Head */

.jb-install-card__head {
	display: flex;
	align-items: center;
	gap: var(--jb-ic-head-gap);
	margin-bottom: var(--jb-ic-head-space);
}

.jb-install-card__icon {
	flex: 0 0 var(--jb-ic-tile-size);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--jb-ic-tile-size);
	height: var(--jb-ic-tile-size);
	border-radius: var(--jb-ic-tile-radius);
	background: var(--jb-ic-tile-bg);
	color: var(--jb-ic-icon-color);
	font-size: var(--jb-ic-icon-size);
	line-height: 1;
}

/* Covers the built-in fallback glyph, an Elementor SVG upload, and an icon
   font — the last one sizes off font-size, which is set above. */
.jb-install-card__icon svg {
	width: var(--jb-ic-icon-size);
	height: var(--jb-ic-icon-size);
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Uploaded SVGs usually carry their own fill and no stroke; forcing the stroke
   rules above onto them would hollow them out. */
.jb-install-card__icon .e-font-icon-svg,
.jb-install-card__icon svg[data-jb-user-icon] {
	fill: currentColor;
	stroke: none;
}

.jb-install-card__icon i {
	font-size: var(--jb-ic-icon-size);
	color: currentColor;
}

.jb-install-card__title {
	margin: 0;
	padding: 0;
	color: var(--jb-ic-title-color);
	font-size: var(--jb-ic-title-size);
	font-weight: var(--jb-ic-title-weight);
	line-height: var(--jb-ic-title-lh);
	letter-spacing: var(--jb-ic-title-ls);
}

/* --------------------------------------------------------------- Steps */

.jb-install-card__steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jb-install-card__steps li {
	display: flex;
	align-items: flex-start;
	gap: var(--jb-ic-step-gap);
	margin: 0 0 var(--jb-ic-step-space);
	padding: 0;
	color: var(--jb-ic-step-color);
	font-size: var(--jb-ic-step-size);
	font-weight: var(--jb-ic-step-weight);
	line-height: var(--jb-ic-step-lh);
}

/* Themes that decorate list items reach these too, and the number circle is
   already doing that job. */
.jb-install-card__steps li::before,
.jb-install-card__steps li::marker {
	content: none;
}

.jb-install-card__steps li:last-child {
	margin-bottom: 0;
}

.jb-install-card__num {
	flex: 0 0 var(--jb-ic-num-size);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--jb-ic-num-size);
	height: var(--jb-ic-num-size);
	border-radius: 50%;
	background: var(--jb-ic-num-bg);
	color: var(--jb-ic-num-color);
	font-size: var(--jb-ic-num-font);
	font-weight: 700;
	line-height: 1;

	/* The number is a circle beside multi-line text, so it needs to sit on the
	   first line's optical centre rather than its box top. */
	margin-top: calc((1em * var(--jb-ic-step-lh) - var(--jb-ic-num-size)) / 2);
}

.jb-install-card__step {
	min-width: 0;
}

.jb-install-card__link {
	color: var(--jb-ic-link-color);
	font-weight: var(--jb-ic-link-weight);
	text-decoration: none;
}

.jb-install-card__link:hover,
.jb-install-card__link:focus-visible {
	text-decoration: underline;
}

/* Emphasised label with no URL attached yet — same weight, no link colour, so
   an unfinished step does not look clickable. */
.jb-install-card__label {
	font-weight: var(--jb-ic-link-weight);
}

/* --------------------------------------------------------- Demo player

   The figure is the browser chrome; .jb-install-card__screen is the video
   surface inside it. With a thumbnail uploaded the screen also carries a scrim,
   because a play button and a label sitting on someone's screenshot are
   otherwise unreadable at whatever brightness that image happens to be. */

.jb-install-card__figure {
	margin: var(--jb-ic-fig-space) 0 0;
	padding: var(--jb-ic-fig-pad);
	background: var(--jb-ic-fig-bg);
	border: 1px solid var(--jb-ic-fig-border);
	border-radius: var(--jb-ic-fig-radius);
	box-shadow: var(--jb-ic-fig-shadow);
}

.jb-install-card__demo {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Only a demo with a video attached is an anchor; without one it stays a div,
   so the play button never advertises a click that does nothing. */
.jb-install-card__demo[href] {
	cursor: pointer;
}

.jb-install-card__demo[href]:focus-visible {
	outline: 2px solid var(--jb-ic-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.jb-install-card__dots {
	display: flex;
	gap: 5px;
	margin: 2px 0 10px 4px;
}

.jb-install-card__dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #d6ddea;
}

.jb-install-card__screen {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	aspect-ratio: var(--jb-ic-screen-ratio);
	background: var(--jb-ic-screen-bg);
	border: 1px solid var(--jb-ic-win-border);
	border-radius: 10px;

	/* Keeps a cover-fitted thumbnail inside the rounded corners. */
	overflow: hidden;
}

.jb-install-card__thumb {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jb-install-card__screen--has-thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 15, 31, .18) 0%, rgba(8, 15, 31, .58) 100%);
}

/* Above the scrim. */
.jb-install-card__play,
.jb-install-card__demo-label {
	position: relative;
	z-index: 1;
}

.jb-install-card__play {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--jb-ic-play-size);
	height: var(--jb-ic-play-size);
	border-radius: 50%;
	background: var(--jb-ic-play-bg);
	color: var(--jb-ic-play-color);
	box-shadow: 0 6px 18px rgba(15, 23, 42, .28);
	transition: transform .2s ease;
}

.jb-install-card__play svg {
	width: 38%;
	height: 38%;
	fill: currentColor;
	stroke: none;
}

.jb-install-card__demo[href]:hover .jb-install-card__play,
.jb-install-card__demo[href]:focus-visible .jb-install-card__play {
	transform: scale(1.07);
}

.jb-install-card__demo-label {
	color: var(--jb-ic-demo-color);
	font-size: var(--jb-ic-demo-size);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.005em;
}

.jb-install-card__screen--has-thumb .jb-install-card__demo-label {
	color: #ffffff;
	text-shadow: 0 1px 3px rgba(8, 15, 31, .5);
}

@media (prefers-reduced-motion: reduce) {
	.jb-install-card__play {
		transition: none;
	}

	.jb-install-card__demo[href]:hover .jb-install-card__play,
	.jb-install-card__demo[href]:focus-visible .jb-install-card__play {
		transform: none;
	}
}