:root {
	--wd-text-font: "Mulish", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: rgb(40,40,40);
	--wd-text-font-size: 16px;
	--wd-title-font: "Noto Serif", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Noto Serif", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 500;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Noto Serif", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Noto Serif", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 18px;
	--wd-header-el-font: "Noto Serif", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 15px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(204,0,0);
	--wd-alternative-color: rgb(204,0,0);
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: #83b735;
	--btn-accented-bgcolor-hover: #74a32f;
	--wd-form-brd-width: 2px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: #333333;
	--wd-link-color-hover: #242424;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: #ffffff;
	background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-bottom-active: -1px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
--btn-accented-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15);
--wd-brd-radius: 0px;
}

@media (min-width: 1222px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: #0a0a0a;
}

/* ==========================================================================
   HOTELBLACKLIST.ORG — site stylesheet
   Paste into: Appearance → Customize → Additional CSS
   (or WoodMart → Theme Settings → Custom CSS → Global)

   Palette
     primary   #CC0000
     text      #0B0B0B
   Change them once in the :root block below and everything follows.

   Fonts are inherited from WoodMart / Formidable — nothing here sets a
   font-family.

   Contents
     1.  Palette
     2.  Guest page — misconduct cards
     3.  Guest page — hero button + about card
     4.  Forms — card shell and 12-column grid
     5.  Forms — header block (HTML field)
     6.  Forms — inputs
     7.  Forms — descriptions, checkbox, file, CAPTCHA
     8.  Forms — submit, errors, messages
     9.  Forms — footer line + bulk name counter
     10. Login / password pages
     11. Login notice
     12. Name search — field + filters
     13. Name search — results
     14. Name search — no match
     15. Name search — dark-section variant
     16. Register forms — city autocomplete via custom dropdown (currently unused)
     17. Register forms — Address field trimmed to City / Zip / Country (currently unused)
     18. Register forms — Google Places autocomplete dropdown
   ========================================================================== */


/* ==========================================================================
   1. Palette
   ========================================================================== */

:root {
	--hbl-primary:      #CC0000;
	--hbl-primary-dark: #A30000;
	--hbl-text:         #0B0B0B;
	--hbl-muted:        #6B6B6B;
	--hbl-subtle:       #9A9A9A;
	--hbl-border:       #E4E4E4;
	--hbl-field:        #FAFAFA;
	--hbl-card:         #FFFFFF;
	--hbl-radius:       4px;
}


/* ==========================================================================
   2. Guest page — misconduct cards
   ========================================================================== */

.elementor-widget.hbl-card {
	border-radius: 5px;
	height: 100%;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

/* Red fill drops down from the top */
.elementor-widget.hbl-card:before {
	background: var(--hbl-primary);
	border-radius: 5px;
	content: "";
	height: 0;
	left: 0;
	position: absolute;
	top: 0;
	transition: height .5s ease;
	width: 100%;
	z-index: -1;
}

.elementor-widget.hbl-card:hover:before {
	height: 100%;
}

/* Black dome rotates down from above, sitting as a cap over the red.
   Positioned to stop just above the icon so the logo stays on red and
   needs no colour filter. Raise the -80% to make the dome deeper. */
.elementor-widget.hbl-card:after {
	background: var(--hbl-text);
	border-radius: 100%;
	content: "";
	height: 86%;
	left: 0;
	margin: auto;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: -80%;
	transform: perspective(500px) rotateX(-90deg);
	transform-origin: bottom center;
	transition: transform .6s ease;
	width: 108%;
	z-index: -1;
}

.elementor-widget.hbl-card:hover:after {
	transform: perspective(500px) rotateX(0deg);
}

/* Content sits above both layers */
.elementor-widget.hbl-card .elementor-image-box-wrapper,
.elementor-widget.hbl-card .elementor-image-box-img,
.elementor-widget.hbl-card .elementor-image-box-content {
	position: relative;
	z-index: 2;
}

.elementor-widget.hbl-card .elementor-image-box-title,
.elementor-widget.hbl-card .elementor-image-box-description {
	transition: color .4s ease;
}

.elementor-widget.hbl-card:hover .elementor-image-box-title,
.elementor-widget.hbl-card:hover .elementor-image-box-description {
	color: #ffffff !important;
}

/* The BLACK LIST logo is left exactly as it is on hover - no colour filter.
   brightness(0) invert(1) flattens it to a solid white blob because it kills
   all detail before inverting. */


/* ==========================================================================
   3. Guest page — hero button + about card
   ========================================================================== */

.hbl-hero .elementor-heading-title {
	margin: 0;
}

.hbl-guest-button .elementor-button {
	position: relative;
	z-index: 1;
	overflow: hidden;
	transition: .5s;
}

.hbl-guest-button .elementor-button:before,
.hbl-guest-button .elementor-button:after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--hbl-text);
	transition: .5s;
	z-index: -1;
}

.hbl-guest-button .elementor-button:before { transform: translateY(-100%); }
.hbl-guest-button .elementor-button:after  { transform: translateY(100%); }
.hbl-guest-button .elementor-button:hover:before { transform: translateY(-49%); }
.hbl-guest-button .elementor-button:hover:after  { transform: translateY(50%); }

/* Share row under the hero. The icon colours come from the widget itself;
   this only closes the gap the editor's default paragraph margin leaves
   between the label and the icons. */
.hbl-share-label p {
	margin: 0;
}

.hbl-share .elementor-social-icon {
	transition: background-color .3s, color .3s;
}

.hbl-about-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 767px) {
	.hbl-about {
		margin-top: -40px !important;
	}

	.hbl-about-thumb img {
		border-radius: 0 0 5px 5px !important;
	}
}


/* ==========================================================================
   4. Forms — card shell and 12-column grid

   Scope covers the three Formidable forms (form.hbl-dark) and the login /
   password forms from the User Registration add-on, which have no class of
   their own but sit on a page the plugin tags with body.hbl-auth-page.
   ========================================================================== */

:is(form.hbl-dark, .hbl-auth-page .frm_forms form, form[action*="wp-login.php"]) {
	background: var(--hbl-card);
	border: 1px solid var(--hbl-border);
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(11, 11, 11, .03), 0 12px 32px rgba(11, 11, 11, .06);
	box-sizing: border-box;
	margin: 0 auto !important;
	max-width: 860px;
	padding: 56px 56px 60px !important;
}

/* Login and password forms are short — a narrower card reads better */
.hbl-auth-page .frm_forms form,
form[action*="wp-login.php"] {
	max-width: 560px;
}

/* Wrapper the add-on prints around the reset form */
[id^="frm-reset-password"],
[id^="frm-login"] {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* The reset form has no .frm_fields_container, so its fields need spacing */
form[action*="wp-login.php"] .frm_form_fields > .frm_form_field {
	margin: 0 0 22px !important;
}

/* "Please enter your username or email address..." intro */
form[action*="wp-login.php"] .frm_form_fields > .frm_description,
.hbl-auth-page .frm_form_fields > .frm_description {
	color: var(--hbl-muted) !important;
	font-size: 15px !important;
	font-style: normal !important;
	line-height: 1.65 !important;
	margin: 0 0 28px !important;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--hbl-border);
}

form[action*="wp-login.php"] .frm_form_fields > .frm_description p,
.hbl-auth-page .frm_form_fields > .frm_description p {
	margin: 0 !important;
}

/* The theme's own panel around the form, if any */
.elementor-widget-formidable .frm_forms,
.hbl-auth-page .frm_forms {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_form_fields > fieldset {
	background: transparent !important;
	border: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) legend,
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_screen_reader {
	display: none !important;
}

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_fields_container {
	column-gap: 20px;
	display: grid !important;
	grid-template-columns: repeat(12, 1fr);
	margin: 0 !important;
	row-gap: 0;
	width: 100%;
}

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_form_field,
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_submit {
	clear: none !important;
	float: none !important;
	grid-column: span 12;
	margin: 0 0 22px !important;
	padding: 0 !important;
	width: auto !important;
}

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_form_field.frm6,
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_form_field.frm_half { grid-column: span 6; }
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_form_field.frm4      { grid-column: span 4; }

/* Formidable's spam honeypot must never be visible or occupy a grid cell */
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_verify {
	display: none !important;
}

@media (max-width: 767px) {
	:is(form.hbl-dark, .hbl-auth-page .frm_forms form, form[action*="wp-login.php"]) {
		padding: 36px 24px 40px !important;
	}

	:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_form_field.frm6,
	:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_form_field.frm_half,
	:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_form_field.frm4 {
		grid-column: span 12;
	}
}


/* ==========================================================================
   5. Forms — header block (HTML field)
   ========================================================================== */

.hbl-form-header {
	border-bottom: 1px solid var(--hbl-border);
	margin: 0 0 38px;
	padding-bottom: 30px;
	text-align: center;
}

.hbl-form-header h1 {
	color: var(--hbl-text);
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -.5px;
	line-height: 1.15;
	margin: 0;
	padding: 0;
	text-transform: none;
}

.hbl-form-header .hbl-rule {
	background: var(--hbl-primary);
	display: block;
	height: 3px;
	margin: 22px auto;
	width: 54px;
}

.hbl-form-header h2 {
	color: var(--hbl-muted);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.55;
	margin: 0 auto;
	max-width: 560px;
	padding: 0;
	text-transform: none;
}

@media (max-width: 767px) {
	.hbl-form-header { margin-bottom: 28px; padding-bottom: 22px; }
	.hbl-form-header h1 { font-size: 27px; }
	.hbl-form-header h2 { font-size: 16px; }
	.hbl-form-header .hbl-rule { margin: 18px auto; }
}


/* ==========================================================================
   6. Forms — inputs
   ========================================================================== */

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) input[type="text"],
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) input[type="email"],
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) input[type="url"],
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) input[type="tel"],
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) input[type="number"],
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) input[type="password"],
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) select,
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) textarea {
	background: var(--hbl-field) !important;
	border: 1px solid var(--hbl-border) !important;
	border-radius: var(--hbl-radius) !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	color: var(--hbl-text) !important;
	display: block !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	height: auto !important;
	line-height: 1.5 !important;
	margin: 0 !important;
	max-width: 100% !important;
	min-height: 0 !important;
	padding: 16px 18px !important;
	text-transform: none !important;
	transition: background-color .2s, border-color .2s, box-shadow .2s;
	width: 100% !important;
}

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) input:hover,
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) select:hover,
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) textarea:hover {
	border-color: #cfcfcf !important;
}

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) input:focus,
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) select:focus,
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) textarea:focus {
	background: var(--hbl-card) !important;
	border-color: var(--hbl-primary) !important;
	box-shadow: 0 0 0 3px rgba(204, 0, 0, .09) !important;
	outline: none !important;
}

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) ::placeholder {
	color: var(--hbl-subtle) !important;
	opacity: 1 !important;
}

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) textarea {
	line-height: 1.7 !important;
	min-height: 170px !important;
	resize: vertical;
}

/* Custom select arrow — the native one is inconsistent across browsers */
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) select {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--hbl-subtle) 50%),
		linear-gradient(135deg, var(--hbl-subtle) 50%, transparent 50%) !important;
	background-position: calc(100% - 22px) calc(50% + 1px), calc(100% - 16px) calc(50% + 1px) !important;
	background-repeat: no-repeat !important;
	background-size: 6px 6px, 6px 6px !important;
	cursor: pointer;
	padding-right: 46px !important;
}

/* Labels are set to "none" on these forms, so placeholders carry the field
   name. If you switch a label back on, this styles it. */
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_primary_label {
	color: var(--hbl-text) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: .2px;
	line-height: 1.4 !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	text-transform: none !important;
}

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_none_container .frm_primary_label {
	display: none !important;
}

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_required {
	color: var(--hbl-primary) !important;
	font-weight: 700;
}


/* ==========================================================================
   7. Forms — descriptions, checkbox, file, CAPTCHA
   ========================================================================== */

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_description {
	color: var(--hbl-muted) !important;
	font-size: 13px !important;
	font-style: normal !important;
	line-height: 1.55 !important;
	margin: 8px 0 0 !important;
}

/* Declaration / remember-me checkboxes */
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_opt_container,
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_checkbox {
	margin: 0 !important;
	padding: 0 !important;
}

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_checkbox label {
	align-items: flex-start;
	color: var(--hbl-muted) !important;
	cursor: pointer;
	display: flex !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	gap: 11px;
	line-height: 1.6 !important;
	margin: 0 !important;
	text-transform: none !important;
}

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) input[type="checkbox"] {
	accent-color: var(--hbl-primary);
	cursor: pointer;
	flex: 0 0 auto;
	height: 17px !important;
	margin: 3px 0 0 !important;
	opacity: 1 !important;
	padding: 0 !important;
	position: static !important;
	width: 17px !important;
}

.hbl-declaration {
	background: var(--hbl-field);
	border: 1px solid var(--hbl-border);
	border-radius: var(--hbl-radius);
	padding: 16px 18px !important;
}

.hbl-declaration .frm_primary_label {
	display: none !important;
}

/* File upload */
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_dropzone,
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_dropzone.dz-clickable {
	background: var(--hbl-field) !important;
	border: 1px dashed #cfcfcf !important;
	border-radius: var(--hbl-radius) !important;
	color: var(--hbl-muted) !important;
	min-height: 110px !important;
	padding: 26px !important;
	transition: border-color .2s, background-color .2s;
}

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_dropzone:hover {
	background: #f5f5f5 !important;
	border-color: var(--hbl-primary) !important;
}

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_dropzone .dz-message,
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_dropzone .dz-button,
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_upload_text {
	background: transparent !important;
	color: var(--hbl-muted) !important;
}

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) input[type="file"] {
	background: var(--hbl-field) !important;
	border: 1px dashed #cfcfcf !important;
	border-radius: var(--hbl-radius) !important;
	color: var(--hbl-muted) !important;
	padding: 16px 18px !important;
}

/* CAPTCHA */
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .g-recaptcha,
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .h-captcha,
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .cf-turnstile {
	display: flex !important;
	justify-content: center;
	margin: 4px 0;
}

@media (max-width: 400px) {
	:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .g-recaptcha,
	:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .h-captcha {
		transform: scale(.85);
		transform-origin: center;
	}
}


/* ==========================================================================
   8. Forms — submit, errors, messages
   ========================================================================== */

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_submit {
	margin-top: 8px !important;
	text-align: center !important;
}

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_button_submit,
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) input[type="submit"],
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) button[type="submit"] {
	background: var(--hbl-primary) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: var(--hbl-radius) !important;
	box-shadow: 0 4px 14px rgba(204, 0, 0, .22) !important;
	color: #ffffff !important;
	cursor: pointer;
	font-size: 14px !important;
	font-weight: 700 !important;
	height: auto !important;
	letter-spacing: 1.6px !important;
	line-height: 1.2 !important;
	margin: 0 !important;
	min-width: 220px;
	padding: 18px 44px !important;
	text-transform: uppercase !important;
	transition: background-color .25s, box-shadow .25s, transform .2s;
	width: auto !important;
}

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_button_submit:hover,
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) input[type="submit"]:hover,
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) button[type="submit"]:hover {
	background: var(--hbl-text) !important;
	box-shadow: 0 6px 20px rgba(11, 11, 11, .24) !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_button_submit:active,
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) input[type="submit"]:active {
	transform: translateY(0);
}

/* Inline field errors */
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_error {
	color: var(--hbl-primary) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	margin: 7px 0 0 !important;
}

:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_blank_field input,
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_blank_field select,
:is(form.hbl-dark, .hbl-auth-page form, form[action*="wp-login.php"]) .frm_blank_field textarea {
	background: #fff7f7 !important;
	border-color: var(--hbl-primary) !important;
}

/* Error summary at the top of the form */
.frm_error_style {
	background: #fdf3f3 !important;
	border: 1px solid #f2c9c9 !important;
	border-left: 3px solid var(--hbl-primary) !important;
	border-radius: var(--hbl-radius) !important;
	color: var(--hbl-text) !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	margin: 0 auto 26px !important;
	max-width: 860px;
	padding: 18px 22px !important;
}

/* Success message shown in place of the form after submitting */
.elementor-widget-formidable .frm_message {
	background: var(--hbl-card) !important;
	border: 1px solid var(--hbl-border) !important;
	border-left: 3px solid #0a7d28 !important;
	border-radius: var(--hbl-radius) !important;
	box-shadow: 0 12px 32px rgba(11, 11, 11, .06) !important;
	color: var(--hbl-text) !important;
	font-size: 17px !important;
	line-height: 1.7 !important;
	margin: 0 auto !important;
	max-width: 860px;
	padding: 40px 44px !important;
}

/* ---- Standalone notification ----------------------------------------------
   "Your account has been activated", password-reset confirmations and the
   like are printed by Formidable at the very top of <article>, outside the
   Elementor content. Without spacing the next stretched section rides over
   them, so this gives the block its own room and turns it into a banner.
   -------------------------------------------------------------------------- */

.entry-content > .with_frm_style,
.site-content > .with_frm_style,
article > .with_frm_style,
main .with_frm_style:not(.frm_forms) {
	margin: 26px auto 34px !important;
	max-width: 860px;
	position: relative;
	z-index: 5;
}

.entry-content > .with_frm_style .frm_message,
.site-content > .with_frm_style .frm_message,
article > .with_frm_style .frm_message,
main .with_frm_style:not(.frm_forms) .frm_message {
	align-items: flex-start;
	background: #f4faf5 !important;
	border: 1px solid #cde8d3 !important;
	border-left: 3px solid #0a7d28 !important;
	border-radius: var(--hbl-radius) !important;
	box-shadow: 0 6px 18px rgba(11, 11, 11, .05) !important;
	color: var(--hbl-text) !important;
	display: flex;
	font-size: 15px !important;
	font-weight: 500 !important;
	gap: 13px;
	line-height: 1.6 !important;
	margin: 0 !important;
	padding: 16px 22px !important;
	text-align: left !important;
}

.entry-content > .with_frm_style .frm_message:before,
.site-content > .with_frm_style .frm_message:before,
article > .with_frm_style .frm_message:before,
main .with_frm_style:not(.frm_forms) .frm_message:before {
	background: #0a7d28;
	border-radius: 50%;
	color: #ffffff;
	content: "\2713";
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	height: 24px;
	line-height: 24px;
	text-align: center;
	width: 24px;
}

@media (max-width: 900px) {
	.entry-content > .with_frm_style,
	.site-content > .with_frm_style,
	article > .with_frm_style,
	main .with_frm_style:not(.frm_forms) {
		margin-left: 20px !important;
		margin-right: 20px !important;
	}
}


/* ==========================================================================
   9. Forms — footer line + bulk name counter
   ========================================================================== */

.hbl-form-foot {
	border-top: 1px solid var(--hbl-border);
	color: var(--hbl-muted);
	font-size: 15px;
	margin: 30px 0 0;
	padding-top: 24px;
	text-align: center;
}

.hbl-form-foot a {
	color: var(--hbl-primary);
	font-weight: 600;
	text-decoration: none;
}

.hbl-form-foot a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hbl-name-counter {
	color: var(--hbl-muted);
	display: block;
	font-size: 13px;
	line-height: 1.5;
	padding-top: 9px;
}

.hbl-name-counter strong {
	color: var(--hbl-primary);
	font-weight: 700;
}


/* ==========================================================================
   10. Login / password pages
   Extras that only apply to the add-on's login and reset forms.
   ========================================================================== */

.hbl-auth-page .login-remember {
	align-items: center;
	display: flex;
}

.hbl-auth-page .login_lost_pw {
	align-items: center;
	display: flex;
	justify-content: flex-end;
}

.hbl-auth-page .login_lost_pw a,
.hbl-auth-page a.forgot-password {
	color: var(--hbl-muted);
	font-size: 14px;
	text-decoration: none;
}

.hbl-auth-page .login_lost_pw a:hover,
.hbl-auth-page a.forgot-password:hover {
	color: var(--hbl-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Intro copy above the reset form */
.hbl-auth-page .frm_forms form > p,
.hbl-auth-page .frm_form_fields > p {
	color: var(--hbl-muted);
	font-size: 15px;
	line-height: 1.65;
	margin: 0 0 26px;
}

.hbl-auth-page .frm_submit input[type="submit"] {
	width: 100% !important;
}

@media (max-width: 600px) {
	.hbl-auth-page .login_lost_pw {
		justify-content: flex-start;
	}
}


/* ==========================================================================
   11. Login notice  (from [hbl_login_notice])
   ========================================================================== */

.hbl-login-notice {
	background: var(--hbl-field);
	border: 1px solid var(--hbl-border);
	border-left: 3px solid var(--hbl-primary);
	border-radius: var(--hbl-radius);
	margin: 0 auto 26px;
	max-width: 560px;
	padding: 20px 24px;
}

.hbl-login-notice p {
	color: var(--hbl-muted);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

.hbl-login-notice p + p {
	margin-top: 9px;
}

.hbl-login-notice a {
	color: var(--hbl-primary);
	font-weight: 600;
	text-decoration: none;
}

.hbl-login-notice a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* ==========================================================================
   12. Name search — field + filters
   [hbl_search] is plugin markup, not a Formidable form.
   ========================================================================== */

.hbl-search {
	margin: 0 auto;
	max-width: 860px;
}

/* A single 2-column grid, not a flex row with a second block stacked under
   it. Source order IS visual order (grid auto-placement fills left-to-right,
   top-to-bottom), so hbl_search_shortcode() only has to decide what to print
   and in what order, never how to lay it out:

     name field | country          (row 1)
     postcode   | search button    (row 2)

   With no countries on the register yet, country/postcode simply aren't in
   the markup, so this is just [name field | button] on one row. Because it's
   a grid, every cell in a row stretches to that row's tallest cell by
   default - the field, the select and the button all end up the same
   height with no extra CSS for it. */
.hbl-search-form {
	align-items: stretch;
	background: var(--hbl-card);
	border: 1px solid var(--hbl-border);
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(11, 11, 11, .03), 0 12px 32px rgba(11, 11, 11, .06);
	box-sizing: border-box;
	display: grid;
	gap: 14px;
	grid-template-columns: 1.6fr 1fr;
	padding: 34px 36px;
}

.hbl-search-field {
	align-items: center;
	display: flex;
	min-width: 0;
	position: relative;
}

.hbl-search-icon {
	color: var(--hbl-subtle);
	left: 18px;
	pointer-events: none;
	position: absolute;
	transition: color .2s;
}

.hbl-search-field:focus-within .hbl-search-icon {
	color: var(--hbl-primary);
}

/* One shared look for the name input, the postcode input and the country
   select, so all four grid cells read as one field system rather than a
   primary field plus two smaller, different-looking controls.

   !important on the identity properties (fill, border, text colour, radius,
   font) because a <select> is exactly the kind of element WoodMart ships its
   own default styling for - a plain single-class rule can lose that fight
   silently depending on how specific the theme's rule is, which is what
   left the country/postcode fields looking like bare browser controls next
   to the name field. Forcing it here means it can never happen again
   regardless of what the theme does. Same reasoning as the form-shell
   overrides in section 4 above. */
.hbl-search-field input[type="text"],
.hbl-search-postcode,
.hbl-search-country {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: var(--hbl-field) !important;
	background-repeat: no-repeat;
	border: 1px solid var(--hbl-border) !important;
	border-radius: var(--hbl-radius) !important;
	box-shadow: none !important;
	box-sizing: border-box;
	color: var(--hbl-text) !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	height: auto;
	line-height: 1.5;
	margin: 0;
	min-width: 0;
	padding: 16px 18px;
	transition: background-color .2s, border-color .2s, box-shadow .2s;
	width: 100%;
}

/* Only the name field needs room for the magnifying-glass icon - postcode
   is a plain text input too, but it must NOT pick up this indent. */
.hbl-search-field input[type="text"] {
	padding-left: 48px;
}

.hbl-search-country {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%239A9A9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-position: right 16px center !important;
	padding-right: 44px;
}

.hbl-search-field input[type="text"]::placeholder,
.hbl-search-postcode::placeholder {
	color: var(--hbl-subtle) !important;
	opacity: 1 !important;
}

.hbl-search-field input[type="text"]:hover,
.hbl-search-postcode:hover,
.hbl-search-country:hover {
	border-color: #cfcfcf !important;
}

.hbl-search-field input[type="text"]:focus,
.hbl-search-postcode:focus,
.hbl-search-country:focus {
	background-color: var(--hbl-card) !important;
	border-color: var(--hbl-primary) !important;
	box-shadow: 0 0 0 3px rgba(204, 0, 0, .09) !important;
	outline: none;
}

/* Matches the form fields' height by grid stretch, not by copying their
   padding - see the block comment on .hbl-search-form above. */
.hbl-search-form button {
	background: var(--hbl-primary);
	background-image: none;
	border: 0;
	border-radius: var(--hbl-radius);
	box-shadow: 0 4px 14px rgba(204, 0, 0, .22);
	color: #ffffff;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	height: auto;
	letter-spacing: 1.6px;
	line-height: 1.2;
	margin: 0;
	padding: 18px 40px;
	text-transform: uppercase;
	transition: background-color .25s, box-shadow .25s, transform .2s;
	white-space: nowrap;
	width: 100%;
}

.hbl-search-form button:hover {
	background: var(--hbl-text);
	box-shadow: 0 6px 20px rgba(11, 11, 11, .24);
	color: #ffffff;
	transform: translateY(-1px);
}

.hbl-search-form button:active {
	transform: translateY(0);
}

@media (max-width: 600px) {
	.hbl-search-form {
		grid-template-columns: 1fr;
		padding: 24px 20px;
	}
}


/* ==========================================================================
   13. Name search — results
   ========================================================================== */

.hbl-search-note {
	background: var(--hbl-field);
	border: 1px solid var(--hbl-border);
	border-left: 3px solid var(--hbl-primary);
	border-radius: var(--hbl-radius);
	color: var(--hbl-muted);
	font-size: 15px;
	line-height: 1.65;
	margin: 32px 0 20px;
	padding: 16px 22px;
}

.hbl-search-note strong {
	color: var(--hbl-text);
}

.hbl-search-note.hbl-note-warn {
	border-left-color: #e0a800;
}

.hbl-count {
	background: var(--hbl-primary);
	border-radius: 20px;
	color: #ffffff;
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	margin-right: 8px;
	padding: 5px 11px;
}

.hbl-search-results {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hbl-search-results li.hbl-result {
	border: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hbl-result-link {
	align-items: center;
	background: var(--hbl-card);
	border: 1px solid var(--hbl-border);
	border-left: 3px solid var(--hbl-border);
	border-radius: var(--hbl-radius);
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
	padding: 22px 26px;
	text-decoration: none;
	transition: border-color .25s, box-shadow .25s, transform .25s;
}

.hbl-result-link:hover {
	border-color: #d8d8d8;
	border-left-color: var(--hbl-primary);
	box-shadow: 0 10px 26px rgba(11, 11, 11, .08);
	transform: translateY(-2px);
}

.hbl-result-main {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.hbl-result-name {
	color: var(--hbl-text);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	transition: color .25s;
}

.hbl-result-link:hover .hbl-result-name {
	color: var(--hbl-primary);
}

.hbl-result-meta {
	color: var(--hbl-muted);
	font-size: 14px;
	line-height: 1.4;
}

.hbl-result-side {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.hbl-result-cta {
	color: var(--hbl-primary);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.hbl-result-cta span {
	display: inline-block;
	margin-left: 5px;
	transition: transform .25s;
}

.hbl-result-link:hover .hbl-result-cta span {
	transform: translateX(4px);
}

@media (max-width: 600px) {
	.hbl-result-link {
		align-items: flex-start;
		flex-direction: column;
		gap: 14px;
	}

	.hbl-result-side {
		justify-content: space-between;
		width: 100%;
	}
}


/* ==========================================================================
   14. Name search — no match
   ========================================================================== */

.hbl-search-empty {
	background: #f4faf5;
	border: 1px solid #cde8d3;
	border-radius: var(--hbl-radius);
	margin-top: 32px;
	padding: 44px 30px;
	text-align: center;
}

.hbl-empty-icon {
	background: #0a7d28;
	border-radius: 50%;
	color: #ffffff;
	display: inline-block;
	font-size: 26px;
	height: 56px;
	line-height: 56px;
	margin-bottom: 18px;
	width: 56px;
}

.hbl-search-empty h3 {
	color: var(--hbl-text);
	font-size: 23px;
	font-weight: 700;
	margin: 0 0 10px;
	padding: 0;
	text-transform: none;
}

.hbl-search-empty p {
	color: var(--hbl-muted);
	font-size: 16px;
	line-height: 1.7;
	margin: 0 auto;
	max-width: 520px;
}

.hbl-search-empty strong {
	color: var(--hbl-text);
}


/* ==========================================================================
   15. Name search — dark-section variant
   Add the class  hbl-search-dark  to the Elementor container holding
   [hbl_search] when that section has a dark background.
   ========================================================================== */

.hbl-search-dark .hbl-search-form {
	background: #151515;
	border-color: #2e2e2e;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
}

.hbl-search-dark .hbl-search-field input[type="text"],
.hbl-search-dark .hbl-search-postcode,
.hbl-search-dark .hbl-search-country {
	background-color: #1e1e1e !important;
	border-color: #3a3a3a !important;
	color: #ffffff !important;
}

.hbl-search-dark .hbl-search-country {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}

.hbl-search-dark .hbl-search-field input[type="text"]:focus,
.hbl-search-dark .hbl-search-postcode:focus,
.hbl-search-dark .hbl-search-country:focus {
	background-color: #101010 !important;
	border-color: var(--hbl-primary) !important;
}

.hbl-search-dark .hbl-search-field input[type="text"]::placeholder,
.hbl-search-dark .hbl-search-postcode::placeholder {
	color: #b3b3b3 !important;
}

.hbl-search-dark .hbl-search-icon {
	color: #8a8a8a;
}

.hbl-search-dark .hbl-search-note {
	background: #151515;
	border-color: #2e2e2e;
	color: #cfcfcf;
}

.hbl-search-dark .hbl-search-note strong { color: #ffffff; }

.hbl-search-dark .hbl-result-link {
	background: #151515;
	border-color: #2e2e2e;
	border-left-color: #2e2e2e;
}

.hbl-search-dark .hbl-result-link:hover {
	border-color: #3a3a3a;
	border-left-color: var(--hbl-primary);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}

.hbl-search-dark .hbl-result-name { color: #ffffff; }
.hbl-search-dark .hbl-result-link:hover .hbl-result-name { color: #ff4d4d; }
.hbl-search-dark .hbl-result-meta { color: #9a9a9a; }

.hbl-search-dark .hbl-search-empty {
	background: #101a12;
	border-color: #234a2b;
}

.hbl-search-dark .hbl-search-empty h3 { color: #ffffff; }
.hbl-search-dark .hbl-search-empty p { color: #b8b8b8; }
.hbl-search-dark .hbl-search-empty strong { color: #ffffff; }


/* ==========================================================================
   16. Register forms — city autocomplete (currently unused)

   Dropdown injected by assets/hbl-city-autocomplete.js next to a
   .hbl-city-auto field. Both registration forms have since moved to
   Formidable's Geolocation add-on on a native Address field instead (see
   hbl_trim_address_sub_fields() in hbl-core.php), which has its own
   Google-powered dropdown - nothing on the live forms carries the
   .hbl-city-auto/.hbl-postcode-auto/.hbl-country-auto classes this section
   targets any more, so it is dead weight, not wired to anything. Left in
   rather than deleted in case a field ever needs that classic-text-field
   approach again; safe to remove along with assets/hbl-city-autocomplete.js
   if you're sure that won't happen.
   ========================================================================== */

/* Formidable's own field wrapper (.frm_form_field) is the positioning
   context; the script only sets position:relative on it if nothing already
   did. This selector is a no-op safeguard for the same purpose. */
.frm_form_field:has(> .hbl-city-suggest) {
	position: relative;
}

.hbl-city-suggest {
	background: var(--hbl-card);
	border: 1px solid var(--hbl-border);
	border-radius: var(--hbl-radius);
	box-shadow: 0 10px 28px rgba(11, 11, 11, .14);
	box-sizing: border-box;
	left: 0;
	list-style: none;
	margin: 6px 0 0;
	max-height: 260px;
	overflow-y: auto;
	padding: 6px;
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 40;
}

.hbl-city-suggest-item {
	border-radius: 4px;
	color: var(--hbl-text);
	cursor: pointer;
	font-size: 14px;
	line-height: 1.4;
	padding: 10px 12px;
}

.hbl-city-suggest-item:hover,
.hbl-city-suggest-item.is-active {
	background: var(--hbl-field);
	color: var(--hbl-primary);
}

.hbl-city-suggest-credit {
	border-top: 1px solid var(--hbl-border);
	color: var(--hbl-subtle);
	cursor: default;
	font-size: 11px;
	margin-top: 4px;
	padding: 8px 12px 2px;
}

.hbl-auth-page .hbl-city-suggest,
form.hbl-dark .hbl-city-suggest {
	background: #151515;
	border-color: #2e2e2e;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}

form.hbl-dark .hbl-city-suggest-item {
	color: #ececec;
}

form.hbl-dark .hbl-city-suggest-item:hover,
form.hbl-dark .hbl-city-suggest-item.is-active {
	background: #1b1b1b;
	color: #ff4d4d;
}

form.hbl-dark .hbl-city-suggest-credit {
	border-top-color: #2e2e2e;
	color: #8a8a8a;
}


/* ==========================================================================
   17. Register forms — Address field trimmed to City / Zip / Country
   (currently unused)

   Was: hbl_trim_address_sub_fields() (hbl-core.php) repurposing the
   Formidable Address field's Line 1 as the visible "City" box and hiding
   the field's own city sub-field with this class. The register forms have
   since moved off the Address field entirely - City/Postcode/Country are
   plain fields again, autocomplete comes straight from the Google Maps
   API via assets/hbl-city-autocomplete.js (see section 18). Left in rather
   than deleted in case the Address-field approach is ever needed again -
   this class does nothing unless something still has it.
   ========================================================================== */

.hbl-address-hidden {
	display: none !important;
}


/* ==========================================================================
   18. Register forms — Google Places autocomplete dropdown

   Google's Places Autocomplete widget (assets/hbl-city-autocomplete.js)
   injects its own suggestion list as a `.pac-container` appended straight
   to <body> - it is not part of this site's markup, so it can't be reached
   with normal scoped selectors, and Google only exposes a handful of
   classes to style. Loads only on the register pages, only once a Google
   Maps API key is set (hbl_assets() in hbl-core.php).
   ========================================================================== */

.pac-container {
	border: 1px solid var(--hbl-border);
	border-radius: var(--hbl-radius);
	box-shadow: 0 10px 28px rgba(11, 11, 11, .14);
	font-family: inherit;
	margin-top: 6px;
	overflow: hidden;
}

.pac-item {
	border-top: 1px solid var(--hbl-border);
	cursor: pointer;
	font-size: 14px;
	padding: 10px 12px;
}

.pac-item:first-child {
	border-top: 0;
}

.pac-item:hover,
.pac-item-selected {
	background: var(--hbl-field);
}

.pac-icon {
	display: none;
}

.pac-item-query {
	color: var(--hbl-text);
	font-size: 14px;
}

.pac-matched {
	color: var(--hbl-primary);
	font-weight: 600;
}

/* No dark-mode variant: Google always appends .pac-container as a direct
   child of <body>, not near the field that triggered it, so there is no
   reliable CSS relationship to the form to scope a dark variant off of -
   and the register forms render on a light card in the first place, so the
   light styling above is the one that actually applies here. */