/* Product Info Sign — front-end styles.
 * Colour and size come from the per-sign CSS vars --blf-is-color / --blf-is-base
 * (set inline by the JS from the entry's own settings). Everything below is drawn
 * from --blf-is-size, so one number scales the box, its frame and the symbol. */

.blf-infosign-wrap {
	--blf-is-size: var(--blf-is-base, 18px);
	position: relative;
	display: inline-flex;
	/* The sign sits on the centre line of whatever holds it: align-items centres the
	   sign inside the wrap, align-self centres the wrap inside a flex parent (the
	   attribute label cell, an option swatch, the spec-table tag row — that last one
	   is inline-flex, whose default `stretch` would otherwise ride the sign up to the
	   top of the row), and vertical-align does the same in a plain inline context.
	   line-height:0 keeps inherited leading from adding invisible height. */
	align-items: center;
	align-self: center;
	vertical-align: middle;
	line-height: 0;
	margin-left: 4px;
}

/* Inside a buy-box option swatch: keep the sign upright and clickable on its own,
   independent of the swatch's own text/hover styling. */
.blf-infosign-wrap--swatch {
	margin-left: 6px;
	cursor: default;
}

/* Whole-attribute sign: sits inline right after the attribute name in the
   label cell (th.label / td.label). */
.blf-infosign-wrap--attr {
	margin: 0 0 0 6px;
}

/* [blf_info_sign] — inline in running text, on the line it was typed into. */
.blf-infosign-sc {
	display: inline;
}

.blf-infosign-wrap--inline {
	margin: 0 2px;
}

/* Global (no-attribute) button bar above the buy box. */
.blf-infosign-globalbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
}

.blf-infosign-wrap--global {
	margin-left: 0;
}

/* Render the global sign a touch larger so it reads as a standalone button — as a
   multiplier, so the configured size still governs. */
.blf-infosign-wrap--global {
	--blf-is-size: calc(var(--blf-is-base, 18px) * 1.4);
}

.blf-infosign {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box; /* the frame is drawn inside the size, so it stays square */
	width: var(--blf-is-size, 18px);
	height: var(--blf-is-size, 18px);
	padding: 0;
	color: var(--blf-is-color, #1858A8);
	background: transparent;
	border: 0;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
	transition: transform .12s ease, background-color .12s ease;
}

.blf-infosign:hover,
.blf-infosign:focus-visible {
	transform: translateY(-1px);
	outline: none;
}

/* The symbol centres itself in the box, whatever the box size is. */
.blf-infosign__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.blf-infosign__icon svg {
	width: calc(var(--blf-is-size, 18px) * .78);
	height: calc(var(--blf-is-size, 18px) * .78);
	display: block;
}

.blf-infosign__letter {
	display: block;
	font-size: calc(var(--blf-is-size, 18px) * .67);
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

.blf-infosign__img {
	max-width: calc(var(--blf-is-size, 18px) * .89);
	max-height: calc(var(--blf-is-size, 18px) * .89);
	display: block;
	margin: auto;
	object-fit: contain;
}

/* Frame shapes */
.blf-infosign--shape-circle,
.blf-infosign--shape-square {
	width: calc(var(--blf-is-size, 18px) + 2px);
	height: calc(var(--blf-is-size, 18px) + 2px);
	border: 1px solid var(--blf-is-color, #1858A8);
}

.blf-infosign--shape-circle {
	border-radius: 50%;
}

.blf-infosign--shape-square {
	border-radius: 4px;
}

/* Line styles (apply to the framed shapes) */
.blf-infosign--style-solid  { border-style: solid; }
.blf-infosign--style-dashed { border-style: dashed; }
.blf-infosign--style-dotted { border-style: dotted; }
.blf-infosign--style-double { border-style: double; border-width: 3px; }

/* Popover */
.blf-infosign-pop {
	position: absolute;
	z-index: 40;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: 280px;
	padding: 10px 12px;
	background: #fff;
	color: #1d2327;
	font-size: 13px;
	line-height: 1.5;
	text-align: left;
	border: 1px solid #e2e6ee;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(11, 44, 90, .16);
}

.blf-infosign-pop[hidden] {
	display: none;
}

/* little arrow */
.blf-infosign-pop::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #fff;
}

.blf-infosign-pop p:first-child { margin-top: 0; }
.blf-infosign-pop p:last-child  { margin-bottom: 0; }

/* Keep the popover on-screen near the right edge */
@media (max-width: 480px) {
	.blf-infosign-pop {
		max-width: 220px;
	}
}

/* Anchor-content block injected after the tabs section / inside the overview text */
.blf-infosign-anchor {
	margin: 18px 0;
	padding: 16px 18px;
	background: #f6f8fc;
	border: 1px solid #e2e6ee;
	border-left: 4px solid var(--bl-blue, #1858A8);
	border-radius: 8px;
	scroll-margin-top: 90px;
}

.blf-infosign-anchor:focus {
	outline: none;
}

.blf-infosign-anchor__title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--bl-navy, #0B2C5A);
}

.blf-infosign-anchor__body p:first-child { margin-top: 0; }
.blf-infosign-anchor__body p:last-child  { margin-bottom: 0; }

/* When placed inside the overview text, tighten the top margin a touch */
.blf-overview__text .blf-infosign-anchor {
	margin-top: 14px;
}