/* CRM FAQs page — own rules (crm/faqs/faqs.php). */

/* The question is a <button> inside the demo's h6 (keyboard: Tab + Enter/Space); it keeps the
   heading's look. */
.lotto_crm_accordion .lotto_crm_accordion_button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 1em;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: left;
	cursor: pointer;
}
.lotto_crm_accordion .lotto_crm_accordion_button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* The page's own text, between the questions and the counters, at reading width. */
.lotto_crm_faqs_content {
	max-width: var(--theme-var-page, 1290px);
	margin: 0 auto;
	padding: 0 var(--theme-var-grid_gap, 30px) 4em;
	box-sizing: border-box;
}

/* Counter numbers are paragraphs set like the demo's h1 (the page has one H1 — the title). */
.lotto_crm_faqs_page .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;
}

/* The contact form (crm/contact/block.php) — on the FAQs and Contact Us pages.
   Honeypot and notices, as in the footer form. */
:is(.lotto_crm_faqs_page, .lotto_crm_contactus_page) .lotto_crm_footer_hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
:is(.lotto_crm_faqs_page, .lotto_crm_contactus_page) .lotto_crm_footer_notice { margin-bottom: 1em; padding: 0.75em 1em; border-radius: 6px; }
:is(.lotto_crm_faqs_page, .lotto_crm_contactus_page) .lotto_crm_footer_notice_success { background: rgba(30, 215, 96, 0.15); }
:is(.lotto_crm_faqs_page, .lotto_crm_contactus_page) .lotto_crm_footer_notice_error { background: rgba(240, 49, 77, 0.15); }

/* Consent checkbox — the same fix as the footer form (Font Awesome glyph → CSS box). */
:is(.lotto_crm_faqs_page, .lotto_crm_contactus_page) .mf-checkbox-option label { position: relative; cursor: pointer; }
/* position and padding with !important — see the same rule in crm/footer/css/footer-own.css. */
:is(.lotto_crm_faqs_page, .lotto_crm_contactus_page) .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_faqs_page, .lotto_crm_contactus_page) .mf-checkbox-option input[type=checkbox] + span:before,
:is(.lotto_crm_faqs_page, .lotto_crm_contactus_page) .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; height: 18px; margin-right: 9px; vertical-align: top; top: 1px; border: 1px solid currentColor; border-radius: 4px; background: transparent center / 12px no-repeat; }
:is(.lotto_crm_faqs_page, .lotto_crm_contactus_page) .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_faqs_page, .lotto_crm_contactus_page) .mf-checkbox-option input[type=checkbox]:focus-visible + span:before { outline: 2px solid var(--theme-color-text_link, #5f7bff); outline-offset: 2px; }