/* Bricks Blocks – Submissions popups (Explorer + Trailblazer)
 *
 * Port of the "Organiseer een activiteit" mockup. Every colour/spacing reads the
 * site's Bricks variables (--secondary, --space-m, …) with the mockup value as
 * fallback, so the popup matches the site and still works on one without them.
 * The fonts (Geologica, Poppins) are expected to be loaded by the site.
 *
 * The panel (.bb-sub-popup) is a <dialog> on the front end, or a plain block in the
 * builder preview and in "Inline" mode. The dialog lives in the top layer but still
 * inherits custom properties from the element root, so the Colors controls (which
 * set --bb-sub-* on the root) reach it.
 */

.bb-sub {
	--bb-sub-head-bg: var(--stories, #3d6f9f);
	--bb-sub-primary: var(--primary, #5f112b);
	--bb-sub-select: var(--secondary, #4e2567);
	--bb-sub-accent: var(--accent, #2f8a6c);
	--bb-sub-accent-dark: var(--accent-dark, #22684f);
	--bb-sub-text: var(--text, #222222);
	--bb-sub-muted: var(--text-muted, #5a5a5a);
	--bb-sub-border: var(--border, #e8dcd9);
	--bb-sub-req: var(--friendships, #c05f6e);
	--bb-sub-success: var(--adventures, #3f7d68);
	--bb-sub-success-bg: var(--adventures-l-5, #e1efe8);
	--bb-sub-font-title: "Geologica", sans-serif;
	--bb-sub-font-body: "Poppins", sans-serif;

	--bb-sub-2xs: var(--space-2xs, clamp(0.51rem, calc(0.00029629629629629656 * (100vw - 22.5rem) + 0.51rem), 0.53rem));
	--bb-sub-m: var(--space-m, clamp(1rem, calc(0.003703703703703704 * (100vw - 22.5rem) + 1rem), 1.25rem));
	--bb-sub-l: var(--space-l, clamp(1.25rem, calc(0.006222222222222221 * (100vw - 22.5rem) + 1.25rem), 1.67rem));
	--bb-sub-xl: var(--space-xl, clamp(1.56rem, calc(0.00977777777777778 * (100vw - 22.5rem) + 1.56rem), 2.22rem));
	--bb-sub-2xl: var(--space-2xl, clamp(1.95rem, calc(0.014962962962962963 * (100vw - 22.5rem) + 1.95rem), 2.96rem));
}

.bb-sub--trailblazer {
	--bb-sub-head-bg: var(--adventures, #3f7d68);
}

/* ---------- Buttons (trigger, footer, success) ---------- */
.bb-sub-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--bb-sub-2xs);
	margin: 0;
	padding: 0.85em 1.6em;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--bb-sub-font-title);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: normal;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.bb-sub-btn:hover { transform: translateY(-1px); }
.bb-sub-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.bb-sub-btn[hidden] { display: none; }
.bb-sub-btn:disabled { opacity: 0.6; cursor: progress; transform: none; }

.bb-sub-btn--primary { background: var(--bb-sub-accent); color: #ffffff; }
.bb-sub-btn--primary:hover { background: var(--bb-sub-accent-dark); color: #ffffff; box-shadow: 0 8px 24px rgba(95, 17, 43, 0.10); }

.bb-sub-btn--outline { background: transparent; color: var(--bb-sub-accent); border-color: var(--bb-sub-accent); }
.bb-sub-btn--outline:hover { background: var(--bb-sub-accent); color: #ffffff; }

.bb-sub-btn:focus-visible,
.bb-sub-popup__close:focus-visible {
	outline: 2px solid var(--bb-sub-select);
	outline-offset: 2px;
}

/* ---------- Panel ---------- */
.bb-sub-popup {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: min(720px, calc(100vw - 32px));
	margin: 0 auto;
	padding: 0;
	border: none;
	border-radius: 28px;
	background: #ffffff;
	box-shadow: 0 16px 48px rgba(95, 17, 43, 0.16);
	overflow: hidden;
	color: var(--bb-sub-text);
	font-family: var(--bb-sub-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	-webkit-font-smoothing: antialiased;
}

.bb-sub-popup *,
.bb-sub-popup *::before,
.bb-sub-popup *::after {
	box-sizing: border-box;
}

.bb-sub-popup--wide { width: min(980px, calc(100vw - 32px)); }

dialog.bb-sub-popup {
	position: fixed;
	inset: 0;
	margin: auto;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
}

dialog.bb-sub-popup:not([open]) { display: none; }
dialog.bb-sub-popup[open] { animation: bb-sub-in 0.22s ease; }

dialog.bb-sub-popup::backdrop {
	background: rgba(47, 2, 17, 0.6);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

@keyframes bb-sub-in {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	dialog.bb-sub-popup[open] { animation: none; }
}

/* Page behind an open popup doesn't scroll. */
html.bb-sub-lock { overflow: hidden; }

/* Builder preview + inline mode: a normal block that fits its container. */
.bb-sub-popup--preview,
.bb-sub-popup--inline { max-width: 100%; }
.bb-sub-popup--preview { margin-top: var(--bb-sub-m); }
.bb-sub-popup--inline { width: 100%; }
.bb-sub-popup--inline:not(.bb-sub-popup--wide) { max-width: 720px; }
.bb-sub-popup--inline.bb-sub-popup--wide { max-width: 980px; }

/* ---------- Header ---------- */
.bb-sub-popup__head {
	position: relative;
	flex-shrink: 0;
	padding: var(--bb-sub-xl) var(--bb-sub-2xl);
	background: var(--bb-sub-head-bg);
	color: #ffffff;
}

.bb-sub-popup--wide .bb-sub-popup__head { padding-block: var(--bb-sub-l); }

.bb-sub-popup .bb-sub-popup__eyebrow {
	margin: 0 0 var(--bb-sub-2xs);
	font-family: var(--bb-sub-font-title);
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}

.bb-sub-popup .bb-sub-popup__title {
	margin: 0 0 var(--bb-sub-2xs);
	padding: 0 48px 0 0;
	font-family: var(--bb-sub-font-title);
	font-weight: 900;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.05;
	letter-spacing: normal;
	text-transform: uppercase;
	color: #ffffff;
}

.bb-sub-popup--inline .bb-sub-popup__title { padding-right: 0; }

.bb-sub-popup .bb-sub-popup__intro {
	margin: 0;
	font-size: 0.92rem;
	color: rgba(255, 255, 255, 0.88);
}

.bb-sub-popup__close {
	position: absolute;
	top: var(--bb-sub-m);
	right: var(--bb-sub-m);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: #ffffff;
	cursor: pointer;
	transition: background 0.15s ease;
}

.bb-sub-popup__close:hover { background: rgba(255, 255, 255, 0.32); }
.bb-sub-popup__close svg { width: 18px; height: 18px; }

/* ---------- Stepper (Trailblazer) ---------- */
.bb-sub-stepper {
	display: flex;
	align-items: center;
	gap: var(--bb-sub-2xs);
	margin: var(--bb-sub-m) 0 0;
	padding: 0;
	list-style: none;
}

.bb-sub-stepper__item {
	display: flex;
	align-items: center;
	gap: var(--bb-sub-2xs);
	margin: 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.7);
}

.bb-sub-stepper__item + .bb-sub-stepper__item::before {
	content: "";
	width: 32px;
	height: 2px;
	margin-right: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.35);
}

.bb-sub-stepper__dot {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	font-family: var(--bb-sub-font-title);
	font-weight: 700;
	font-size: 0.78rem;
}

.bb-sub-stepper__item.is-active { color: #ffffff; font-weight: 600; }
.bb-sub-stepper__item.is-active .bb-sub-stepper__dot { background: #ffffff; border-color: #ffffff; color: var(--bb-sub-head-bg); }
.bb-sub-stepper__item.is-done { color: #ffffff; }
.bb-sub-stepper__item.is-done .bb-sub-stepper__dot { background: rgba(255, 255, 255, 0.25); border-color: transparent; font-size: 0; }
.bb-sub-stepper__item.is-done .bb-sub-stepper__dot::after { content: "✓"; font-size: 0.8rem; }

/* ---------- Body + form ---------- */
.bb-sub-popup__body {
	min-height: 0;
	overflow-y: auto;
	padding: var(--bb-sub-2xl);
}

.bb-sub-form {
	display: flex;
	flex-direction: column;
	gap: var(--bb-sub-m);
	margin: 0;
}

.bb-sub-form__cols { display: flex; gap: var(--bb-sub-2xl); }

.bb-sub-form__col {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--bb-sub-m);
	min-width: 0;
}

.bb-sub-form__group-title {
	display: flex;
	align-items: center;
	gap: var(--bb-sub-2xs);
	margin-top: var(--bb-sub-2xs);
	font-family: var(--bb-sub-font-title);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bb-sub-select);
}

.bb-sub-form__group-title::after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: var(--bb-sub-border);
}

.bb-sub-form__group-title:first-child { margin-top: 0; }

.bb-sub-step {
	display: none;
	flex-direction: column;
	gap: var(--bb-sub-m);
	min-height: 330px;
}

.bb-sub-step.is-active { display: flex; }

.bb-sub-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--bb-sub-m);
}

/* Several conditional questions sharing one grid cell (normally one visible). */
.bb-sub-cell {
	display: flex;
	flex-direction: column;
	gap: var(--bb-sub-m);
	min-width: 0;
}

.bb-sub-field[hidden] { display: none; }

/* ---------- Fields ---------- */
.bb-sub-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: none;
}

/* Matches the mockup, where `.form-field label` also styles the pill labels. */
.bb-sub-popup .bb-sub-field__label,
.bb-sub-popup .bb-sub-pill {
	margin: 0;
	padding: 0;
	font-family: var(--bb-sub-font-title);
	font-weight: 600;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--bb-sub-text);
}

.bb-sub-req { color: var(--bb-sub-req); }

.bb-sub-field__hint {
	margin-top: -2px;
	font-size: 0.78rem;
	color: var(--bb-sub-muted);
}

.bb-sub-popup .bb-sub-input {
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0.8em 1em;
	border: 1px solid var(--bb-sub-border);
	border-radius: 8px;
	outline: none;
	background: #ffffff;
	box-shadow: none;
	color: var(--bb-sub-text);
	font-family: var(--bb-sub-font-body);
	font-size: 0.92rem;
	font-weight: 400;
	line-height: normal;
	resize: vertical;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bb-sub-popup .bb-sub-input::placeholder { color: #a39a98; opacity: 1; }

.bb-sub-popup .bb-sub-input:focus {
	border-color: var(--bb-sub-select);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-sub-select) 12%, transparent);
}

/* ---------- Pills (radio / checkbox) ---------- */
.bb-sub-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bb-sub-2xs);
	margin-top: 2px;
}

.bb-sub-pill { position: relative; display: inline-flex; }

.bb-sub-pill input {
	position: absolute;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.bb-sub-pill span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0.5em 1em;
	border: 1px solid var(--bb-sub-border);
	border-radius: 999px;
	background: #ffffff;
	font-size: 0.85rem;
	cursor: pointer;
	user-select: none;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bb-sub-pill span:hover { border-color: var(--bb-sub-select); }
.bb-sub-pill input:checked + span { background: var(--bb-sub-select); border-color: var(--bb-sub-select); color: #ffffff; }
.bb-sub-pill input:focus-visible + span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-sub-select) 25%, transparent); }
.bb-sub-pills--compact .bb-sub-pill span { min-width: 44px; justify-content: center; }

.bb-sub-popup--wide .bb-sub-pill span { padding: 0.45em 0.9em; font-size: 0.82rem; }

/* ---------- Footer ---------- */
.bb-sub-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--bb-sub-m);
	margin-top: var(--bb-sub-2xs);
	padding-top: var(--bb-sub-m);
	border-top: 1px solid var(--bb-sub-border);
}

/* A lone submit button (no note / step counter) still sits on the right. */
.bb-sub-foot > [data-bb-sub-next]:only-child { margin-left: auto; }

.bb-sub-foot__note {
	max-width: 340px;
	font-size: 0.78rem;
	line-height: 1.6;
	color: var(--bb-sub-muted);
}

.bb-sub-foot__count { font-size: 0.82rem; color: var(--bb-sub-muted); }

.bb-sub-popup .bb-sub-form__error {
	margin: 0;
	padding: 0.7em 1em;
	border-radius: 8px;
	background: #fbe9ec;
	color: #9b2c3e;
	font-size: 0.85rem;
}

.bb-sub-form__error[hidden] { display: none; }

/* ---------- Honeypot ---------- */
.bb-sub-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- Success view ---------- */
.bb-sub-success {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: var(--bb-sub-m);
	padding: var(--bb-sub-2xl) var(--bb-sub-m);
	text-align: center;
	outline: none;
}

.bb-sub-popup.is-sent .bb-sub-form { display: none; }
.bb-sub-popup.is-sent .bb-sub-success { display: flex; }

.bb-sub-success__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--bb-sub-success-bg);
	color: var(--bb-sub-success);
}

.bb-sub-success__icon svg { width: 34px; height: 34px; }

.bb-sub-popup .bb-sub-success__title {
	margin: 0;
	font-family: var(--bb-sub-font-title);
	font-weight: 900;
	font-size: 1.4rem;
	line-height: 1.05;
	text-transform: none;
	color: var(--bb-sub-primary);
}

.bb-sub-popup .bb-sub-success__text {
	max-width: 420px;
	margin: 0;
	color: var(--bb-sub-muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
	.bb-sub-form__cols { flex-direction: column; gap: var(--bb-sub-m); }
	.bb-sub-stepper__item:not(.is-active) .bb-sub-stepper__label { display: none; }
}

@media (max-width: 560px) {
	.bb-sub-row { grid-template-columns: 1fr; }
	.bb-sub-foot [data-bb-sub-next] { margin-left: auto; }
	.bb-sub-popup__head,
	.bb-sub-popup--wide .bb-sub-popup__head,
	.bb-sub-popup__body { padding: var(--bb-sub-l); }
}