body {
	font-family:Arial;
}

/* =======================================================================================
 * NuitBlanche namespace - dark public form theme
 * Inspired by nuit-blanche.ch: black + neon tricolor red/yellow/lime, Roboto.
 * All rules are scoped to .public.publicNuitBlanche (the wrapper class injected by
 * AddSubscriptionFormExecutor.php from the Wigii namespace URL) so they only apply to
 * NuitBlanche public pages - never to the backend admin or to other premiereligne
 * namespaces. Each scoped selector is duplicated in camelCase and lowercase, since
 * the Wigii namespace URL can be rendered either way depending on environment.
 * Palette pulled from the live nuit-blanche.ch CSS.
 * ======================================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

:root {
	--nb-bg-deep: #0a0a0a;
	--nb-bg-card: #161616;
	--nb-bg-input: #0d0d0d;
	--nb-text: #f5f5f5;
	--nb-text-muted: #adadad;
	--nb-border: #2a2a2a;
	--nb-border-soft: #1f1f1f;
	--nb-red: #ff4c4c;
	--nb-red-dark: #e2001a;
	--nb-yellow: #ffcc00;
	--nb-lime: #c4e002;
	--nb-radius-card: 8px;
	--nb-radius-pill: 25px;
	--nb-radius-input: 4px;
	--nb-shadow-card: 0 18px 48px -12px rgba(0,0,0,0.85), 0 0 0 1px var(--nb-border-soft);
	--nb-glow-red: 0 0 0 2px rgba(255,76,76,0.25);
	--nb-font: "Roboto", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
	--nb-neon-bar: linear-gradient(90deg, var(--nb-red) 0%, var(--nb-red) 33%, var(--nb-yellow) 33%, var(--nb-yellow) 66%, var(--nb-lime) 66%, var(--nb-lime) 100%);
}

/* ============ page (scoped to NuitBlanche public pages via body:has) ============ */
body:has(.public.publicNuitBlanche),
body:has(.public.publicnuitblanche) {
	background-color: var(--nb-bg-deep);
	font-family: var(--nb-font);
	color: var(--nb-text);
}

/* ============ top banner with NuitBlanche SVG logo + neon bar ============ */
body:has(.public.publicNuitBlanche) .public.beforePublicContainer,
body:has(.public.publicnuitblanche) .public.beforePublicContainer {
	background-color: #000;
	margin: 0 auto;
	max-width: 700px;
	padding: 0;
	text-align: center;
	box-sizing: border-box;
	position: relative;
	z-index: 2;
	overflow: hidden;
	border-top-left-radius: var(--nb-radius-card);
	border-top-right-radius: var(--nb-radius-card);
	background-image: url('nuitblanche_logo.svg');
	background-repeat: no-repeat;
	background-position: center 30px;
	background-size: 280px auto;
	height: 230px;
}
body:has(.public.publicNuitBlanche) .public.beforePublicContainer::before,
body:has(.public.publicnuitblanche) .public.beforePublicContainer::before {
	content: '';
	display: block;
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 4px;
	background: var(--nb-neon-bar);
}

/* ============ form card - dark mode (override framework inline background:#fff) ============ */
.public.publicNuitBlanche,
.public.publicnuitblanche {
	background-color: var(--nb-bg-card) !important;
	color: var(--nb-text);
	font-size: 15px;
	line-height: 1.5;
	border-radius: 0 0 var(--nb-radius-card) var(--nb-radius-card);
	box-shadow: var(--nb-shadow-card);
	position: relative;
	z-index: 1;
}
.public.publicNuitBlanche p,
.public.publicnuitblanche p {
	margin: 0 0 1em;
}
.public.publicNuitBlanche p:last-child,
.public.publicnuitblanche p:last-child {
	margin-bottom: 0;
}
.public.publicNuitBlanche h4,
.public.publicnuitblanche h4 {
	font-family: var(--nb-font);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--nb-text);
	margin: 8px 0 14px;
}

/* ============ titles inside the card ============ */
.public.publicNuitBlanche h1,
.public.publicnuitblanche h1 {
	font-family: var(--nb-font);
	font-weight: 900;
	font-size: 1.7rem;
	color: var(--nb-text);
	text-align: center;
	margin: 4px 0 18px;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}
.public.publicNuitBlanche h1::after,
.public.publicnuitblanche h1::after {
	content: '';
	display: block;
	width: 80px;
	height: 3px;
	margin: 12px auto 0;
	background: var(--nb-neon-bar);
}

/* ============ labels & fields ============ */
.public.publicNuitBlanche form div.field,
.public.publicnuitblanche form div.field {
	padding-top: 12px !important;
}
.public.publicNuitBlanche label,
.public.publicNuitBlanche div.label,
.public.publicNuitBlanche div.field div.label,
.public.publicnuitblanche label,
.public.publicnuitblanche div.label,
.public.publicnuitblanche div.field div.label {
	font-family: var(--nb-font);
	font-weight: 500;
	color: var(--nb-text);
}
.public.publicNuitBlanche form div.field div.label,
.public.publicnuitblanche form div.field div.label {
	padding-top: 14px;
	color: var(--nb-yellow);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
}
.public.publicNuitBlanche form div.field div.value label,
.public.publicnuitblanche form div.field div.value label {
	line-height: 1.3;
	font-weight: 400;
	color: var(--nb-text);
}
.public.publicNuitBlanche div.value div,
.public.publicnuitblanche div.value div {
	margin-top: 6px !important;
}
.public.publicNuitBlanche .field.freetext,
.public.publicNuitBlanche p,
.public.publicnuitblanche .field.freetext,
.public.publicnuitblanche p {
	color: var(--nb-text-muted);
}

/* divider hr inside the card */
.public.publicNuitBlanche hr,
.public.publicnuitblanche hr {
	border: none;
	border-top: 1px solid var(--nb-border);
	margin: 14px 0 !important;
}

/* ============ inputs - dark, with bright accent on focus ============ */
.public.publicNuitBlanche input,
.public.publicNuitBlanche textarea,
.public.publicNuitBlanche select,
.public.publicnuitblanche input,
.public.publicnuitblanche textarea,
.public.publicnuitblanche select {
	font-family: var(--nb-font);
	background-color: var(--nb-bg-input);
	color: var(--nb-text);
	border: 1px solid var(--nb-border);
	border-radius: var(--nb-radius-input);
	padding: 10px 12px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
/* native <select> needs appearance:none to accept custom dark styling on most browsers,
   plus a custom yellow arrow drawn with a background SVG */
.public.publicNuitBlanche select,
.public.publicnuitblanche select {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background-color: var(--nb-bg-input) !important;
	color: var(--nb-text) !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffcc00' d='M6 8 0 0h12z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	padding-right: 32px !important;
}
.public.publicNuitBlanche select option,
.public.publicnuitblanche select option {
	background-color: var(--nb-bg-input);
	color: var(--nb-text);
}
.public.publicNuitBlanche input::placeholder,
.public.publicNuitBlanche textarea::placeholder,
.public.publicnuitblanche input::placeholder,
.public.publicnuitblanche textarea::placeholder {
	color: #6a6a6a;
}
.public.publicNuitBlanche input:focus,
.public.publicNuitBlanche textarea:focus,
.public.publicNuitBlanche select:focus,
.public.publicnuitblanche input:focus,
.public.publicnuitblanche textarea:focus,
.public.publicnuitblanche select:focus {
	border-color: var(--nb-red) !important;
	background-color: #0a0a0a;
	box-shadow: var(--nb-glow-red);
	outline: none;
}
.public.publicNuitBlanche input:hover,
.public.publicNuitBlanche textarea:hover,
.public.publicNuitBlanche select:hover,
.public.publicnuitblanche input:hover,
.public.publicnuitblanche textarea:hover,
.public.publicnuitblanche select:hover {
	border-color: #3a3a3a;
}
.public.publicNuitBlanche input[type="radio"],
.public.publicNuitBlanche input[type="checkbox"],
.public.publicnuitblanche input[type="radio"],
.public.publicnuitblanche input[type="checkbox"] {
	border: 1px solid var(--nb-text-muted) !important;
	accent-color: var(--nb-red);
	background-color: var(--nb-bg-input);
}
.public.publicNuitBlanche div.value input[type="checkbox"],
.public.publicnuitblanche div.value input[type="checkbox"] {
	margin-top: 8px !important;
}

/* select2 dropdown widget used by Wigii - keep consistent on dark */
body:has(.public.publicNuitBlanche) .select2-container--default .select2-selection--single,
body:has(.public.publicNuitBlanche) .select2-container--default .select2-selection--multiple,
body:has(.public.publicnuitblanche) .select2-container--default .select2-selection--single,
body:has(.public.publicnuitblanche) .select2-container--default .select2-selection--multiple {
	background-color: var(--nb-bg-input) !important;
	border: 1px solid var(--nb-border) !important;
	color: var(--nb-text) !important;
}
body:has(.public.publicNuitBlanche) .select2-container--default .select2-selection--single .select2-selection__rendered,
body:has(.public.publicNuitBlanche) .select2-container--default .select2-selection__choice,
body:has(.public.publicnuitblanche) .select2-container--default .select2-selection--single .select2-selection__rendered,
body:has(.public.publicnuitblanche) .select2-container--default .select2-selection__choice {
	color: var(--nb-text) !important;
}

/* ============ links ============ */
.public.publicNuitBlanche a,
.public.publicnuitblanche a {
	color: var(--nb-yellow);
	text-decoration: underline;
	font-weight: 500;
}
.public.publicNuitBlanche a:hover,
.public.publicnuitblanche a:hover {
	color: var(--nb-red);
}

/* ============ errors ============ */
.public.publicNuitBlanche .fieldError,
.public.publicnuitblanche .fieldError {
	color: var(--nb-red) !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em;
}

/* ============ submit button - red pill, yellow on hover ============ */
.public.publicNuitBlanche #validateButton,
.public.publicnuitblanche #validateButton {
	padding-right: 8px;
	margin-top: 22px;
}
.public.publicNuitBlanche #validateButton button,
.public.publicnuitblanche #validateButton button {
	font-family: var(--nb-font);
	font-weight: 700;
	color: #fff;
	background-color: var(--nb-red);
	border: 2px solid var(--nb-red);
	padding: 12px 32px;
	border-radius: var(--nb-radius-pill);
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: all 0.2s ease;
	box-shadow: 0 4px 16px -4px rgba(255,76,76,0.55);
}
.public.publicNuitBlanche #validateButton button:hover,
.public.publicNuitBlanche #validateButton button:focus,
.public.publicnuitblanche #validateButton button:hover,
.public.publicnuitblanche #validateButton button:focus {
	color: #000;
	background-color: var(--nb-yellow);
	border-color: var(--nb-yellow);
	text-decoration: none;
	box-shadow: 0 4px 18px -2px rgba(255,204,0,0.6);
}

/* ============ booking range / time slot chooser (DC reservation calendar) ============ */
.public.publicNuitBlanche .timeSlotsContainer,
.public.publicNuitBlanche .globalTimeSlots,
.public.publicnuitblanche .timeSlotsContainer,
.public.publicnuitblanche .globalTimeSlots {
	background-color: transparent !important;
}
.public.publicNuitBlanche .dayTimeSlots,
.public.publicnuitblanche .dayTimeSlots {
	background-color: transparent !important;
	border-left: 1px solid var(--nb-border-soft);
}
.public.publicNuitBlanche .dayTimeSlots:first-child,
.public.publicnuitblanche .dayTimeSlots:first-child {
	border-left: none;
}
.public.publicNuitBlanche .timeSlotHeader,
.public.publicnuitblanche .timeSlotHeader {
	padding: 10px 6px;
	border-bottom: 2px solid var(--nb-border);
	background-color: rgba(255,255,255,0.02);
}
.public.publicNuitBlanche .timeSlotHeader p.title,
.public.publicNuitBlanche .timeSlotHeader p.date,
.public.publicnuitblanche .timeSlotHeader p.title,
.public.publicnuitblanche .timeSlotHeader p.date {
	color: var(--nb-text) !important;
	margin: 2px 0 !important;
}
.public.publicNuitBlanche .timeSlotHeader p.date,
.public.publicnuitblanche .timeSlotHeader p.date {
	color: var(--nb-yellow) !important;
	font-weight: 700;
	font-size: 0.95em;
}
.public.publicNuitBlanche .timeSlot,
.public.publicnuitblanche .timeSlot {
	padding: 6px 4px !important;
	cursor: pointer;
	transition: background-color 0.12s ease, color 0.12s ease;
	border-top: 1px solid var(--nb-border-soft);
}
.public.publicNuitBlanche .timeSlot:hover,
.public.publicnuitblanche .timeSlot:hover {
	background-color: var(--nb-red) !important;
	color: #fff !important;
}
.public.publicNuitBlanche .timeSlot.selected,
.public.publicNuitBlanche .timeSlot.ui-state-active,
.public.publicNuitBlanche .timeSlot.active,
.public.publicnuitblanche .timeSlot.selected,
.public.publicnuitblanche .timeSlot.ui-state-active,
.public.publicnuitblanche .timeSlot.active {
	background-color: var(--nb-lime) !important;
	color: #000 !important;
	font-weight: 700;
}
.public.publicNuitBlanche .timeSlot.disabled,
.public.publicNuitBlanche .timeSlot.unavailable,
.public.publicNuitBlanche .timeSlot[disabled],
.public.publicnuitblanche .timeSlot.disabled,
.public.publicnuitblanche .timeSlot.unavailable,
.public.publicnuitblanche .timeSlot[disabled] {
	color: #4a4a4a !important;
	background-color: transparent !important;
	cursor: not-allowed;
	text-decoration: line-through;
}
.public.publicNuitBlanche .dayTimeSlots:empty,
.public.publicNuitBlanche .dayTimeSlots .timeSlot.empty,
.public.publicnuitblanche .dayTimeSlots:empty,
.public.publicnuitblanche .dayTimeSlots .timeSlot.empty {
	background-color: rgba(255,255,255,0.02) !important;
}
/* navigation prev/next/calendar in commands row */
.public.publicNuitBlanche .commands,
.public.publicnuitblanche .commands {
	padding: 8px 0;
}
.public.publicNuitBlanche .commands .glyphicon,
.public.publicNuitBlanche .commands span,
.public.publicNuitBlanche .commands a,
.public.publicNuitBlanche .commands a:hover,
.public.publicnuitblanche .commands .glyphicon,
.public.publicnuitblanche .commands span,
.public.publicnuitblanche .commands a,
.public.publicnuitblanche .commands a:hover {
	background-color: transparent !important;
	color: var(--nb-yellow) !important;
}
/* sub-fields (Heure de début, Heure de fin, ...) inside the booking range */
.public.publicNuitBlanche .subField .subLabel,
.public.publicnuitblanche .subField .subLabel {
	color: var(--nb-text-muted);
	font-weight: 500;
}
.public.publicNuitBlanche .subField .subInput input,
.public.publicNuitBlanche .subField .subInput select,
.public.publicnuitblanche .subField .subInput input,
.public.publicnuitblanche .subField .subInput select {
	color: var(--nb-text) !important;
	background-color: var(--nb-bg-input) !important;
	border: 1px solid var(--nb-border) !important;
}

/* ============ misc ============ */
.public.publicNuitBlanche .publicFormBorder,
.public.publicnuitblanche .publicFormBorder {
	border-color: var(--nb-border);
}
.public.publicNuitBlanche ::selection,
.public.publicnuitblanche ::selection {
	background-color: var(--nb-yellow);
	color: #000;
}

/* ============ mobile ============ */
@media screen and (max-width: 600px) {
	/* taller banner so the SVG logo is not clipped by the neon bar at the bottom */
	body:has(.public.publicNuitBlanche) .public.beforePublicContainer,
	body:has(.public.publicnuitblanche) .public.beforePublicContainer {
		height: 200px;
		background-size: 200px auto;
		background-position: center 26px;
	}
	.public.publicNuitBlanche,
	.public.publicnuitblanche {
		margin-bottom: 20px;
	}
	.public.publicNuitBlanche h1,
	.public.publicnuitblanche h1 {
		font-size: 1.35rem;
	}
	/* on small screens label and value stack vertically; we need a single, generic
	   vertical rhythm between fields. clear:both ensures fields with floated children
	   (radios, checkboxes) don't collapse their following margin */
	.public.publicNuitBlanche form div.field,
	.public.publicnuitblanche form div.field {
		float: none;
		padding-right: 0;
		margin-right: 0;
		margin-bottom: 8px;
		clear: both;
		overflow: hidden;
	}
	.public.publicNuitBlanche form div.field div.label,
	.public.publicNuitBlanche form div.field div.value,
	.public.publicnuitblanche form div.field div.label,
	.public.publicnuitblanche form div.field div.value {
		float: none;
		min-height: 0;
		line-height: inherit;
		margin-bottom: 0;
	}
	.public.publicNuitBlanche form div.field div.label,
	.public.publicnuitblanche form div.field div.label {
		margin-bottom: 4px;
	}
	.public.publicNuitBlanche #validateButton button,
	.public.publicnuitblanche #validateButton button {
		width: 100%;
	}
}