/* Bloom & Shine — scratch card popup.
   Two columns: copy and card on the left, photograph on the right. Scoped to
   .bloom-sc so nothing leaks into the theme. Plain properties only, except
   where a theme rule would otherwise win — the second selector on each rule
   (.bloom-sc .x) exists because Blocksy styles bare `button` and
   `[type="submit"]` with element selectors. */

.bloom-sc[hidden]{display:none}

.bloom-sc{
	position:fixed;
	inset:0;
	z-index:99990;
	display:flex;
	align-items:flex-start;
	justify-content:center;
	padding:24px;
	overflow-y:auto;
	font-family:inherit;
	-webkit-overflow-scrolling:touch;
}

.bloom-sc__backdrop{
	position:fixed;
	inset:0;
	background:rgba(33,35,38,.62);
	backdrop-filter:blur(2px);
}

.bloom-sc__card{
	position:relative;
	width:100%;
	max-width:920px;
	margin:auto;
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
	background:#fff;
	border-radius:18px;
	overflow:hidden;
	box-shadow:0 28px 70px rgba(33,35,38,.32);
	/* One height for all three screens: the foil, the prize and the email form
	   carry different amounts of content, so without a floor the card grows
	   when the foil is scratched off and shrinks again on the form — the popup
	   jumps under the hand in the middle of the interaction. 564 px is the
	   tallest of the three at this width, rounded up. The `min()` keeps the
	   card inside short windows, where it would otherwise start scrolled. */
	min-height:564px;
	min-height:min(564px, calc(100dvh - 48px));
	animation:bloom-sc-in .26s ease-out;
}

@keyframes bloom-sc-in{
	from{opacity:0;transform:translateY(14px) scale(.985)}
	to{opacity:1;transform:none}
}

/* No photograph configured: one column, the panel takes the whole card. */
.bloom-sc__card:not(.has-media){grid-template-columns:1fr;max-width:560px}

.bloom-sc__media{
	position:relative;
	grid-column:2;
	grid-row:1;
	overflow:hidden;
	background:#f6efea;
}

.bloom-sc__media img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:50% 24%;
	display:block;
}

.bloom-sc__panel{
	grid-column:1;
	grid-row:1;
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:center;
	padding:46px 44px 40px;
	text-align:center;
}

.bloom-sc__close{
	position:absolute;
	top:16px;
	right:16px;
	z-index:2;
	width:34px;
	height:34px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	border:0;
	background:transparent;
	box-shadow:none;
	color:#8b8f94;
	cursor:pointer;
	border-radius:50%;
}
.bloom-sc .bloom-sc__close:hover{background:rgba(33,35,38,.06);color:#212326}
.bloom-sc__close svg{width:20px;height:20px}

/* Wordmark line above the headline: the reference card carries the brand
   there, and without it the popup reads as a third-party advert. */
.bloom-sc__brand{
	margin:0 0 18px;
	font-size:11px;
	line-height:1;
	font-weight:600;
	letter-spacing:.22em;
	text-transform:uppercase;
	color:#6f757c;
}

.bloom-sc__view{width:100%}

/* [hidden] comes from the user-agent stylesheet with the lowest possible
   weight, so any `display:flex` below silently defeats it. The plugin keeps
   its own `display` values on buttons, so the guard has to win outright —
   without it the CLAIM button shows up before the card is even scratched. */
.bloom-sc [hidden]{display:none !important}

.bloom-sc__title{
	margin:0 0 10px;
	font-size:38px;
	line-height:1.14;
	font-weight:500;
	letter-spacing:-.02em;
	color:#212326;
}

.bloom-sc__title--prize{
	font-size:34px;
	margin-bottom:12px;
}

.bloom-sc__lead{
	margin:0 0 24px;
	font-size:15px;
	line-height:1.55;
	color:#5b6066;
}

.bloom-sc__num{color:#d94f5c;font-weight:600}
.bloom-sc__unit{color:#212326}

/* --- карта --- */

.bloom-sc__stage{position:relative}

/* The card is a rounded rectangle, not a strip across the column: at 16/7 it
   grew as wide as the panel and the whole popup read as a banner. Capped at a
   fixed width so the shape stays the same at every breakpoint. */
.bloom-sc__scratch{
	position:relative;
	width:100%;
	max-width:340px;
	aspect-ratio:1.3/1;
	border-radius:14px;
	overflow:hidden;
	background:#fdf8f4;
	border:1px solid #f0e2d6;
	margin:0 auto 14px;
	touch-action:none;
	user-select:none;
	-webkit-user-select:none;
	cursor:crosshair;
}

/* The prize sits under the foil, not next to it: the canvas is painted over
   this element and scratching simply reveals it. */
.bloom-sc__prize{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:6px;
	background:#fdf8f4;
}

.bloom-sc__prize-value{
	font-size:40px;
	line-height:1;
	font-weight:600;
	color:#d94f5c;
	letter-spacing:-.02em;
}

.bloom-sc__prize-note{
	font-size:13px;
	color:#7a7f85;
}

.bloom-sc__canvas{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	display:block;
	touch-action:none;
	transition:opacity .32s ease;
}
.bloom-sc__scratch.is-open .bloom-sc__canvas{opacity:0;pointer-events:none}
.bloom-sc__scratch.is-open{cursor:default}

/* Prize, once the card is gone. Same box as the card, so the popup does not
   jump when it swaps. A dotted outline made it read as an empty placeholder
   slot, so the box is a warm print of the foil instead. */
.bloom-sc__result{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:5px;
	width:100%;
	max-width:340px;
	/* Exactly the card's box. It swaps in place, so any difference in height
	   reads as the popup resizing itself under the cursor. */
	aspect-ratio:1.3/1;
	margin:0 auto 14px;
	border-radius:14px;
	background:linear-gradient(158deg,#fdf8f1 0%,#f9efe1 55%,#f6e8d5 100%);
	border:1px solid rgba(198,150,104,.24);
}

.bloom-sc__result-lead{
	margin:0;
	font-size:15px;
	line-height:1.3;
	color:#6f757c;
}

.bloom-sc__result-value{
	margin:0;
	font-size:44px;
	line-height:1.05;
	font-weight:600;
	letter-spacing:-.02em;
	color:#212326;
}

.bloom-sc__result-note{
	margin:0;
	font-size:13px;
	color:#8a8175;
}

/* --- кнопки --- */

.bloom-sc .bloom-sc__submit{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	width:100%;
	margin:16px 0 0;
	padding:16px 24px;
	border:0;
	border-radius:8px;
	background:#d94f5c;
	color:#fff;
	font-size:13px;
	font-weight:600;
	line-height:1.2;
	letter-spacing:.1em;
	text-transform:uppercase;
	cursor:pointer;
	box-shadow:none;
	transition:background .15s ease;
}
.bloom-sc .bloom-sc__submit:hover{background:#c74350;color:#fff}
.bloom-sc .bloom-sc__submit:focus-visible{outline:2px solid #212326;outline-offset:2px}
.bloom-sc .bloom-sc__submit:disabled{opacity:.6;cursor:progress}

/* On the prize screen the button lines up with the card above it; in the form
   it stays as wide as the email field, which is the thing it submits. */
.bloom-sc__view--scratch .bloom-sc__submit{max-width:340px;margin-left:auto;margin-right:auto}
.bloom-sc__submit svg{width:18px;height:18px;flex:0 0 auto}

/* --- форма --- */

.bloom-sc__label{
	display:block;
	margin:0 0 6px;
	font-size:12px;
	letter-spacing:.04em;
	color:#6b7178;
	text-align:left;
}

.bloom-sc .bloom-sc__input{
	display:block;
	width:100%;
	height:50px;
	padding:0 16px;
	border:1px solid #ddd6d1;
	border-radius:8px;
	background:#fff;
	font-size:16px;
	line-height:48px;
	color:#212326;
	box-shadow:none;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.bloom-sc .bloom-sc__input:focus{
	outline:0;
	border-color:#d94f5c;
	background:#fff;
	box-shadow:0 0 0 3px rgba(217,79,92,.12);
}
.bloom-sc .bloom-sc__input.is-error{border-color:#d94f5c;background:#fff7f8}

.bloom-sc__check{
	display:flex;
	align-items:flex-start;
	gap:10px;
	margin:14px 0 0;
	font-size:12px;
	line-height:1.5;
	color:#5b6066;
	text-align:left;
	cursor:pointer;
}
.bloom-sc__check input{
	flex:0 0 auto;
	width:17px;
	height:17px;
	margin:1px 0 0;
	padding:0;
	accent-color:#d94f5c;
	cursor:pointer;
}
.bloom-sc__check a{color:#212326;text-decoration:underline}

.bloom-sc__error{
	margin:12px 0 0;
	padding:10px 12px;
	border-radius:8px;
	background:#fff0f2;
	color:#b5203f;
	font-size:13px;
	line-height:1.45;
	text-align:left;
}

/* Ловушка для ботов: поле есть в разметке, но человек его не видит. */
.bloom-sc__hp{
	position:absolute !important;
	left:-9999px !important;
	width:1px;
	height:1px;
	overflow:hidden;
}

/* --- узкие экраны --- */

@media (max-width:780px){
	.bloom-sc__card{
		grid-template-columns:1fr;
		grid-template-rows:auto auto;
		max-width:460px;
		/* Tallest of the three stacked screens on a phone: the prize screen
		   carries the same box plus the button under it. */
		min-height:624px;
		min-height:min(624px, calc(100dvh - 24px));
	}

	.bloom-sc__media{
		grid-column:1;
		grid-row:1;
		height:172px;
	}

	.bloom-sc__media img{object-position:50% 32%}

	.bloom-sc__panel{
		grid-column:1;
		grid-row:2;
		padding:28px 22px 26px;
	}

	.bloom-sc__brand{margin-bottom:12px}
	.bloom-sc__title{font-size:26px}
	.bloom-sc__title--prize{font-size:24px}
	.bloom-sc__lead{font-size:14px;margin-bottom:18px}
	.bloom-sc__scratch{aspect-ratio:1.24/1}
	.bloom-sc__result{aspect-ratio:1.24/1}
	.bloom-sc__result-value{font-size:34px}
	.bloom-sc__prize-value{font-size:38px}
	/* The button sits closer to the prize box here, so the prize screen stays
	   inside the height the foil screen already reserves. */
	.bloom-sc__view--scratch .bloom-sc__submit{margin-top:6px}
}

@media (max-width:480px){
	.bloom-sc{padding:12px}
	.bloom-sc__card{border-radius:14px}
	.bloom-sc__media{height:132px}
	.bloom-sc__panel{padding:24px 18px 22px}
	.bloom-sc__title{font-size:23px}
	.bloom-sc__close{top:8px;right:8px;background:rgba(255,255,255,.72)}
	.bloom-sc .bloom-sc__close:hover{background:#fff}
}

/* Small phones (iPhone SE and older). The card keeps the same height in every
   state here too, so the prize block and the buttons are sized to fit rather
   than allowed to push the card taller than the foil screen. */
@media (max-width:360px){
	.bloom-sc__panel{padding:22px 16px 20px}
	.bloom-sc__title{font-size:21px}
	.bloom-sc__lead{font-size:13px;margin-bottom:16px}
	.bloom-sc__result{aspect-ratio:1.3/1}
	.bloom-sc__result-value{font-size:30px}
	.bloom-sc__prize-value{font-size:32px}
	.bloom-sc .bloom-sc__submit{padding:14px 18px;font-size:12px;margin-top:12px}
}

/* Short viewports — phones in landscape, laptop windows with devtools open.
   The card keeps its width and loses height instead, so the popup still fits
   above the fold without becoming a strip again. Windows this short are driven
   by their content rather than the floor above, so the floor drops to the
   height of the prize screen — the tallest of the three — and all three states
   stay the same size. */
@media (max-height:620px) and (min-width:781px){
	.bloom-sc__card{min-height:464px}
	.bloom-sc__panel{padding:30px 34px 28px}
	.bloom-sc__title{font-size:30px}
	.bloom-sc__lead{margin-bottom:16px}
	.bloom-sc__scratch,.bloom-sc__result{aspect-ratio:1.85/1}
	.bloom-sc__result{margin-bottom:12px}
	.bloom-sc__result-value{font-size:30px}
	.bloom-sc__view--scratch .bloom-sc__submit{margin-top:0}
}

/* Phone held sideways: the stacked layout is taller than the whole window, so
   the same compaction as above applies with a shorter photo band. The card is
   taller than the window here in every state, so the floor is the prize screen
   — otherwise the popup grows by the height of the button when the foil goes. */
@media (max-height:620px) and (max-width:780px) and (orientation:landscape){
	.bloom-sc__card{min-height:464px}
	.bloom-sc__media{height:96px}
	.bloom-sc__panel{padding:20px 20px 18px}
	.bloom-sc__title{font-size:22px}
	.bloom-sc__title--prize{font-size:21px}
	.bloom-sc__lead{font-size:13px;margin-bottom:14px}
	.bloom-sc__scratch,.bloom-sc__result{aspect-ratio:2/1}
	.bloom-sc__result{margin-bottom:12px}
	.bloom-sc__result-value{font-size:28px}
	.bloom-sc__prize-value{font-size:30px}
	.bloom-sc .bloom-sc__submit{padding:13px 18px;margin-top:12px}
}

@media (prefers-reduced-motion:reduce){
	.bloom-sc__card{animation:none}
	.bloom-sc__canvas{transition:none}
}