/* SX-Plugin — Browser Frame

   The window is drawn, not photographed: a bar, three lights and a rounded box.
   That keeps it crisp at any width and adds nothing to the page weight.

   Light only by default, in line with the rest of the site. Every colour is a
   variable, so a dark treatment is a matter of setting them. */

.sxs--browser .sxbf {
	--sxbf-radius: 12px;
	--sxbf-chrome: #F1F1F1;
	--sxbf-screen: #F7F7F7;
	--sxbf-border: #E2E2E2;
	--sxbf-aspect: 16 / 9;

	display: block;
	max-width: 100%;
	margin-inline: auto;
	overflow: hidden;
	border: 1px solid var(--sxbf-border);
	border-radius: var(--sxbf-radius);
	background: var(--sxbf-screen);
	color: inherit;
	text-decoration: none;
}

/* The frame can be a link; themes skin bare links, so hold the treatment. */
.sxs--browser a.sxbf:hover,
.sxs--browser a.sxbf:focus {
	color: inherit;
	text-decoration: none;
}

.sxs--browser a.sxbf:focus-visible {
	outline: 2px solid var(--sxs-brand-600);
	outline-offset: 3px;
}

/* --------------------------------------------------------------- chrome */

.sxs--browser .sxbf__chrome {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--sxbf-border);
	background: var(--sxbf-chrome);
}

.sxs--browser .sxbf__dots {
	display: flex;
	flex: 0 0 auto;
	gap: 7px;
}

.sxs--browser .sxbf__dots i {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #D6D6D6;
}

.sxs--browser .sxbf__dots i:nth-child(1) { background: #F45B4F; }
.sxs--browser .sxbf__dots i:nth-child(2) { background: #F5BE4F; }
.sxs--browser .sxbf__dots i:nth-child(3) { background: #4FC456; }

.sxs--browser .sxbf__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	max-width: 420px;
	height: 22px;
	margin-inline: auto;
	padding-inline: 12px;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.06);
	font-size: 12px;
	line-height: 1;
	color: var(--sxs-ink-600);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* The address is Latin even on an Arabic page, so pin its direction. */
.sxs--browser .sxbf__url {
	direction: ltr;
	unicode-bidi: isolate;
}

/* Matches the width of the lights so the bar centres against the whole row. */
.sxs--browser .sxbf__pad {
	flex: 0 0 auto;
	width: 47px;
}

/* --------------------------------------------------------------- screen */

.sxs--browser .sxbf__screen {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var(--sxbf-aspect);
	background: var(--sxbf-screen);
}

/* Elementor ships `.elementor img { height: auto }` at 0,1,1, which would beat a
   bare class here and collapse the fitted image. */
.sxs--browser .sxbf__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: top center;
}

/* "Follow the image" needs no rule of its own: the control writes
   --sxbf-aspect: auto, and `aspect-ratio: auto` is exactly the off switch. */

.sxs--browser .sxbf__empty {
	padding: 40px 20px;
	font-size: 14px;
	color: var(--sxs-ink-600);
}

.sxs--browser .sxbf__caption {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--sxs-ink-600);
	text-align: center;
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 600px) {
	.sxs--browser .sxbf__chrome {
		gap: 10px;
		padding: 8px 10px;
	}

	.sxs--browser .sxbf__dots i {
		width: 9px;
		height: 9px;
	}

	.sxs--browser .sxbf__pad {
		width: 0;
	}

	.sxs--browser .sxbf__bar {
		height: 20px;
		font-size: 11px;
	}
}

/* The traffic lights stay at the leading edge, which flips with the page. */
[dir="rtl"] .sxs--browser .sxbf__chrome {
	flex-direction: row-reverse;
}