/*
 * Redemption method blocks, output by [bfsim_redeem_steps],
 * [bfsim_redeem_old_pass] and [bfsim_redeem_validity].
 *
 * Only what the theme does not already get right. Blocksy sizes an h2 for a
 * page-level title, which is too large for a section heading sitting under the
 * page's own h1 — and in two columns on a wide screen, that size pushed the two
 * blocks out of step. Colours come from the Blocksy palette rather than from
 * hex values, so a palette change carries these along.
 */

/* One frame for the three blocks: they sit side by side on a wide screen and
   stack on a phone, so they have to read as the same kind of object. */
.bfsim-redeem-block {
    padding       : 1.1rem 1.25rem;
    border        : 1px solid var( --theme-palette-color-3, #415161 );
    border-color  : rgba( 65, 81, 97, .22 );
    border-color  : color-mix( in srgb, var( --theme-palette-color-3, #415161 ) 22%, transparent );
    border-radius : 5px;
    height        : 100%;
}

/* The closing note is a reassurance, not an instruction: a tinted ground sets
   it apart without another border. The two declarations are a pair — the first
   is what older browsers keep, the second what current ones use, so the tint
   follows a palette change. */
.bfsim-redeem-validity {
    background : rgba( 65, 81, 97, .20 );
    background : color-mix( in srgb, var( --theme-palette-color-3, #415161 ) 20%, transparent );
}

.bfsim-redeem-block h2 {
    margin      : 0 0 .8em;
    font-size   : clamp( 1.2rem, 1.9vw, 1.5rem );
    line-height : 1.25;
    color       : var( --theme-palette-color-4, #2c3e50 );
    text-wrap   : balance;
}

.bfsim-redeem-block ol,
.bfsim-redeem-block ul {
    margin        : 0 0 1.1em;
    padding-inline-start : 1.4em;
}

.bfsim-redeem-block li {
    margin-bottom : .45em;
}

.bfsim-redeem__lead {
    margin : 1.2em 0 .5em;
}

/* The three entry points are the point of the block: give them room and let
   them read as choices rather than as a continuation of the numbered steps. */
.bfsim-redeem__simulators {
    list-style : none;
    padding-inline-start : 0;
}

.bfsim-redeem__simulators li {
    margin-bottom : .35em;
}

.bfsim-redeem__upgrade,
.bfsim-redeem-old-pass__reassure {
    margin : 1.2em 0 0;
}

/* Voucher lookup ------------------------------------------------------- */

.bfsim-redeem-check__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0.9rem 0 0;
}

.bfsim-redeem-check__form input[type="text"] {
	flex: 1 1 15rem;
	min-width: 0;
	padding: 0.55rem 0.7rem;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 1px solid var(--theme-border-color, #c9d1d3);
	border-radius: 4px;
}

.bfsim-redeem-check__form button {
	flex: 0 0 auto;
	padding: 0.55rem 1.3rem;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	background: var(--theme-palette-color-1, #2a6f97);
	color: #fff;
	font-weight: 600;
}

.bfsim-redeem-check__form button:hover {
	filter: brightness(1.08);
}

.bfsim-redeem-answer {
	margin: 1rem 0 0;
	padding: 0.8rem 1rem;
	border-left: 3px solid var(--theme-palette-color-3, #415161);
	border-radius: 0 4px 4px 0;
	background: color-mix( in srgb, var(--theme-palette-color-3, #415161) 12%, transparent );
}

/*
 * One colour per outcome, and the two reassuring ones are not the same green:
 * "covered" is the everything-is-fine answer, "value" is informational — the
 * guarantee lapsed but the money is intact.
 */
.bfsim-redeem-answer--covered {
	border-left-color: #0e8a55;
	background: color-mix( in srgb, #0e8a55 16%, transparent );
}

.bfsim-redeem-answer--value {
	border-left-color: #1f5f82;
	background: color-mix( in srgb, #1f5f82 9%, transparent );
}

.bfsim-redeem-answer--partial {
	border-left-color: #8a6a18;
	background: color-mix( in srgb, #8a6a18 9%, transparent );
}

.bfsim-redeem-answer--ask {
	border-left-color: #8a6a18;
	background: color-mix( in srgb, #8a6a18 9%, transparent );
}

.bfsim-redeem-answer--used {
	border-left-color: #8a8f94;
}

.bfsim-redeem-answer--none {
	border-left-color: #a8201a;
	background: color-mix( in srgb, #a8201a 8%, transparent );
}

/* color-mix is recent enough to deserve a fallback on the reassuring answer. */
@supports not ( background: color-mix( in srgb, #000 10%, transparent ) ) {
	.bfsim-redeem-answer--covered { background: rgba( 14, 138, 85, 0.16 ); }
	.bfsim-redeem-answer--value   { background: rgba( 31, 95, 130, 0.09 ); }
	.bfsim-redeem-answer--partial,
	.bfsim-redeem-answer--ask     { background: rgba( 138, 106, 24, 0.09 ); }
	.bfsim-redeem-answer--none    { background: rgba( 168, 32, 26, 0.08 ); }
}