/* CRM footer — own rules (crm/footer/footer.php). */
.lotto_crm_footer_hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.lotto_crm_footer_notice {
	margin-bottom: 1em;
	padding: 0.75em 1em;
	border-radius: 6px;
}
.lotto_crm_footer_notice_success { background: rgba(30, 215, 96, 0.15); }
.lotto_crm_footer_notice_error   { background: rgba(240, 49, 77, 0.15); }

/* The footer's title is set like the demo's h1 (a heading there, a paragraph here — the page
   keeps one H1); the same rules as .lotto_crm_home_as_h1 in crm/home/css/home.css. */
.lotto_crm_footer .lotto_crm_home_as_h1 {
	font-family: var(--theme-font-h1_font-family);
	font-size: var(--theme-font-h1_font-size);
	font-weight: var(--theme-font-h1_font-weight);
	line-height: var(--theme-font-h1_line-height);
	letter-spacing: var(--theme-font-h1_letter-spacing);
	text-transform: var(--theme-font-h1_text-transform);
	margin: 0;
}

/* Consent checkbox — of the footer form and of its copy on the About Us page
   (.lotto_crm_subscribe_wrap, crm/aboutus/).  MetForm hides the real input (display: none) and draws the box with a
   Font Awesome glyph; the font is not loaded here, so the box would be invisible, and a
   display: none input cannot be reached from the keyboard. The input stays, transparent and
   focusable, over a box drawn in CSS. */
:is(.lotto_crm_footer, .lotto_crm_subscribe_wrap) .mf-checkbox-option label {
	position: relative;
	cursor: pointer;
}
/* position and padding with !important: the theme's `label > input[type=checkbox]` sets
   position: static !important, and metform's .mf-input pads 12px — the input then stood in the
   line and pushed the consent text 30px right (measured against the demo, 2026-10-03). */
:is(.lotto_crm_footer, .lotto_crm_subscribe_wrap) .mf-checkbox-option input[type=checkbox] {
	display: inline-block !important;
	position: absolute !important;
	padding: 0 !important;
	left: 0;
	top: 2px;
	width: 18px;
	height: 18px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
:is(.lotto_crm_footer, .lotto_crm_subscribe_wrap) .mf-checkbox-option input[type=checkbox] + span:before,
:is(.lotto_crm_footer, .lotto_crm_subscribe_wrap) .mf-checkbox-option input[type=checkbox]:checked + span:before {
	content: '' !important;
	font-family: inherit !important;
	display: inline-block;
	box-sizing: border-box;
	width: 18px !important; /* a wider rule of the skin made it 27px: a rectangle */
	height: 18px;
	margin-right: 9px; /* 18 + 9 = the demo glyph's 27px */
	vertical-align: top; /* an empty bordered box sits on its bottom edge and made the line 3px taller */
	top: 1px;
	border: 1px solid currentColor;
	border-radius: 4px;
	background: transparent center / 12px no-repeat;
}
:is(.lotto_crm_footer, .lotto_crm_subscribe_wrap) .mf-checkbox-option input[type=checkbox]:checked + span:before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12l5 5 9-10' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-color: var(--theme-color-text_link, #5f7bff);
	border-color: var(--theme-color-text_link, #5f7bff);
}
:is(.lotto_crm_footer, .lotto_crm_subscribe_wrap) .mf-checkbox-option input[type=checkbox]:focus-visible + span:before {
	outline: 2px solid var(--theme-color-text_link, #5f7bff);
	outline-offset: 2px;
}