/* ==========================================================================
   Bonus Check Widget — v0.2.3
   --------------------------------------------------------------------------
   BEM prefix: bcw-
   Brand alignment with casinolegali.net Poka child theme:
     - Primary CTA yellow:   #FECD06
     - Body text:            #383737
     - Button text on yellow:#5a5a58
     - Accent green:         #008000
     - Calc background:      #F8F6F4 (warm light grey)
     - Font:                 Open Sans (inherited from theme)
   ========================================================================== */

.bcw-calc {
	font-family: "Open Sans", sans-serif;
	color: #383737;
	max-width: 520px;
	margin: 24px auto;
	padding: 20px;
	border: 2px solid #FECD06;
	border-radius: 12px;
	background: #F8F6F4;
	box-sizing: border-box;
}

.bcw-calc *,
.bcw-calc *::before,
.bcw-calc *::after {
	box-sizing: inherit;
}

/* --- Logo row ----------------------------------------------------------- */

.bcw-calc__logos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0px;
	margin: 0 0 16px;
	flex-wrap: wrap;
}

.bcw-calc__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bcw-calc__logo img {
	width: 125px;
	height: 42px;
	object-fit: contain;
	display: block;
}

/* --- Form --------------------------------------------------------------- */

.bcw-calc__form {
	margin: 0 0 12px;
}

.bcw-calc__label {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
	font-size: 1.05rem;
	text-align: left;
}

.bcw-calc__input-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}

.bcw-calc__input {
	flex: 1 1 140px;
	min-width: 0;
	font: inherit;
	font-size: 1.1rem;
	padding: 10px 12px;
	border: 1px solid #d0d0d0;
	border-radius: 8px;
	background: #fff;
	color: #383737;
	-moz-appearance: textfield;
	transition: opacity .15s ease;
}

.bcw-calc__input::-webkit-outer-spin-button,
.bcw-calc__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.bcw-calc__input:focus {
	outline: none;
	border-color: #FECD06;
	box-shadow: 0 0 0 3px rgba(254, 205, 6, 0.35);
}

/* Default-value visual hint: the pre-filled "100" looks faded so the
   user understands they can change it. JS removes the modifier class on
   first focus / first input event. */
.bcw-calc__input--default {
	opacity: 0.7;
}

.bcw-calc__currency {
	display: flex;
	align-items: center;
	font-weight: 700;
	color: #5a5a58;
	font-size: 1.2rem;
}

.bcw-calc__button {
	border: none;
	border-radius: 8px;
	padding: 10px 20px;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
}

.bcw-calc__button[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* Fallback styling if the theme's .btn--blue isn't present on the page. */
.bcw-calc__button:not(.btn--blue) {
	background: #FECD06;
	color: #5a5a58;
	font-weight: 700;
	font-size: 1.1rem;
}
.bcw-calc__button:not(.btn--blue):hover {
	opacity: 0.85;
}

/* --- Status / message --------------------------------------------------- */

.bcw-calc__status {
	min-height: 0;
	margin: 8px 0 0;
	font-size: 0.95rem;
}

.bcw-calc__status:empty {
	margin: 0;
}

.bcw-calc__status--loading {
	color: #5a5a58;
	font-style: italic;
}

.bcw-calc__status--error {
	color: #b00020;
	font-weight: 600;
}

.bcw-calc__status--message {
	/* Used for the API's `message` field (e.g. below-minimum-deposit). */
	color: #5a5a58;
	background: rgba(254, 205, 6, 0.18);
	padding: 10px 12px;
	border-radius: 8px;
	font-weight: 500;
}

/* --- Result lines ------------------------------------------------------- */

.bcw-calc__lines {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.bcw-calc__line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	padding: 10px 4px;
	border-bottom: 1px solid #ececec;
	line-height: 1.4;
}

.bcw-calc__line:last-child {
	border-bottom: none;
}

/* The "200€" / "500" amount — bold, slightly larger. */
.bcw-calc__line-value {
	font-size: 1.2em;
	font-weight: 700;
	color: #383737;
	white-space: nowrap;
}

/* The "100% sul 1° deposito" / "Gratis" / "Free Spin" descriptor. */
.bcw-calc__line-desc {
	font-size: 1em;
	font-weight: 400;
	color: #383737;
}

/* PT span — copies the theme's .pt-lista look but lives under its own
   class so the WP customizer can override it without affecting other
   .pt-lista usages elsewhere on the site. Same visual defaults as the
   theme's .pt-lista (color, opacity, font-size, spacing). */

.bcw-pt {
	color: #383737;
	opacity: 0.7;
	word-spacing: normal;
	letter-spacing: normal;
	font-size: .75em;
}

/* --- Disclaimer --------------------------------------------------------- */

.bcw-calc__disclaimer {
	margin-top: 14px;
	font-size: 0.85rem;
	color: #5a5a58;
	line-height: 1.4;
}


p.bcw-calc__disclaimer-main {
	margin-top: 1px;
	font-size: 0.75rem;
	color: #5a5a58;
	line-height: 1.4;
}


.bcw-calc .bcw-calc__disclaimer .bcw-calc__disclaimer-main a {
	color: #5a5a58 !important;
	font-size: 0.75rem;
	font-weight: 400 !important;
	line-height: 1.4;
	text-decoration: underline !important;
	background: transparent !important;
}

.bcw-calc .bcw-calc__disclaimer .bcw-calc__disclaimer-main a:hover {
	color: #008000 !important;
	background: transparent !important;
	text-decoration: underline !important;
}



/* The disclaimer has two paragraphs so the "Ultima verifica" line sits
   on its own row. Theme defaults for  can be huge — clamp here. */
.bcw-calc__disclaimer p {
	margin: 0 0 3px;
	font-size: 0.75rem;
}
.bcw-calc__disclaimer p:last-child {
	margin-bottom: 0;
}
.bcw-calc__disclaimer-date {
	font-style: italic;
}

/* --- Variant: plaintext ------------------------------------------------- */
.bcw-calc--plaintext {
	border: none;
	padding: 0;
	margin: 0;
	max-width: none;
	background: transparent;
}
.bcw-calc--plaintext .bcw-calc__form,
.bcw-calc--plaintext .bcw-calc__status,
.bcw-calc--plaintext .bcw-calc__logos,
.bcw-calc--plaintext .bcw-calc__disclaimer {
	display: none;
}

/* --- Variant: popunder -------------------------------------------------- */
/*
 * Compact rendering that lives inside the theme's review-page popunder.
 * Slot budget: ~500px x ~110px desktop, ~225px x ~135px under 451px.
 *
 * Desktop: two-column layout (logo+form on the left, lines on the right),
 *   the flipper and faces are `display: contents` so they're invisible to
 *   the grid.
 *
 *   ┌───────────────┬───────────────────────────┐
 *   │ logo + input  │ result lines              │
 *   │  (~200px)     │  (fills the rest)         │
 *   └───────────────┴───────────────────────────┘
 *
 * Mobile: flip card. Front face = logo + label + input. Back face =
 *   result lines. JS toggles `.bcw-calc--flipped` on user submit and on
 *   tap-back. See the @media block at the bottom of this file.
 *
 * The theme owns the outer chrome (background, casino logo, CTA, close
 * button), so we drop our own card styling and blend in.
 */

/* Flipper + faces are layout-invisible on desktop so the popunder grid
 * keeps its 4 direct grid items (logos, form, status, lines). The mobile
 * @media block overrides this. */
.bcw-calc--popunder .bcw-calc__flipper,
.bcw-calc--popunder .bcw-calc__face {
	display: contents;
}

/* Mobile-only T&C line, rendered inside the popunder back face. Hidden
 * on desktop where the slot is too cramped for it. The mobile @media
 * block below absolute-positions it at the bottom of the back face. */
.bcw-calc__popunder-tc {
	display: none;
}

/* Results header — "Depositando XXX€ ... riceverai:" — rendered above
 * the result lines. JS populates the text on each successful run and
 * unhides; on preview/error/below-min it stays hidden.
 *
 * Sized to match `.bcw-calc__label` on the full variant (1.05rem) so the
 * header and the "Quanto vuoi depositare?" prompt read as a matched
 * pair above and below the input. */
.bcw-calc__results-header {
	margin: 0 0 10px;
	font-size: 1.05rem;
	font-weight: 600;
	color: #383737;
}

.bcw-calc--popunder {
	max-width: 500px;
	height: 110px;
	margin: 0;
	padding: 4px 10px;
	border: none;
	border-radius: 0;
	background: transparent;
	display: grid;
	grid-template-columns: 200px 1fr;
	grid-template-rows: auto auto;
	column-gap: 10px;
	row-gap: 0;
	align-content: center; /* vertically centre the row pack inside 110px */
	overflow: hidden;
}

/* Left column: bonuscheck logo (row 1) + form (row 2). */
.bcw-calc--popunder .bcw-calc__logos {
	grid-column: 1;
	grid-row: 1;
	margin: 0;
	justify-content: center;
}

.bcw-calc--popunder .bcw-calc__logo img {
	width: 125px;
	height: 40px;
}

.bcw-calc--popunder .bcw-calc__form {
	grid-column: 1;
	grid-row: 2;
	margin: 0;
}

.bcw-calc--popunder .bcw-calc__label {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 2px;
	text-align: center;
	line-height: 1.2;
}

.bcw-calc--popunder .bcw-calc__input-row {
	flex-wrap: nowrap;
	gap: 4px;
	justify-content: center;
	align-items: center;
}

.bcw-calc--popunder .bcw-calc__input {
	font-size: 14px;
	padding: 3px 6px;
	flex: 0 0 85px;
	width: 85px;
	min-width: 0;
	border-radius: 6px;
	text-align: right;
	opacity: 1; /* override the .bcw-calc__input--default fade */
}

.bcw-calc--popunder .bcw-calc__currency {
	font-size: 14px;
}

/* Icon-only ↩ button replaces the "Calcola" label in popunder. */
.bcw-calc--popunder .bcw-calc__button--icon {
	background: #FECD06;
	color: #5a5a58;
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	padding: 0;
	width: 26px;
	height: 26px;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 26px;
}

.bcw-calc--popunder .bcw-calc__button--icon:hover {
	opacity: 0.85;
}

/* Right column: status + header + lines stacked inside the results
 * wrapper. The wrapper takes col 2 spanning both rows so it tracks the
 * centre line of the left-column pack. */
.bcw-calc--popunder .bcw-calc__results {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
}

.bcw-calc--popunder .bcw-calc__status {
	margin: 0;
	font-size: 12px;
	min-height: 0;
}

.bcw-calc--popunder .bcw-calc__status:empty {
	display: none;
}

.bcw-calc--popunder .bcw-calc__lines {
	margin: 0;
}

.bcw-calc--popunder .bcw-calc__results-header {
	margin: 0 0 5px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

.bcw-calc--popunder .bcw-calc__line {
	padding: 1px 0;
	border-bottom: none;
	line-height: 1.2;
	gap: 6px;
	font-size: 14px;
}

.bcw-calc--popunder .bcw-calc__line-value,
.bcw-calc--popunder .bcw-calc__line-desc {
	font-size: 14px;
}

.bcw-calc--popunder .bcw-calc__line-value {
	font-weight: 700;
}

.bcw-calc--popunder .bcw-pt {
	font-size: 0.7em;
}

/* Disclaimer hidden via PHP, but belt-and-braces in case it leaks in. */
.bcw-calc--popunder .bcw-calc__disclaimer {
	display: none;
}

/* --- Leading glyph per bonus type --------------------------------------- */
/* Used in both full and popunder variants. The JS prepends a
 * .bcw-calc__line-glyph span at the start of each line.
 *   - Full variant: 1.7em — chunky, since the full card has room
 *   - Popunder:     0.8em — slightly smaller than the line text
 */
.bcw-calc__line-glyph {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 1;
	font-size: 1.7em;
}

.bcw-calc--popunder .bcw-calc__line-glyph {
	font-size: 0.8em;
}

/* --- Variant: popunder, mobile flip card -------------------------------- */
/*
 * Under 451px the popunder slot becomes 225x135 and we render the widget
 * as a flip card. The front face shows logo + label + input + ↩ button;
 * the back face shows the result lines. Tapping the card (anywhere except
 * the input) triggers a form submit, which on success adds `.bcw-calc--
 * flipped` to the root and the card rotates 180° around the Y axis.
 * Tapping the back face removes the class and resets the input.
 */
@media (max-width: 450px) {
	.bcw-calc--popunder {
		width: 225px;
		max-width: 225px;
		height: 135px;
		padding: 0;
		display: block;
		perspective: 1000px;
		overflow: visible;
		font-size: 13px;
	}

	.bcw-calc--popunder .bcw-calc__flipper {
		display: block;
		position: relative;
		width: 100%;
		height: 100%;
		transform-style: preserve-3d;
		transition: transform 0.55s ease;
		cursor: pointer;
	}

	.bcw-calc--popunder.bcw-calc--flipped .bcw-calc__flipper {
		transform: rotateY(180deg);
	}

	.bcw-calc--popunder .bcw-calc__face {
		display: flex;
		flex-direction: column;
		position: absolute;
		inset: 0;
		padding: 8px 10px;
		box-sizing: border-box;
		background: #F8F6F4;
		border-radius: 6px;
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}

	.bcw-calc--popunder .bcw-calc__face--front {
		align-items: center;
		justify-content: center;
		gap: 4px;
	}

	.bcw-calc--popunder .bcw-calc__face--back {
		transform: rotateY(180deg);
		justify-content: center;
		padding-bottom: 18px; /* leaves room for the absolute T&C line */
	}

	.bcw-calc--popunder .bcw-calc__results {
		width: 100%;
		align-self: stretch;
	}

	/* Mobile keeps the popunder header at 14px / 5px (set on the
	 * variant-level rule above) but centres the text horizontally. */
	.bcw-calc--popunder .bcw-calc__results-header {
		text-align: center;
	}

	.bcw-calc--popunder .bcw-calc__logos {
		margin: 0;
	}

	.bcw-calc--popunder .bcw-calc__logo img {
		width: 110px;
		height: 36px;
	}

	.bcw-calc--popunder .bcw-calc__form {
		margin: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.bcw-calc--popunder .bcw-calc__label {
		font-size: 13px;
		text-align: center;
		margin: 0 0 3px;
	}

	.bcw-calc--popunder .bcw-calc__input-row {
		justify-content: center;
	}

	.bcw-calc--popunder .bcw-calc__lines {
		margin: 0;
		width: 100%;
	}

	.bcw-calc--popunder .bcw-calc__line {
		padding: 1px 0;
		font-size: 13px;
		gap: 6px;
	}

	.bcw-calc--popunder .bcw-calc__line-value,
	.bcw-calc--popunder .bcw-calc__line-desc {
		font-size: 13px;
	}

	/* On mobile the back face is shown only on the user's request, so
	 * frosted glass would defeat the point — neutralise it. */
	.bcw-calc--popunder .bcw-calc__lines--preview .bcw-calc__line-value,
	.bcw-calc--popunder .bcw-calc__lines--preview .bcw-calc__line-desc,
	.bcw-calc--popunder .bcw-calc__lines--preview .bcw-pt {
		filter: none;
		-webkit-filter: none;
	}

	/* PT span eats horizontal room we don't have on a 225px card —
	 * suppress it; the back-face disclaimer below covers the legal need. */
	.bcw-calc--popunder .bcw-pt {
		display: none;
	}

	/* Compact T&C line pinned to the bottom of the back face. Absolute
	 * so the results wrapper above can still centre vertically without
	 * fighting it. Plain text — no link. */
	.bcw-calc--popunder .bcw-calc__popunder-tc {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 4px;
		margin: 0;
		padding: 0 8px;
		text-align: center;
		font-size: 10px;
		color: #5a5a58;
		line-height: 1.2;
	}
}

/* --- Frosted-glass preview ---------------------------------------------- */
/*
 * Applied to the lines list when the popunder auto-fires its initial
 * €100 calculation on page load. The glyphs stay sharp (they're a
 * visual cue that bonuses exist) but the actual values, descriptors,
 * and PT spans are blurred — so the figures don't read as a deposit
 * recommendation. The JS removes the class on the first user-driven
 * submit, at which point the figures resolve.
 */
.bcw-calc__lines--preview .bcw-calc__line-value,
.bcw-calc__lines--preview .bcw-calc__line-desc,
.bcw-calc__lines--preview .bcw-pt {
	filter: blur(2px);
	-webkit-filter: blur(2px);
	user-select: none;
	transition: filter 0.25s ease;
}

/* --- Mobile breakpoint -------------------------------------------------- */

@media (max-width: 480px) {
	.bcw-calc {
		padding: 0 12px;
		margin: 10px auto;
	}

	.bcw-calc__logos {
		gap: 0px;
	}

	.bcw-calc__label {
		font-size: 1rem;
	}

	/* Keep the input + button on a single horizontal row — vertical
	   stacking made the whole control too tall on phones. Allow the
	   input to shrink freely so it shares the line with the button. */
	.bcw-calc__input-row {
		flex-wrap: nowrap;
		gap: 6px;
	}

	.bcw-calc__input {
		font-size: 1rem;
		padding: 8px 10px;
		flex: 1 1 0;
		min-width: 0;
	}

	.bcw-calc__button {
		font-size: 1rem;
		padding: 8px 14px;
		flex: 0 0 auto;
	}
}