/* ==========================================================================
   BlueDrama — Whop In-Stream Payment modal
   Dark, elegant overlay that opens over the player. Embeds the Whop checkout
   iframe (allow="payment"). 100% responsive; full-screen sheet on mobile.
   ========================================================================== */

.bdw-modal {
	position: fixed;
	inset: 0;
	z-index: 2147483000; /* above the player + sticky chrome */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .28s ease;
	-webkit-font-smoothing: antialiased;
}
.bdw-modal[hidden] { display: none; }
.bdw-modal.is-open { opacity: 1; pointer-events: auto; }

.bdw-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 8, 14, .82);
	backdrop-filter: blur(6px) saturate(120%);
	-webkit-backdrop-filter: blur(6px) saturate(120%);
}

.bdw-modal__box {
	position: relative;
	width: 100%;
	max-width: 440px;
	/* Fit the checkout's own height (the embed auto-resizes) instead of a fixed
	   box — that fixed height is what produced the black gap. Cap it so tall
	   content scrolls inside the modal. Flex column so the footer sits BELOW the
	   checkout instead of overlapping its "Rejoindre" button. */
	display: flex;
	flex-direction: column;
	height: auto;
	min-height: 320px;
	max-height: min(88vh, 820px);
	background: #0e1016;
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 20px;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7),
	            0 0 0 1px rgba(255, 255, 255, .02) inset;
	overflow: hidden;
	transform: translateY(14px) scale(.985);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.bdw-modal.is-open .bdw-modal__box { transform: translateY(0) scale(1); }

.bdw-modal__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(20, 22, 30, .7);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 999px;
	cursor: pointer;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition: background .18s ease, transform .18s ease, opacity .18s ease;
	opacity: .85;
}
.bdw-modal__close:hover { background: rgba(40, 44, 56, .9); transform: rotate(90deg); opacity: 1; }
.bdw-modal__close:active { transform: rotate(90deg) scale(.92); }

.bdw-modal__frame {
	position: relative;
	width: 100%;
	/* Take the available space; min-height keeps room for the spinner. */
	flex: 1 1 auto;
	min-height: 0;
	background: #0e1016;
}

/* Whop mounts its embedded-checkout <iframe> inside .bdw-mount. */
.bdw-mount {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity .35s ease;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.bdw-modal.is-loaded .bdw-mount { opacity: 1; }

/* Official loader embed: Whop injects its own iframe and auto-resizes it to
   content height via postMessage. DO NOT force height here — forcing
   height:100% is what left a big black gap below the form. Let it size itself
   and just fill the width; .bdw-mount scrolls if it ever exceeds the box. */
.bdw-mount > div { width: 100%; }
.bdw-mount iframe {
	width: 100% !important;
	border: 0;
	display: block;
	background: #0e1016;
}

/* Raw hosted-checkout fallback iframe (chk_…) does NOT auto-resize, so give it
   a tall explicit height and let .bdw-mount scroll. */
.bdw-iframe {
	width: 100% !important;
	height: min(78vh, 720px) !important;
	border: 0;
	display: block;
}

/* Loading spinner, sits behind the iframe until it paints. */
.bdw-modal__spin {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, .14);
	border-top-color: rgba(255, 255, 255, .8);
	animation: bdw-spin .8s linear infinite;
	z-index: 1;
}
.bdw-modal.is-loaded .bdw-modal__spin { display: none; }
@keyframes bdw-spin { to { transform: rotate(360deg); } }

/* Footer: "already paid → unlock" affordance. Sits BELOW the checkout (flex
   item) so it never covers Whop's own "Rejoindre" button. */
.bdw-modal__foot {
	position: relative;
	z-index: 4;
	flex: 0 0 auto;
	padding: 8px 14px 10px;
	background: #0e1016;
	border-top: 1px solid rgba(255, 255, 255, .06);
	text-align: center;
}
.bdw-modal__paid {
	background: none;
	border: 0;
	color: rgba(255, 255, 255, .62);
	font-size: 12.5px;
	cursor: pointer;
	text-decoration: underline;
	padding: 6px 8px;
}
.bdw-modal__paid:hover { color: #fff; }

.bdw-claim { display: flex; gap: 8px; align-items: center; }
.bdw-claim__input {
	flex: 1;
	min-width: 0;
	height: 40px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font-size: 14px;
}
.bdw-claim__input::placeholder { color: rgba(255, 255, 255, .4); }
.bdw-claim__btn {
	height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: 10px;
	background: #fff;
	color: #0e1016;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	white-space: nowrap;
}
.bdw-claim__btn:disabled { opacity: .6; cursor: default; }
.bdw-claim__msg {
	flex-basis: 100%;
	margin: 6px 0 0;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .75);
	text-align: left;
}

/* Lock background scroll while open. */
body.bdw-open { overflow: hidden; }

/* ── Mobile: bottom sheet that hugs the checkout height ─────────────────────
   (a forced 100dvh height is what made the form float in a sea of black)
   Triggered by the viewport width OR by JS phone detection (.bdw-is-mobile),
   so landscape phones get the sheet too. */
@media (max-width: 560px) {
	.bdw-modal { padding: 0; align-items: flex-end; }
	.bdw-modal__box {
		max-width: none;
		width: 100%;
		/* A DEFINITE height (not auto) is what lets the inner area scroll. With
		   height:auto the box hugged the tall checkout and clipped the bottom
		   (Apple Pay express button on top pushed "Continuer" off-screen and it
		   couldn't be reached). A fixed sheet height + a real scroll container
		   below guarantees the bottom button is always scrollable into view. */
		height: 90dvh;
		max-height: 90dvh;
		border: 0;
		border-radius: 18px 18px 0 0;
	}
	/* The checkout mount becomes the scroll container, bounded to the frame.
	   Bottom safe-area padding keeps the last button clear of the iOS toolbar. */
	.bdw-mount {
		position: absolute;
		inset: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
		box-sizing: border-box;
	}
	/* When the chk_ fallback iframe is used, fill the sheet (it scrolls itself). */
	.bdw-iframe { height: 100% !important; }
	.bdw-modal__close { top: 14px; right: 14px; }
}
.bdw-modal.bdw-is-mobile { padding: 0; align-items: flex-end; }
.bdw-modal.bdw-is-mobile .bdw-modal__box {
	max-width: none;
	width: 100%;
	height: 90dvh;
	max-height: 90dvh;
	border: 0;
	border-radius: 18px 18px 0 0;
}
.bdw-modal.bdw-is-mobile .bdw-mount {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
	box-sizing: border-box;
}
.bdw-modal.bdw-is-mobile .bdw-iframe { height: 100% !important; }
.bdw-modal.bdw-is-mobile .bdw-modal__close { top: 14px; right: 14px; }

@media (prefers-reduced-motion: reduce) {
	.bdw-modal,
	.bdw-modal__box,
	.bdw-modal__iframe { transition: none; }
	.bdw-modal__spin { animation-duration: 1.4s; }
}