/*
 * Young & Blissful forms module (inc/ynb-forms.php).
 *  1. Brand fields: selects (native + select2), text fields in the listing / profile forms, checkboxes, radios.
 *  2. Uploads: logo / file uploader (plupload), image gallery (ez-media-uploader), plain file inputs.
 *  3. Validation messages (add / edit listing).
 *  4. Compare: card + single-page buttons, tray, compare page.
 * Scoped to front-end form containers only: never the claim popup (.dcl-claim-modal), pricing cards or wp-admin.
 */

:root {
	--ynbf-green: var(--ynb-green, #1e6b3f);
	--ynbf-green-dark: #155030;
	--ynbf-sage: #e8f0e7;
	--ynbf-sage-2: #d3e3d1;
	--ynbf-cream: #fbf8f2;
	--ynbf-line: #d9d2c1;
	--ynbf-line-strong: #8f9a90;
	--ynbf-ink: #1f2a24;
	--ynbf-muted: #4f5b54;
	--ynbf-gold: #a8771f;
	--ynbf-gold-bg: #fbf3e0;
	--ynbf-error: #9b2c2c;
	--ynbf-error-bg: #fbefed;
	--ynbf-ring: 0 0 0 3px rgba(30, 107, 63, .28);
	--ynbf-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e6b3f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* =====================================================================
 * 1. Fields
 * ================================================================== */

/* Native selects */
:is(.directorist-add-listing-form, .directorist-user-profile-box, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .wpcf7, .directorist-dashboard-preferences, .ynb-forms) select:not([multiple]):not([size]):not(.directorist-search-form-top *) {
	-webkit-appearance: none;
	appearance: none;
	min-height: 48px;
	padding: 10px 44px 10px 14px !important;
	font-size: 16px !important;
	line-height: 1.4;
	color: var(--ynbf-ink) !important;
	background: #fff var(--ynbf-chevron) no-repeat right 14px center / 18px 18px !important;
	border: 1px solid var(--ynbf-line) !important;
	border-radius: 8px !important;
	box-shadow: none;
	cursor: pointer;
	max-width: 100%;
}
:is(.directorist-add-listing-form, .directorist-user-profile-box, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .wpcf7, .directorist-dashboard-preferences, .ynb-forms) select:focus {
	outline: none !important;
	border-color: var(--ynbf-green) !important;
	box-shadow: var(--ynbf-ring) !important;
}
:is(.directorist-add-listing-form, .directorist-user-profile-box, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .wpcf7, .directorist-dashboard-preferences) select option:checked {
	background: var(--ynbf-sage);
	color: var(--ynbf-ink);
}

/* Text fields in the listing form and the profile form (Directorist draws them as underlines). */
:is(.directorist-add-listing-form, .directorist-user-profile-box) :is(input[type=text], input[type=email], input[type=url], input[type=tel], input[type=number], input[type=password], input[type=date], input[type=time]).directorist-form-element,
:is(.directorist-add-listing-form, .directorist-user-profile-box) textarea.directorist-form-element {
	min-height: 48px;
	padding: 10px 14px !important;
	font-size: 16px !important;
	color: var(--ynbf-ink) !important;
	background: #fff !important;
	border: 1px solid var(--ynbf-line) !important;
	border-radius: 8px !important;
	box-shadow: none;
}
:is(.directorist-add-listing-form, .directorist-user-profile-box) textarea.directorist-form-element { min-height: 120px; line-height: 1.5; }
html body #directorist-add-listing-form .directorist-form-group :is(input, textarea).directorist-form-element:not([type=checkbox]):not([type=radio]):not([type=file]),
html body .directorist-user-profile-box .directorist-form-group :is(input, textarea).directorist-form-element:not([type=checkbox]):not([type=radio]):not([type=file]) {
	padding-left: 14px !important;
	padding-right: 14px !important;
}
:is(.directorist-add-listing-form, .directorist-user-profile-box) .directorist-form-element:focus {
	outline: none !important;
	border-color: var(--ynbf-green) !important;
	box-shadow: var(--ynbf-ring) !important;
}
:is(.directorist-add-listing-form, .directorist-user-profile-box) .directorist-form-element::placeholder { color: #6f7a73; opacity: 1; }
.directorist-add-listing-form .directorist-form-label,
.directorist-add-listing-form .directorist-form-group > label,
.directorist-user-profile-box .directorist-form-group > label {
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--ynbf-ink) !important;
	margin-bottom: 8px;
}
.directorist-add-listing-form .directorist-form-required { color: var(--ynbf-error) !important; }
.directorist-add-listing-form .directorist-form-description,
.directorist-add-listing-form .directorist-input-extra-info { font-size: 15px; color: var(--ynbf-muted); }

/* The listing form's custom category / Additional Services pickers (fields/category.php, fields/subcategory.php). */
.directorist-add-listing-form .ymb-multiselect-trigger {
	min-height: 48px;
	height: auto !important;
	border: 1px solid var(--ynbf-line) !important;
	border-radius: 8px !important;
	font-size: 16px !important;
	color: var(--ynbf-ink) !important;
	background: #fff !important;
}
.directorist-add-listing-form .ymb-multiselect-trigger:focus-visible,
.directorist-add-listing-form .ymb-multiselect-container.active .ymb-multiselect-trigger {
	outline: none;
	border-color: var(--ynbf-green) !important;
	box-shadow: var(--ynbf-ring) !important;
}
.directorist-add-listing-form .ymb-multiselect-placeholder:empty::before { content: attr(data-ynb-ph); color: #5f6b64; font-weight: 400; }
.directorist-add-listing-form .ymb-multiselect-arrow {
	background-image: var(--ynbf-chevron) !important;
	width: 18px !important;
	height: 18px !important;
}
.directorist-add-listing-form .ymb-multiselect-dropdown { border-color: var(--ynbf-line) !important; max-height: 300px !important; }
.directorist-add-listing-form .ymb-multiselect-option {
	min-height: 44px;
	font-size: 16px !important;
	color: var(--ynbf-ink) !important;
}
.directorist-add-listing-form .ymb-multiselect-option:hover { background: var(--ynbf-sage) !important; }
.directorist-add-listing-form .ymb-multiselect-option:has(input:checked) { background: var(--ynbf-sage) !important; font-weight: 600 !important; }
.directorist-add-listing-form .ymb-multiselect-option input[type=checkbox] { width: 20px !important; height: 20px !important; accent-color: var(--ynbf-green) !important; }
.directorist-add-listing-form .ymb-custom-category-group label,
.directorist-add-listing-form .ymb-custom-subcategory-group label { font-size: 16px !important; color: var(--ynbf-ink) !important; }

/* select2 (search filters, add-listing location / tags) */
:is(.directorist-add-listing-form, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .directorist-user-profile-box) .select2-container--default:not(.directorist-search-form-top *) .select2-selection--single,
:is(.directorist-add-listing-form, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .directorist-user-profile-box) .select2-container--default:not(.directorist-search-form-top *) .select2-selection--multiple {
	min-height: 48px !important;
	padding: 6px 40px 6px 12px !important;
	background: #fff !important;
	border: 1px solid var(--ynbf-line) !important;
	border-radius: 8px !important;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
:is(.directorist-add-listing-form, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .directorist-user-profile-box) .select2-container--default.select2-container--focus:not(.directorist-search-form-top *) .select2-selection,
:is(.directorist-add-listing-form, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .directorist-user-profile-box) .select2-container--default.select2-container--open:not(.directorist-search-form-top *) .select2-selection {
	border-color: var(--ynbf-green) !important;
	box-shadow: var(--ynbf-ring) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	font-size: 16px !important;
	color: var(--ynbf-ink) !important;
	line-height: 1.4 !important;
	padding-left: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #5f6b64 !important; }
:is(.directorist-add-listing-form, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .directorist-user-profile-box) .select2-container--default:not(.directorist-search-form-top *) .select2-selection--single .select2-selection__arrow {
	height: 100% !important;
	top: 0 !important;
	right: 12px !important;
	width: 20px !important;
	background: var(--ynbf-chevron) no-repeat center / 18px 18px;
}
:is(.directorist-add-listing-form, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .directorist-user-profile-box) .select2-container--default:not(.directorist-search-form-top *) .select2-selection--single .select2-selection__arrow b { display: none !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
	background: var(--ynbf-sage) !important;
	border: 1px solid var(--ynbf-sage-2) !important;
	color: var(--ynbf-green-dark) !important;
	border-radius: 6px !important;
	font-size: 15px !important;
	padding: 4px 8px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--ynbf-green-dark) !important; }
.select2-container--default .select2-search--inline .select2-search__field { font-size: 16px !important; min-height: 32px; }
/* The open list is appended to <body>; the claim popup does not use select2. */
.select2-container--open .select2-dropdown {
	border: 1px solid var(--ynbf-line) !important;
	border-radius: 8px !important;
	box-shadow: 0 10px 28px rgba(31, 42, 36, .12) !important;
	overflow: hidden;
}
.select2-container--open .select2-results__option {
	font-size: 16px !important;
	min-height: 44px;
	padding: 10px 14px !important;
	display: flex;
	align-items: center;
	color: var(--ynbf-ink);
}
.select2-container--open .select2-search--dropdown .select2-search__field {
	min-height: 44px;
	font-size: 16px !important;
	border: 1px solid var(--ynbf-line) !important;
	border-radius: 8px !important;
}
.select2-container--open .select2-search--dropdown .select2-search__field:focus { outline: none; border-color: var(--ynbf-green) !important; box-shadow: var(--ynbf-ring); }

/* Search bar: the inline top row stays borderless (its own design); only text size, chevron and focus. */
.directorist-search-form-top .select2-container--default .select2-selection--single .select2-selection__rendered { font-size: 16px !important; }
.directorist-search-form-top .select2-container--default.select2-container--focus .select2-selection,
.directorist-search-form-top .select2-container--default.select2-container--open .select2-selection {
	box-shadow: var(--ynbf-ring) !important;
	border-radius: 8px !important;
}
.directorist-search-form .directorist-search-field__label { font-size: 15px; }

/* Checkboxes and radios: Directorist draws its own (label::after = box, ::before = mark). Larger, darker
   outline (3:1 contrast on white), green when ticked, visible keyboard focus. */
:is(.directorist-add-listing-form, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .directorist-user-profile-box, .directorist-dashboard-preferences) .directorist-checkbox__label,
:is(.directorist-add-listing-form, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .directorist-user-profile-box, .directorist-dashboard-preferences) .directorist-radio__label {
	font-size: 16px !important;
	line-height: 24px !important;
	color: var(--ynbf-ink) !important;
	padding-left: 34px !important;
	min-height: 24px;
}
:is(.directorist-add-listing-form, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .directorist-user-profile-box, .directorist-dashboard-preferences) .directorist-checkbox,
:is(.directorist-add-listing-form, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .directorist-user-profile-box, .directorist-dashboard-preferences) .directorist-radio {
	min-height: 32px;
	display: flex;
	align-items: center;
}
:is(.directorist-add-listing-form, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .directorist-user-profile-box, .directorist-dashboard-preferences) .directorist-checkbox__label::after,
:is(.directorist-add-listing-form, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .directorist-user-profile-box, .directorist-dashboard-preferences) .directorist-radio__label::after {
	width: 22px !important;
	height: 22px !important;
	top: 1px !important;
	border: 2px solid var(--ynbf-line-strong) !important;
	background-color: #fff;
}
:is(.directorist-add-listing-form, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .directorist-user-profile-box, .directorist-dashboard-preferences) .directorist-checkbox input:checked + .directorist-checkbox__label::after,
:is(.directorist-add-listing-form, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .directorist-user-profile-box, .directorist-dashboard-preferences) .directorist-radio input:checked + .directorist-radio__label::after {
	background-color: var(--ynbf-green) !important;
	border-color: var(--ynbf-green) !important;
}
:is(.directorist-add-listing-form, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .directorist-user-profile-box, .directorist-dashboard-preferences) .directorist-checkbox__label::before { top: 7px !important; left: 6px !important; }
:is(.directorist-add-listing-form, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .directorist-user-profile-box, .directorist-dashboard-preferences) .directorist-radio__label::before { top: 8px !important; left: 7px !important; }
:is(.directorist-add-listing-form, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .directorist-user-profile-box, .directorist-dashboard-preferences) :is(.directorist-checkbox, .directorist-radio) input:focus-visible + label::after {
	box-shadow: var(--ynbf-ring) !important;
	border-color: var(--ynbf-green) !important;
}
/* Native checkboxes / radios (CF7, plain forms) */
:is(.directorist-add-listing-form, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .directorist-user-profile-box, .wpcf7, .directorist-dashboard-preferences) input[type=checkbox]:not(.directorist-checkbox input):not(.directorist-switch-input),
:is(.directorist-add-listing-form, .directorist-advanced-filter, .directorist-advanced-search, .directorist-search-modal, .directorist-user-profile-box, .wpcf7, .directorist-dashboard-preferences) input[type=radio]:not(.directorist-radio input) {
	accent-color: var(--ynbf-green);
	width: 20px;
	height: 20px;
	vertical-align: middle;
}
.wpcf7 .wpcf7-list-item-label { font-size: 16px; color: var(--ynbf-ink); }

/* =====================================================================
 * 2. Uploads
 * ================================================================== */
.directorist-add-listing-form .directorist-custom-field-file-upload .plupload-upload-uic {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100% !important;
	height: auto !important;
	min-height: 170px;
	padding: 20px !important;
	box-sizing: border-box;
	background: var(--ynbf-cream) !important;
	border: 2px dashed #a9b8ab !important;
	border-radius: 12px !important;
	text-align: center;
	transition: border-color .15s, background-color .15s;
}
.directorist-add-listing-form .directorist-custom-field-file-upload .plupload-upload-uic:hover,
.directorist-add-listing-form .directorist-custom-field-file-upload .plupload-upload-uic:focus-within {
	border-color: var(--ynbf-green) !important;
	background: var(--ynbf-sage) !important;
}
.directorist-add-listing-form .directorist-custom-field-file-upload .plupload-upload-uic:focus-within { box-shadow: var(--ynbf-ring); }
.directorist-add-listing-form .plupload-browse-button-label {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}
.directorist-add-listing-form .plupload-browse-button-label .directorist-icon-mask::after { background-color: var(--ynbf-green) !important; width: 34px; height: 34px; }
.directorist-add-listing-form .ynb-upload-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 20px;
	background: var(--ynbf-green);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	border-radius: 8px;
	line-height: 1.2;
}
.directorist-add-listing-form .plupload-upload-uic:hover .ynb-upload-cta { background: var(--ynbf-green-dark); }
.directorist-add-listing-form .plupload-browse-img-size { font-size: 15px !important; color: var(--ynbf-muted) !important; }
.ynb-upload-help { margin: 8px 0 0 !important; font-size: 15px !important; color: var(--ynbf-muted) !important; line-height: 1.45; }
/* uploaded logo / file preview */
.directorist-add-listing-form .plupload-thumbs:not(:empty) { margin-top: 12px; }
.directorist-add-listing-form .plupload-thumbs .thumb {
	border: 1px solid var(--ynbf-line);
	border-radius: 10px;
	background: #fff;
	padding: 6px;
}
.directorist-add-listing-form .thumbremovelink,
.directorist-add-listing-form .ezmu__front-item__close-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	border-radius: 50% !important;
	background: #fff !important;
	border: 1px solid var(--ynbf-line) !important;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}
.directorist-add-listing-form .thumbremovelink:focus-visible,
.directorist-add-listing-form .ezmu__front-item__close-btn:focus-visible { outline: none; box-shadow: var(--ynbf-ring); border-color: var(--ynbf-green) !important; }
.directorist-add-listing-form .thumbremovelink .directorist-icon-mask::after,
.directorist-add-listing-form .ezmu__front-item__close-btn .directorist-icon-mask::after { background-color: var(--ynbf-error) !important; }
/* image gallery uploader (ez-media-uploader) */
.directorist-add-listing-form .directorist-form-image-upload-field .ez-media-uploader {
	background: var(--ynbf-cream) !important;
	border: 2px dashed #a9b8ab !important;
	border-radius: 12px !important;
}
.directorist-add-listing-form .directorist-form-image-upload-field .ez-media-uploader:hover,
.directorist-add-listing-form .directorist-form-image-upload-field .ez-media-uploader:focus-within { border-color: var(--ynbf-green) !important; }
.directorist-add-listing-form .directorist-form-image-upload-field .ezmu-icon-upload i::after { background-color: #9db5a2 !important; }
.directorist-add-listing-form .ezmu__media-picker,
.directorist-add-listing-form .ezmu__upload-button-wrap {
	background: var(--ynbf-cream) !important;
	border-color: #a9b8ab !important;
	border-radius: 12px !important;
}
.directorist-add-listing-form .ezmu__media-picker:hover,
.directorist-add-listing-form .ezmu__media-picker:focus-within { border-color: var(--ynbf-green) !important; background: var(--ynbf-sage) !important; }
.directorist-add-listing-form .ezmu__btn {
	min-height: 44px;
	font-size: 16px !important;
	background: var(--ynbf-green) !important;
	border-radius: 8px !important;
}
.directorist-add-listing-form .ezmu__btn:focus-visible { outline: none; box-shadow: var(--ynbf-ring), 0 0 0 5px #fff; }
.directorist-add-listing-form .ezmu__info-list-item,
.directorist-add-listing-form .ezmu__info-text { font-size: 15px !important; color: var(--ynbf-muted) !important; }
/* plain file inputs (contact forms, profile) */
:is(.wpcf7, .directorist-user-profile-box, .ynb-forms) input[type=file] {
	font-size: 16px;
	max-width: 100%;
	padding: 10px;
	border: 2px dashed #a9b8ab;
	border-radius: 10px;
	background: var(--ynbf-cream);
	color: var(--ynbf-ink);
}
:is(.wpcf7, .directorist-user-profile-box, .ynb-forms) input[type=file]:focus-visible { outline: none; border-color: var(--ynbf-green); box-shadow: var(--ynbf-ring); }
:is(.wpcf7, .directorist-user-profile-box, .ynb-forms) input[type=file]::file-selector-button {
	min-height: 44px;
	margin-right: 12px;
	padding: 8px 16px;
	font: 600 16px/1.2 inherit;
	color: #fff;
	background: var(--ynbf-green);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
}
.ynb-file-name { display: block; margin-top: 6px; font-size: 15px; color: var(--ynbf-muted); word-break: break-all; }

/* =====================================================================
 * 3. Validation (add / edit listing)
 * ================================================================== */
.directorist-add-listing-form .ynb-has-error :is(input, textarea, select).directorist-form-element,
.directorist-add-listing-form .ynb-has-error .ymb-multiselect-trigger {
	border-color: var(--ynbf-error) !important;
	box-shadow: 0 0 0 1px var(--ynbf-error) !important;
}
.ynb-field-error {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 8px 0 0 !important;
	font-size: 15px !important;
	font-weight: 600;
	color: var(--ynbf-error) !important;
	line-height: 1.4;
}
.ynb-field-error::before {
	content: "!";
	flex: 0 0 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--ynbf-error);
	color: #fff;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	margin-top: 1px;
}
.ynb-field-error[hidden] { display: none !important; }
.ynb-form-errors {
	margin: 0 0 20px;
	padding: 16px 18px;
	background: var(--ynbf-error-bg);
	border: 1px solid #e6c4c0;
	border-left: 5px solid var(--ynbf-error);
	border-radius: 10px;
	color: var(--ynbf-ink);
}
.ynb-form-errors:focus { outline: none; }
.ynb-form-errors__title { margin: 0 0 8px !important; font-size: 16px !important; font-weight: 700; color: var(--ynbf-error) !important; }
.ynb-form-errors ul { margin: 0 !important; padding-left: 20px !important; }
.ynb-form-errors li { margin: 2px 0; font-size: 16px; }
.ynb-form-errors__link {
	min-height: 32px;
	padding: 2px 0;
	background: none !important;
	border: 0 !important;
	color: var(--ynbf-ink) !important;
	text-decoration: underline;
	font-size: 16px;
	cursor: pointer;
}
.ynb-form-errors__link:focus-visible { outline: 2px solid var(--ynbf-green); outline-offset: 2px; }
.ynb-form-errors[hidden] { display: none !important; }

/* =====================================================================
 * 4. Compare
 * ================================================================== */

/* Card button (printed by the add-on) */
.directorist-listing-single .directorist-compare-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 40px !important;
	border-radius: 50% !important;
	background: #fff !important;
	border: 1px solid var(--ynbf-line) !important;
	box-shadow: 0 1px 4px rgba(31, 42, 36, .12);
	color: var(--ynbf-green) !important;
}
.directorist-listing-single .directorist-compare-btn .directorist-icon-mask::after { background-color: var(--ynbf-green) !important; width: 18px; height: 18px; }
.directorist-listing-single .directorist-compare-btn.directorist-compare-added .directorist-icon-mask::after { background-color: #fff !important; }
.directorist-listing-single .directorist-compare-btn:hover { background: var(--ynbf-sage) !important; border-color: var(--ynbf-green) !important; }
.directorist-listing-single .directorist-compare-btn.directorist-compare-added {
	background: var(--ynbf-green) !important;
	border-color: var(--ynbf-green) !important;
	color: #fff !important;
}
.directorist-compare-btn:focus-visible,
.ynb-compare-toggle:focus-visible { outline: 3px solid var(--ynbf-green) !important; outline-offset: 2px; }

/* Single page "Compare" (next to Bookmark / Share / Report) */
.ynb-compare-toggle .directorist-icon-mask::after { background-color: var(--ynbf-green) !important; width: 18px; height: 18px; }
.ynb-compare-toggle.directorist-compare-added,
.ynb-single .ynb-head__actions .ynb-compare-toggle.directorist-compare-added { background: var(--ynbf-green) !important; border-color: var(--ynbf-green) !important; color: #fff !important; }
.ynb-compare-toggle.directorist-compare-added .directorist-icon-mask::after,
.ynb-single .ynb-head__actions .ynb-compare-toggle.directorist-compare-added .directorist-icon-mask::after { background-color: #fff !important; }
.ynb-compare-toggle .ynb-compare-toggle__text { text-transform: none; }

/* Tray */
.ynb-ctray {
	position: fixed;
	left: 50%;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	z-index: 9990;
	width: min(980px, calc(100% - 24px));
	background: #fff;
	border: 1px solid var(--ynbf-line);
	border-top: 4px solid var(--ynbf-green);
	border-radius: 14px;
	box-shadow: 0 12px 36px rgba(31, 42, 36, .18);
	color: var(--ynbf-ink);
	font-size: 16px;
}
.ynb-ctray[hidden] { display: none !important; }
.ynb-ctray__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; }
.ynb-ctray__title { display: flex; align-items: center; gap: 8px; margin: 0 !important; font-weight: 700; color: var(--ynbf-green-dark); white-space: nowrap; }
.ynb-ctray__count { font-weight: 600; color: var(--ynbf-muted); }
.ynb-ctray__list { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 300px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.ynb-ctray__item { display: inline-flex; align-items: center; gap: 2px; max-width: 240px; padding: 2px 2px 2px 12px; background: var(--ynbf-sage); border: 1px solid var(--ynbf-sage-2); border-radius: 999px; }
.ynb-ctray__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--ynbf-ink) !important; text-decoration: none !important; }
.ynb-ctray__name:hover { text-decoration: underline !important; }
.ynb-ctray__rm {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; flex: 0 0 36px;
	padding: 0 !important; margin: 0 !important;
	border: 0 !important; border-radius: 50% !important;
	background: transparent !important; color: var(--ynbf-green-dark) !important; cursor: pointer;
}
.ynb-ctray__rm:hover { background: #fff !important; }
.ynb-ctray__rm:focus-visible { outline: 2px solid var(--ynbf-green); outline-offset: 1px; }
.ynb-ctray__actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.ynb-ctray__go {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: 10px 20px;
	background: var(--ynbf-green); color: #fff !important; font-weight: 700;
	border-radius: 8px; text-decoration: none !important; white-space: nowrap;
}
.ynb-ctray__go:hover { background: var(--ynbf-green-dark); }
.ynb-ctray__go.is-waiting { background: #fff; color: var(--ynbf-green) !important; border: 2px solid var(--ynbf-green); }
.ynb-ctray__go:focus-visible, .ynb-ctray__clear:focus-visible { outline: 3px solid var(--ynbf-green); outline-offset: 2px; }
.ynb-ctray__clear {
	min-height: 44px; padding: 8px 12px !important;
	background: none !important; border: 0 !important;
	color: var(--ynbf-green-dark) !important; font-size: 16px !important; font-weight: 600;
	text-decoration: underline; cursor: pointer;
}
.ynb-ctray__msg { flex: 1 1 100%; margin: 0 !important; padding: 8px 12px; background: var(--ynbf-gold-bg); border-radius: 8px; font-size: 15px; color: var(--ynbf-ink); }
.ynb-ctray__msg[hidden] { display: none; }
body.ynb-has-ctray { padding-bottom: 110px; }
@media (max-width: 640px) {
	.ynb-ctray { bottom: 0; width: 100%; border-radius: 14px 14px 0 0; border-left: 0; border-right: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
	.ynb-ctray__inner { padding: 10px 12px; gap: 8px; }
	.ynb-ctray__list { display: none; }
	.ynb-ctray__actions { margin-left: auto; }
	.ynb-ctray__go { padding: 10px 14px; }
	body.ynb-has-ctray { padding-bottom: 80px; }
}

/* Compare page */
.ynb-compare { color: var(--ynbf-ink); font-size: 16px; line-height: 1.5; margin: 0 auto; max-width: 1240px; padding: 32px 0 48px; }
.ynb-compare__heading { margin: 0 0 6px !important; font-size: 28px !important; line-height: 1.25; color: var(--ynbf-ink) !important; }
.ynb-compare__cellname { display: none; }
.ynb-compare [hidden] { display: none !important; }
.ynb-compare__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 44px; padding: 10px 18px;
	font-size: 16px !important; font-weight: 600; line-height: 1.2;
	border-radius: 8px !important; text-decoration: none !important; cursor: pointer;
	border: 2px solid transparent !important;
}
.ynb-compare__btn--primary { background: var(--ynbf-green) !important; color: #fff !important; border-color: var(--ynbf-green) !important; }
.ynb-compare__btn--primary:hover { background: var(--ynbf-green-dark) !important; border-color: var(--ynbf-green-dark) !important; }
.ynb-compare__btn--ghost { background: #fff !important; color: var(--ynbf-green-dark) !important; border-color: var(--ynbf-green) !important; }
.ynb-compare__btn--ghost:hover { background: var(--ynbf-sage) !important; }
.ynb-compare__btn--text { background: none !important; color: var(--ynbf-green-dark) !important; text-decoration: underline !important; padding-inline: 8px; }
.ynb-compare__btn--sm { min-height: 44px; padding: 8px 12px; font-size: 15px !important; }
.ynb-compare__btn:focus-visible, .ynb-compare__link:focus-visible, .ynb-compare__name:focus-visible, .ynb-compare__scroll:focus-visible { outline: 3px solid var(--ynbf-green); outline-offset: 2px; }
.ynb-compare__link { color: var(--ynbf-green-dark) !important; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.ynb-compare__break { word-break: break-word; overflow-wrap: anywhere; }

.ynb-compare__empty {
	max-width: 640px; margin: 24px auto; padding: 40px 28px;
	text-align: center; background: #fff;
	border: 1px solid var(--ynbf-line); border-radius: 16px;
	box-shadow: 0 4px 16px rgba(31, 42, 36, .05);
}
.ynb-compare__empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--ynbf-sage); color: var(--ynbf-green); margin-bottom: 12px; }
.ynb-compare__title { margin: 0 0 8px !important; font-size: 24px !important; color: var(--ynbf-ink) !important; }
.ynb-compare__title:focus { outline: none; }
.ynb-compare__text { margin: 0 auto 20px !important; color: var(--ynbf-muted); max-width: 480px; }

.ynb-compare__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ynb-compare__count { margin: 0 !important; font-weight: 600; }
.ynb-compare__bar-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ynb-compare__note { margin: 0 0 14px !important; padding: 12px 16px; background: var(--ynbf-sage); border-radius: 10px; }
.ynb-compare__foot { margin: 14px 0 0 !important; font-size: 15px; color: var(--ynbf-muted); }

.ynb-compare__scroll {
	overflow-x: auto;
	overflow-y: visible;
	background: #fff;
	border: 1px solid var(--ynbf-line);
	border-radius: 14px;
	-webkit-overflow-scrolling: touch;
}
.ynb-compare__table { width: auto; min-width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 !important; table-layout: fixed; }
.ynb-compare__table th, .ynb-compare__table td {
	padding: 14px 16px !important;
	border: 0 !important;
	border-bottom: 1px solid #ece6d8 !important;
	border-right: 1px solid #f1ece1 !important;
	vertical-align: top;
	text-align: left;
	background: #fff;
	font-size: 16px;
	color: var(--ynbf-ink);
	width: 240px;
}
.ynb-compare__table tbody tr:nth-child(even) td { background: #fdfbf7; }
.ynb-compare__table tbody tr:last-child > * { border-bottom: 0 !important; }
/* sticky header row + sticky label column */
.ynb-compare__table thead th, .ynb-compare__table thead td { z-index: 2; background: #fff; border-bottom: 2px solid var(--ynbf-line) !important; }
.ynb-compare__table .ynb-compare__label,
.ynb-compare__table .ynb-compare__corner {
	position: sticky; left: 0; z-index: 1;
	width: 190px;
	background: var(--ynbf-cream) !important;
	font-weight: 700; font-size: 15px; color: var(--ynbf-green-dark);
	border-right: 2px solid var(--ynbf-line) !important;
}
.ynb-compare__table .ynb-compare__corner { z-index: 3; }
.ynb-compare__card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ynb-compare__thumb { display: block; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; border: 1px solid var(--ynbf-line); background: var(--ynbf-sage); flex: 0 0 auto; }
.ynb-compare__thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; }
.ynb-compare__initial { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; color: var(--ynbf-green); }
.ynb-compare__name { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--ynbf-ink) !important; text-decoration: none !important; overflow-wrap: anywhere; }
.ynb-compare__name:hover { color: var(--ynbf-green) !important; text-decoration: underline !important; }
.ynb-compare__verified {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 10px; border-radius: 999px;
	background: var(--ynbf-gold-bg); color: #7a5512; border: 1px solid #e6cf9a;
	font-size: 14px; font-weight: 700;
}
.ynb-compare__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ynb-compare__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
.ynb-compare__tags li { margin: 0; padding: 3px 10px; background: var(--ynbf-sage); border-radius: 999px; font-size: 14px; color: var(--ynbf-green-dark); }
.ynb-compare__more { display: inline-block; margin-top: 6px; font-size: 14px; color: var(--ynbf-muted); }
.ynb-compare__none { color: #8a948e; font-size: 18px; }
.ynb-compare__yes { color: var(--ynbf-green-dark); font-weight: 600; }
.ynb-compare__rating { font-weight: 600; }

@media (max-width: 767px) {
	.ynb-compare__table th, .ynb-compare__table td { width: 200px; padding: 12px !important; font-size: 15px; }
	.ynb-compare__table .ynb-compare__label, .ynb-compare__table .ynb-compare__corner { width: 112px; font-size: 14px; padding: 12px 10px !important; }
	.ynb-compare__name { font-size: 16px; }
	.ynb-compare__thumb { width: 56px; height: 56px; }
	.ynb-compare__scroll { border-radius: 10px; }
	.ynb-compare__cellname { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; color: var(--ynbf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.ynb-compare__bar-actions .ynb-compare__btn { flex: 1 1 auto; }
	.ynb-compare__empty { padding: 28px 18px; }
}