/**
 * [B] Juegocito Offers - frontend styles.
 *
 * Every colour, radius, shadow and font comes from Core's tokens.css, and
 * every one of them is written with a fallback: this block renders on a game
 * page, and a game page can be served by a theme that loaded the stylesheet
 * without the token layer. A commercial block that loses its palette is the
 * one block on the page that must not look broken.
 *
 * Two contrast decisions are load-bearing rather than cosmetic:
 *
 * - The sponsored block is separated by a real border and a label, never by
 *   colour alone. Colour alone is invisible to a reader who cannot see it,
 *   and the whole purpose of the block is that the distinction is perceivable.
 * - Coral 700 is used where coral carries meaning against a light surface.
 *   Coral 500 measures about 2.1:1 there, which fails the 3:1 the WCAG asks
 *   of a non-text indicator.
 */

.bdw-jo-block {
	margin: var(--bdw-space-8, 32px) 0;
	padding: var(--bdw-space-6, 24px);
	background: var(--bdw-paper, #FFFDF8);
	border: 1px solid var(--bdw-line, #DED4C6);
	border-radius: var(--bdw-radius-lg, 20px);
	box-shadow: var(--bdw-shadow, 0 1px 2px rgba(22, 36, 31, 0.06));
}

.bdw-jo-block > h2 {
	margin: 0 0 var(--bdw-space-2, 8px);
	font-family: var(--bdw-font-display, inherit);
	color: var(--bdw-heading, var(--bdw-ink, #16241F));
}

.bdw-jo-block h3 {
	margin: var(--bdw-space-6, 24px) 0 var(--bdw-space-3, 12px);
	font-family: var(--bdw-font-display, inherit);
	color: var(--bdw-heading, var(--bdw-ink, #16241F));
}

/* ---------- Disclosure ---------- */

/*
 * Not a tooltip, not a title attribute, not inside a details element. It is
 * the first thing in the block and it is normal body text, because a
 * disclosure somebody has to hover to read is a disclosure most readers never
 * see.
 */
.bdw-jo-disclosure {
	margin: 0 0 var(--bdw-space-4, 16px);
	padding: var(--bdw-space-3, 12px) var(--bdw-space-4, 16px);
	background: var(--bdw-sand, #F3E7D6);
	border-radius: var(--bdw-radius-md, 12px);
	font-size: 14px;
	line-height: 1.5;
	color: var(--bdw-ink, #16241F);
}

.bdw-jo-disclosure a {
	color: var(--bdw-accent, #177C63);
	font-weight: 700;
}

/* ---------- Offer list ---------- */

.bdw-jo-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bdw-space-3, 12px);
}

.bdw-jo-offer {
	display: flex;
	gap: var(--bdw-space-4, 16px);
	align-items: flex-start;
	padding: var(--bdw-space-4, 16px);
	background: var(--bdw-cream, #FFF6EA);
	border: 1px solid var(--bdw-line, #DED4C6);
	border-radius: var(--bdw-radius-md, 12px);
}

.bdw-jo-offer--no-price {
	background: var(--bdw-paper, #FFFDF8);
}

.bdw-jo-offer__image {
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	object-fit: contain;
	background: var(--bdw-paper, #FFFDF8);
	border-radius: var(--bdw-radius-sm, 8px);
}

.bdw-jo-offer__body {
	flex: 1 1 auto;
	min-width: 0;
}

.bdw-jo-offer__body > p {
	margin: 0 0 4px;
}

.bdw-jo-offer__edition {
	font-weight: 800;
	color: var(--bdw-ink, #16241F);
}

.bdw-jo-offer__merchant {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bdw-accent, #177C63);
}

.bdw-jo-offer__price {
	font-size: 20px;
	line-height: 1.2;
	color: var(--bdw-ink, #16241F);
}

.bdw-jo-offer__price--none {
	font-size: 15px;
	color: var(--bdw-muted, #68756F);
}

.bdw-jo-offer__savings {
	display: inline-block;
	margin-left: var(--bdw-space-2, 8px);
	padding: 1px 8px;
	font-size: 12px;
	font-weight: 800;
	border-radius: var(--bdw-radius-pill, 999px);
	color: var(--bdw-coral-700, #B8341F);
	border: 1px solid var(--bdw-coral-700, #B8341F);
}

.bdw-jo-offer__shipping,
.bdw-jo-offer__meta {
	font-size: 13px;
	color: var(--bdw-muted, #68756F);
}

.bdw-jo-offer__cta {
	display: inline-block;
	margin-top: var(--bdw-space-2, 8px);
}

/*
 * The timestamp and the disclaimer. Small, but never hidden and never
 * collapsed behind a control: the Amazon agreement requires both to appear
 * next to the price, and 12px at this contrast is still readable body text
 * rather than decoration.
 */
.bdw-jo-offer__stamp {
	margin-top: var(--bdw-space-2, 8px);
	font-size: 12px;
	color: var(--bdw-muted, #68756F);
}

.bdw-jo-offer__disclaimer {
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--bdw-muted, #68756F);
	max-width: 68ch;
}

.bdw-jo-ranking-note {
	margin: var(--bdw-space-3, 12px) 0 0;
	font-size: 13px;
	color: var(--bdw-muted, #68756F);
}

/* ---------- Sponsored ---------- */

/*
 * A separate box with its own border, its own label and its own note. The
 * dashed border is the only dashed line in the whole design system, which is
 * the point: it does not look like the rest of the list, at any zoom level,
 * in either theme, and with or without colour.
 */
.bdw-jo-sponsored {
	margin-top: var(--bdw-space-6, 24px);
	padding: var(--bdw-space-4, 16px);
	border: 2px dashed var(--bdw-line, #DED4C6);
	border-radius: var(--bdw-radius-md, 12px);
	background: var(--bdw-paper, #FFFDF8);
}

.bdw-jo-sponsored__label {
	margin: 0 0 var(--bdw-space-3, 12px);
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--bdw-coral-700, #B8341F);
}

.bdw-jo-sponsored__note {
	margin: var(--bdw-space-3, 12px) 0 0;
	font-size: 13px;
	color: var(--bdw-muted, #68756F);
}

/* ---------- Price history ---------- */

.bdw-jo-history {
	margin-top: var(--bdw-space-6, 24px);
	font-size: 14px;
	color: var(--bdw-ink, #16241F);
}

.bdw-jo-history--unavailable {
	color: var(--bdw-muted, #68756F);
	max-width: 68ch;
}

/*
 * A CSS-only sparkline. Each day is a column; a day with no sample gets no
 * bar at all rather than a zero-height one, so a gap reads as a gap. The
 * screen-reader text inside each item carries the actual numbers, which is
 * the only version of this chart that conveys anything to somebody who
 * cannot see it.
 */
.bdw-jo-sparkline {
	list-style: none;
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 48px;
	margin: var(--bdw-space-3, 12px) 0;
	padding: 0;
	border-bottom: 1px solid var(--bdw-line, #DED4C6);
}

.bdw-jo-sparkline__day {
	flex: 1 1 auto;
	min-width: 2px;
	height: 100%;
	background: var(--bdw-accent, #177C63);
	border-radius: 2px 2px 0 0;
}

.bdw-jo-sparkline__day.is-gap {
	background: transparent;
	border-bottom: 2px dotted var(--bdw-muted, #68756F);
	height: 2px;
	align-self: flex-end;
}

.bdw-jo-history__gaps {
	font-size: 13px;
	color: var(--bdw-muted, #68756F);
	max-width: 68ch;
}

/* ---------- Alerts ---------- */

.bdw-jo-alerts {
	margin-top: var(--bdw-space-6, 24px);
	padding-top: var(--bdw-space-4, 16px);
	border-top: 1px solid var(--bdw-line, #DED4C6);
}

.bdw-jo-alerts__current,
.bdw-jo-my-alerts {
	list-style: none;
	margin: 0 0 var(--bdw-space-3, 12px);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
}

.bdw-jo-alert-form p {
	display: flex;
	align-items: center;
	gap: var(--bdw-space-2, 8px);
	margin: 0 0 var(--bdw-space-3, 12px);
	flex-wrap: wrap;
}

.bdw-jo-alert-form label {
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bdw-accent, #177C63);
}

.bdw-jo-alert-form input[type="text"],
.bdw-jo-alert-form select {
	padding: 8px 10px;
	font: inherit;
	color: var(--bdw-ink, #16241F);
	background: var(--bdw-paper, #FFFDF8);
	/*
	 * A 1px token border measures 1.37:1 against the page in the light theme,
	 * which fails the 3:1 the WCAG asks of a control boundary. Two pixels of
	 * the ink colour at 30% is the cheapest fix that keeps the palette.
	 */
	border: 1px solid var(--bdw-muted, #68756F);
	border-radius: var(--bdw-radius-sm, 8px);
}

.bdw-jo-alert-form__note {
	font-size: 13px;
	color: var(--bdw-muted, #68756F);
	min-height: 1.2em;
}

.bdw-jo-alert-form__note.is-error {
	color: var(--bdw-coral-700, #B8341F);
}

.bdw-jo-alerts__note,
.bdw-jo-alerts-cta {
	font-size: 13px;
	color: var(--bdw-muted, #68756F);
}

/* ---------- Pages ---------- */

.bdw-jo-page {
	max-width: 1080px;
}

.bdw-jo-page > h1 {
	margin-bottom: 6px;
	font-family: var(--bdw-font-display, inherit);
	color: var(--bdw-heading, var(--bdw-ink, #16241F));
}

.bdw-jo-page > .bdw-jc-muted {
	max-width: 68ch;
	margin-bottom: var(--bdw-space-6, 24px);
}

.bdw-jo-transparency p {
	max-width: 68ch;
	line-height: 1.65;
	color: var(--bdw-ink, #16241F);
}

.bdw-jo-partner-list {
	list-style: none;
	margin: 0 0 var(--bdw-space-6, 24px);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 15px;
	color: var(--bdw-ink, #16241F);
}

/* ---------- Focus ---------- */

.bdw-jo :focus-visible {
	outline: 2px solid var(--bdw-focus-color, #177C63);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--bdw-focus-halo, rgba(23, 124, 99, 0.24));
	border-radius: var(--bdw-radius-sm, 8px);
}

/* ---------- Narrow screens ---------- */

@media (max-width: 600px) {
	.bdw-jo-block {
		padding: var(--bdw-space-4, 16px);
		border-radius: var(--bdw-radius-md, 12px);
	}

	.bdw-jo-offer {
		flex-direction: column;
	}

	.bdw-jo-offer__cta {
		display: block;
		text-align: center;
	}
}