/*!
 * Events & Tickets — public styles
 * Scoped to .bfnet so it never leaks into the host theme.
 */

.bfnet {
	--bfnet-primary: #6423e2;
	--bfnet-dark: #012254;
	--bfnet-ink: #16181d;
	--bfnet-muted: #6b7280;
	--bfnet-line: #e5e7eb;
	--bfnet-surface: #ffffff;
	--bfnet-soft: #f7f7f9;
	--bfnet-radius: 14px;
	--bfnet-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);

	max-width: 1080px;
	margin: 0 auto;
	color: var(--bfnet-ink);
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.bfnet *,
.bfnet *::before,
.bfnet *::after { box-sizing: border-box; }

.bfnet img { max-width: 100%; height: auto; display: block; }
.bfnet .bfnet-block { display: block; }
.bfnet .bfnet-muted { color: var(--bfnet-muted); }

/* ---------- Alerts ---------- */

.bfnet-alert {
	padding: 14px 16px;
	border-radius: 10px;
	margin: 0 0 20px;
	font-size: 15px;
	border: 1px solid transparent;
}
.bfnet-alert--error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.bfnet-alert--info { background: #f0f6ff; border-color: #cfe0fb; color: #1e429f; }

/* ---------- Event header: poster 1/3, details 2/3 ---------- */

.bfnet-event {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 26px;
	align-items: start;
	background: var(--bfnet-surface);
	border: 1px solid var(--bfnet-line);
	border-radius: var(--bfnet-radius);
	box-shadow: var(--bfnet-shadow);
	padding: 22px;
	margin-bottom: 24px;
}

/* The poster is shown whole — event artwork is usually 2:3 or 3:4 and cropping it
   to a wide strip throws away the design. */
.bfnet-event__poster {
	position: sticky;
	top: 20px;
	border-radius: 11px;
	overflow: hidden;
	background: #101114;
	line-height: 0;
}
.bfnet-event__poster img { width: 100%; height: auto; display: block; object-fit: contain; }

.bfnet-event__main { min-width: 0; }
.bfnet-event__main--wide { grid-column: 1 / -1; }

.bfnet-event__title {
	margin: 0 0 8px;
	font-size: clamp(25px, 3.4vw, 34px);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -.01em;
}
.bfnet-event__subtitle { margin: 0 0 16px; font-size: 16.5px; color: var(--bfnet-muted); }

.bfnet-eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--bfnet-primary);
	font-weight: 600;
}

/* Countdown */

.bfnet-countdown {
	display: inline-flex;
	align-items: baseline;
	gap: 9px;
	padding: 9px 15px;
	margin: 0 0 18px;
	background: var(--bfnet-dark);
	color: #fff;
	border-radius: 999px;
}
.bfnet-countdown__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.bfnet-countdown__value { font-size: 15.5px; font-weight: 700; color: var(--bfnet-primary); font-variant-numeric: tabular-nums; }

.bfnet-tz {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 5px;
	background: var(--bfnet-soft);
	border: 1px solid var(--bfnet-line);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--bfnet-muted);
	letter-spacing: .04em;
	vertical-align: 1px;
}
.bfnet-localtime { font-size: 12.5px; margin-top: 3px; }

/* The facts panel.
   Each label sits on its own dark band in gold, and hairlines rule the grid, so
   date, time and venue read as a printed table rather than as text floating on
   a page. On a phone the grid collapses to one column and the rules follow. */
.bfnet-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1px;
	margin: 0 0 20px;
	padding: 1px;
	background: #fff;
	border: 1px solid var(--bfnet-line);
	border-radius: var(--bfnet-radius, 10px);
	overflow: hidden;
}
.bfnet-facts--compact { border-top: 1px solid var(--bfnet-line); padding: 1px; }

/* Rules are drawn by each cell rather than by the grid, so a half-empty last
   row leaves clean white space instead of a grey block. */
.bfnet-fact {
	background: #fff;
	padding: 0 0 14px;
	min-width: 0;
	box-shadow: 0 0 0 1px var(--bfnet-line);
}
.bfnet-fact dt {
	display: block;
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 700;
	color: #d8b53f;
	background: #12141a;
	padding: 8px 14px;
	margin: 0 0 11px;
}
.bfnet-fact dd {
	margin: 0;
	padding: 0 14px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.bfnet-maplink {
	display: inline-block;
	margin-left: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--bfnet-primary);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.bfnet-prose { font-size: 15.5px; color: #374151; }
.bfnet-prose p { margin: 0 0 12px; }

.bfnet-scarcity {
	margin: 0 0 4px;
	padding: 9px 14px;
	background: #fff7ed;
	border: 1px solid #fed7aa;
	color: #9a3412;
	border-radius: 999px;
	display: inline-block;
	font-size: 13.5px;
	font-weight: 600;
}
.bfnet-scarcity--small { margin-top: 10px; font-size: 12.5px; padding: 6px 11px; }

/* Phone: poster first, full width and uncropped, then everything else. */
@media (max-width: 860px) {
	.bfnet-event { grid-template-columns: 1fr; gap: 20px; padding: 16px; }
	.bfnet-event__poster { position: static; max-width: 460px; margin: 0 auto; }
}

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

.bfnet-form {
	background: var(--bfnet-surface);
	border: 1px solid var(--bfnet-line);
	border-radius: var(--bfnet-radius);
	box-shadow: var(--bfnet-shadow);
	padding: 8px 26px 26px;
}

.bfnet-fieldset { border: 0; padding: 18px 0 0; margin: 0; }
.bfnet-fieldset + .bfnet-fieldset { border-top: 1px solid var(--bfnet-line); margin-top: 22px; }
.bfnet-fieldset legend {
	padding: 0;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bfnet-muted);
	font-weight: 700;
}

.bfnet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }
.bfnet-field { margin: 0; }
.bfnet-field--wide { grid-column: 1 / -1; }

.bfnet-field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.bfnet-req { color: #dc2626; }

.bfnet input[type="text"],
.bfnet input[type="email"],
.bfnet input[type="tel"],
.bfnet input[type="number"],
.bfnet select,
.bfnet textarea {
	width: 100%;
	padding: 11px 13px;
	font-size: 15px;
	font-family: inherit;
	color: var(--bfnet-ink);
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 9px;
	transition: border-color .15s, box-shadow .15s;
}
.bfnet input:focus,
.bfnet select:focus,
.bfnet textarea:focus {
	outline: none;
	border-color: var(--bfnet-primary);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, .18);
}
.bfnet textarea { resize: vertical; min-height: 76px; }

.bfnet-help { display: block; margin-top: 5px; font-size: 12.5px; color: var(--bfnet-muted); }
.bfnet-help--block { margin: 12px 0 4px; }

.bfnet-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Quantity stepper */

.bfnet-qty { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* Beats the generic .bfnet input[type="number"] full-width rule above, which would
   otherwise push the − and + buttons onto their own lines. */
.bfnet .bfnet-qty input[type="number"] {
	width: 84px;
	flex: 0 0 84px;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	-moz-appearance: textfield;
}
.bfnet-qty input::-webkit-outer-spin-button,
.bfnet-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.bfnet-qty__btn {
	width: 42px;
	height: 42px;
	border-radius: 9px;
	border: 1px solid #d1d5db;
	background: #fff;
	font-size: 21px;
	line-height: 1;
	cursor: pointer;
	color: var(--bfnet-ink);
	transition: background .15s, border-color .15s;
}
.bfnet-qty__btn:hover { background: var(--bfnet-soft); border-color: var(--bfnet-primary); }
.bfnet-qty__btn:disabled { opacity: .4; cursor: not-allowed; }
.bfnet-qty__max { font-size: 13px; color: var(--bfnet-muted); }

/* Guests */

.bfnet-guests { margin-top: 16px; display: grid; gap: 14px; }
.bfnet-guest { padding: 15px 16px; background: var(--bfnet-soft); border: 1px solid var(--bfnet-line); border-radius: 11px; }
.bfnet-guest[hidden] { display: none; }
.bfnet-guest__title { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #374151; }
.bfnet-guest .bfnet-grid { margin-top: 10px; }

/* Total + consent */

.bfnet-total {
	display: block;
	margin: 20px 0 14px;
	padding: 15px 17px;
	background: var(--bfnet-dark);
	color: #fff;
	border-radius: 11px;
}
.bfnet-total span { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.bfnet-total strong { font-size: 24px; font-weight: 700; color: var(--bfnet-primary); }

.bfnet-check { margin: 10px 0; font-size: 14px; }
.bfnet-check label { display: flex; gap: 9px; align-items: flex-start; cursor: pointer; }
.bfnet-check input { margin-top: 3px; flex: 0 0 auto; }
.bfnet-check a { color: var(--bfnet-primary); }

.bfnet-note {
	margin: 16px 0;
	padding: 13px 15px;
	background: #fbf7ea;
	border-left: 3px solid var(--bfnet-primary);
	border-radius: 0 9px 9px 0;
	font-size: 14px;
	color: #4b4b4b;
}
.bfnet-note p:last-child { margin-bottom: 0; }

/* The button a guest presses is the one control a theme is most likely to have
   an opinion about -- a fixed height, an inherited line-height, a text
   transform. Everything that decides where the label sits is therefore stated
   here rather than inherited, and the label is centred by the box itself
   instead of by a line-height that belongs to somebody else. */
.bfnet .bfnet-form .bfnet-submit,
.bfnet-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 56px;
	height: auto;
	margin-top: 18px;
	padding: 16px 22px;
	font-size: 16px;
	line-height: 1.25;
	font-weight: 700;
	font-family: inherit;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background: var(--bfnet-dark);
	border: 0;
	border-radius: 11px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: transform .12s, background .15s;
}
.bfnet-submit:hover { background: #000; transform: translateY(-1px); }
.bfnet-submit:disabled { opacity: .6; cursor: progress; transform: none; }

/* Pay later, under pay now. The same button, said more quietly: the guest
   should be able to see at a glance which one the event would rather they
   pressed, without the other feeling like a trap. */
.bfnet .bfnet-form .bfnet-submit--ghost,
.bfnet-submit--ghost {
	margin-top: 10px;
	color: var(--bfnet-dark);
	background: transparent;
	border: 1px solid var(--bfnet-line);
}
.bfnet-submit--ghost:hover { background: var(--bfnet-soft); color: var(--bfnet-dark); }

.bfnet-fineprint { margin: 12px 0 0; font-size: 12.5px; color: var(--bfnet-muted); text-align: center; }

/* The booking window. A line of text and nothing else: stated in full, because
   a theme that decorates every paragraph inside a form turned this one into a
   dark pill with an invisible label in it. */
.bfnet .bfnet-countdown,
.bfnet-countdown {
	display: block;
	margin: 14px 0 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bfnet-muted);
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
}
.bfnet .bfnet-countdown b,
.bfnet-countdown b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--bfnet-dark); background: none; }
.bfnet-countdown.is-low b { color: #C0392B; }
.bfnet-countdown.is-out, .bfnet-countdown.is-out b { color: #C0392B; }

/* ---------- Cards ---------- */

.bfnet-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

.bfnet-card {
	background: var(--bfnet-surface);
	border: 1px solid var(--bfnet-line);
	border-radius: var(--bfnet-radius);
	overflow: hidden;
	box-shadow: var(--bfnet-shadow);
	display: flex;
	flex-direction: column;
	transition: transform .15s, box-shadow .15s;
}
.bfnet-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(16,24,40,.07), 0 14px 34px rgba(16,24,40,.09); }

.bfnet-card__media { position: relative; display: block; }
.bfnet-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.bfnet-card__placeholder {
	display: block;
	aspect-ratio: 16 / 10;
	background: linear-gradient(135deg, #16181d 0%, #2a2a2a 60%, var(--bfnet-primary) 190%);
}
.bfnet-card__date {
	position: absolute;
	left: 14px;
	bottom: 14px;
	background: rgba(11, 11, 11, .88);
	color: #fff;
	border-radius: 9px;
	padding: 7px 11px;
	text-align: center;
	line-height: 1.05;
	backdrop-filter: blur(4px);
}
.bfnet-card__date em { display: block; font-style: normal; font-size: 19px; font-weight: 700; }
.bfnet-card__date i { display: block; font-style: normal; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--bfnet-primary); }

.bfnet-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.bfnet-card__title { margin: 0 0 6px; font-size: 19px; line-height: 1.25; font-weight: 700; }
.bfnet-card__title a { color: inherit; text-decoration: none; }
.bfnet-card__title a:hover { color: var(--bfnet-primary); }
.bfnet-card__meta { margin: 0 0 10px; font-size: 13.5px; color: #4b5563; }
.bfnet-card__excerpt { margin: 0 0 14px; font-size: 14px; color: var(--bfnet-muted); }
.bfnet-card__footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.bfnet-price { font-size: 14px; font-weight: 700; }

.bfnet-btn {
	display: inline-block;
	padding: 9px 17px;
	background: var(--bfnet-dark);
	color: #fff !important;
	border-radius: 9px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s;
}
.bfnet-btn:hover { background: #000; }
.bfnet-btn--lg { padding: 14px 26px; font-size: 16px; margin: 6px 0 14px; }

/* The second way to pay, next to the first. Same shape, quieter voice: two
   buttons of equal weight make a guest choose instead of act. */
.bfnet-btn--ghost {
	background: transparent;
	color: var(--bfnet-dark) !important;
	border: 1px solid var(--bfnet-line);
	margin: 6px 0 14px;
}
.bfnet-btn--ghost:hover { background: var(--bfnet-soft); }

.bfnet-badge { display: inline-block; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.bfnet-badge--muted { background: var(--bfnet-soft); color: var(--bfnet-muted); border: 1px solid var(--bfnet-line); }

/* ---------- Confirmation / empty ---------- */

.bfnet-confirm,
.bfnet-empty {
	background: var(--bfnet-surface);
	border: 1px solid var(--bfnet-line);
	border-radius: var(--bfnet-radius);
	box-shadow: var(--bfnet-shadow);
	padding: 36px 28px;
	text-align: center;
}
.bfnet-confirm__mark { color: #16a34a; display: flex; justify-content: center; margin-bottom: 14px; }
.bfnet-confirm h2 { margin: 0 0 10px; font-size: 26px; font-weight: 700; }
.bfnet-confirm__lead { margin: 0 auto 22px; max-width: 540px; color: #4b5563; }
.bfnet-confirm .bfnet-facts { text-align: center; max-width: 560px; margin: 0 auto 22px; }
.bfnet-confirm .bfnet-fact dd { text-align: center; }

.bfnet-reference {
	display: inline-flex;
	flex-direction: column;
	gap: 3px;
	padding: 13px 26px;
	border: 1px dashed var(--bfnet-primary);
	border-radius: 11px;
	margin-bottom: 22px;
	background: #fbf7ea;
}
.bfnet-reference span { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bfnet-muted); }
.bfnet-reference strong { font-size: 21px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }

.bfnet-empty h3 { margin: 0 0 8px; font-size: 21px; }
.bfnet-empty p { margin: 0; color: var(--bfnet-muted); }

@media (max-width: 600px) {
	.bfnet-hero__body, .bfnet-form { padding-left: 18px; padding-right: 18px; }
	.bfnet-confirm, .bfnet-empty { padding: 28px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.bfnet *, .bfnet *::before, .bfnet *::after { transition: none !important; animation: none !important; }
}

/* ---------- Legal links and terms note ---------- */

.bfnet-legal { display: block; margin-top: 3px; font-size: 13px; }
.bfnet-legal a { color: var(--bfnet-primary); }
.bfnet-note--terms { background: var(--bfnet-soft); border-left-color: var(--bfnet-muted); }

/* ---------- Discount code ---------- */

.bfnet-promo { margin: 0 0 14px; }
.bfnet-promo label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.bfnet-promo__row { display: flex; gap: 8px; align-items: stretch; }
.bfnet-promo__row input {
	flex: 1;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.bfnet-promo__msg { margin: 7px 0 0; font-size: 13px; }
.bfnet-promo__msg.is-good { color: #0f7b3f; font-weight: 600; }
.bfnet-promo__msg.is-bad { color: #b3261e; }

.bfnet-total__line { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.bfnet-total__line--off { font-size: 14px; opacity: .82; margin-bottom: 6px; }
.bfnet-total__line--off strong { color: #7fd6a0; font-size: 16px; }
.bfnet-total__line--off span { opacity: .72; }

/* ---------- Menu ---------- */

.bfnet-menu {
	border: 1px solid var(--bfnet-line);
	border-left: 4px solid var(--bfnet-primary);
	border-radius: var(--bfnet-radius, 10px);
	padding: 16px 20px;
	margin: 0 0 20px;
	background: #fcfbf7;
}
.bfnet-menu h3 {
	margin: 0 0 8px;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #8a6a12;
}
.bfnet-menu__body { font-size: 14.5px; line-height: 1.6; }
.bfnet-menu__body p { margin: 0 0 8px; }
.bfnet-menu__body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------- stand-in booking page
   The form rendered by the plugin itself, on a site with no booking page. It
   sits inside whatever the theme wrapped around it, so it only asks for room
   to breathe and a sensible measure. */

.bfnet-standalone { max-width: 1100px; margin: 0 auto; padding: 32px 20px 64px; }
@media (max-width: 640px) { .bfnet-standalone { padding: 20px 14px 44px; } }


/* Where the confirmation email went, and where to look for it. */
.bfnet-confirm__mail { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--bfnet-muted); max-width: 46ch; margin-inline: auto; }
.bfnet-confirm__mail strong { color: inherit; }

/* ---------- what is still for sale ----------
   The count above the guest rows, and the line under a row that lost its
   category to somebody faster. Both are written by the script from numbers the
   server keeps giving it while the form is open. */
.bfnet-left {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--bfnet-dark, #0B0B0B);
}
.bfnet-left.is-low { color: #C0392B; }
.bfnet-left.is-gone { color: #C0392B; }

.bfnet-guest__warn {
	display: block;
	margin-top: 6px;
	color: #C0392B;
	font-weight: 600;
}

.bfnet-guest.is-gone {
	box-shadow: inset 3px 0 0 #C0392B;
}
.bfnet-guest.is-gone select {
	border-color: #C0392B;
}