: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
     13. Name search — results
     14. Name search — no match
     15. Name search — dark-section variant
   ========================================================================== */


/* ==========================================================================
   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
   [hbl_search] is plugin markup, not a Formidable form.
   ========================================================================== */

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

/* Same card shell as the Formidable forms, shallower because it is one row */
.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: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding: 34px 36px;
}

.hbl-search-field {
	align-items: center;
	display: flex;
	flex: 1 1 320px;
	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);
}

/* Matches the form fields exactly: same fill, border, padding and type size */
.hbl-search-form input[type="text"] {
	background: var(--hbl-field);
	border: 1px solid var(--hbl-border);
	border-radius: var(--hbl-radius);
	box-shadow: none;
	box-sizing: border-box;
	color: var(--hbl-text);
	font-size: 16px;
	font-weight: 400;
	height: auto;
	line-height: 1.5;
	margin: 0;
	padding: 16px 18px 16px 48px;
	transition: background-color .2s, border-color .2s, box-shadow .2s;
	width: 100%;
}

.hbl-search-form input[type="text"]::placeholder {
	color: var(--hbl-subtle);
	opacity: 1;
}

.hbl-search-form input[type="text"]:hover {
	border-color: #cfcfcf;
}

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

/* Matches the form submit button exactly */
.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: auto;
}

.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 {
		padding: 24px 20px;
	}

	.hbl-search-field,
	.hbl-search-form button {
		flex: 1 1 100%;
		width: 100%;
	}
}


/* ==========================================================================
   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-form input[type="text"] {
	background: #1e1e1e;
	border-color: #3a3a3a;
	color: #ffffff;
}

.hbl-search-dark .hbl-search-form input[type="text"]:focus {
	background: #101010;
	border-color: var(--hbl-primary);
}

.hbl-search-dark .hbl-search-form input[type="text"]::placeholder {
	color: #b3b3b3;
}

.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; }