/**
 * Area: site-wide FORMS, NOTICES and LOADING / FEEDBACK states (automatic for any future form).
 * PHP: inc/areas/auto-emails-forms.php · JS: assets/js/areas/auto-emails-forms.js
 *
 * Loads right after 00-tokens.css, so same-specificity rules here refine the tokens, and every
 * page-area file (account, checkout, pdp …) with a more specific selector still wins.
 *
 * 1. Notices (WooCommerce classic + Blocks, WoodMart, CF7, WPForms, Fluent Forms)
 * 2. Labels + required asterisks
 * 3. Validation states (red #D31334 border + message under the field)
 * 4. Select arrow, date, file inputs
 * 5. Custom checkbox / radio
 * 6. Password show/hide eye (JS-added .yb-autoef-pw + WooCommerce's own .show-password-input)
 * 7. Plugin forms inherit tokens
 * 8. Loading: blockUI overlay spinner, disabled buttons, toast
 */

/* ==========================================================================
   1. Notices — light panel, 4px radius, icon on the left
   ========================================================================== */

.yb .woocommerce-message,
.yb .woocommerce-info,
.yb .woocommerce-error,
.yb .wc-block-components-notice-banner,
.yb .wpcf7 form .wpcf7-response-output,
.yb .wpforms-confirmation-container-full,
.yb .wpforms-error-container,
.yb .ff-message-success,
.yb .ff-errors-in-stack {
	position: relative;
	display: block;
	min-height: 0;
	margin: 0 0 20px;
	padding: 14px 16px 14px 48px;
	border: 1px solid #D5D5D5;
	border-radius: 4px;
	background-color: #F9F9F9;
	box-shadow: none;
	color: #000;
	font-family: var(--yb-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	list-style: none;
	text-align: left;
}
.yb ul.woocommerce-error { margin-left: 0; }
.yb .woocommerce-error li { margin: 0; padding: 0; list-style: none; }
.yb .woocommerce-error li + li { margin-top: 6px; }

/* Icon: replaces WoodMart's white icon-font glyph */
.yb .woocommerce-message::before,
.yb .woocommerce-info::before,
.yb .woocommerce-error::before,
.yb .wpcf7 form .wpcf7-response-output::before,
.yb .wpforms-confirmation-container-full::before,
.yb .wpforms-error-container::before,
.yb .ff-message-success::before,
.yb .ff-errors-in-stack::before {
	content: "" !important;
	position: absolute;
	top: 15px;
	left: 16px;
	width: 20px;
	height: 20px;
	margin: 0;
	background: no-repeat center / 20px 20px;
	color: transparent;
	font-family: inherit;
	font-size: 0;
	line-height: 0;
	transform: none;
}

/* Success: white panel, black check */
.yb .woocommerce-message,
.yb .wc-block-components-notice-banner.is-success,
.yb .wpcf7 form.sent .wpcf7-response-output,
.yb .wpforms-confirmation-container-full,
.yb .ff-message-success {
	border-color: #D5D5D5;
	background-color: #fff;
}
.yb .woocommerce-message::before,
.yb .wpcf7 form.sent .wpcf7-response-output::before,
.yb .wpforms-confirmation-container-full::before,
.yb .ff-message-success::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.25' fill='%23000'/%3E%3Cpath d='M5.8 10.3l2.8 2.8 5.6-6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Info: grey panel, "i" */
.yb .woocommerce-info,
.yb .wc-block-components-notice-banner.is-info,
.yb .wc-block-components-notice-banner.is-warning {
	border-color: #E0E0E0;
	background-color: #F9F9F9;
}
.yb .woocommerce-info::before,
.yb .wpcf7 form .wpcf7-response-output::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.25' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M10 9v5' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='6.2' r='1' fill='%23000'/%3E%3C/svg%3E");
}

/* Error: red outline, pale red ground, red "!" */
.yb .woocommerce-error,
.yb .wc-block-components-notice-banner.is-error,
.yb .wpcf7 form.invalid .wpcf7-response-output,
.yb .wpcf7 form.unaccepted .wpcf7-response-output,
.yb .wpcf7 form.failed .wpcf7-response-output,
.yb .wpcf7 form.aborted .wpcf7-response-output,
.yb .wpcf7 form.spam .wpcf7-response-output,
.yb .wpforms-error-container,
.yb .ff-errors-in-stack {
	border-color: #D31334;
	background-color: #FFF6F7;
	color: #000;
}
.yb .woocommerce-error::before,
.yb .wpcf7 form.invalid .wpcf7-response-output::before,
.yb .wpcf7 form.unaccepted .wpcf7-response-output::before,
.yb .wpcf7 form.failed .wpcf7-response-output::before,
.yb .wpcf7 form.aborted .wpcf7-response-output::before,
.yb .wpcf7 form.spam .wpcf7-response-output::before,
.yb .wpforms-error-container::before,
.yb .ff-errors-in-stack::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.25' fill='%23D31334'/%3E%3Cpath d='M10 5.5v5.5' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.2' r='1.05' fill='%23fff'/%3E%3C/svg%3E");
}

/* Buttons inside notices ("View bag", "Undo"): quiet text link on the right, not a black block */
.yb .woocommerce-message .button,
.yb .woocommerce-info .button,
.yb .woocommerce-error .button {
	float: right;
	height: auto;
	min-height: 0;
	margin: 0 0 0 16px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: #000;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline;
	text-decoration-color: #8D9196;
	text-underline-offset: 4px;
}
.yb .woocommerce-message .button:hover,
.yb .woocommerce-info .button:hover,
.yb .woocommerce-error .button:hover {
	background: none;
	color: #000;
	text-decoration-color: #D31334;
}

/* WooCommerce Blocks banners keep their own SVG — recolour it */
.yb .wc-block-components-notice-banner { padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; }
.yb .wc-block-components-notice-banner > svg { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background-color: #000; fill: #fff; }
.yb .wc-block-components-notice-banner.is-error > svg { background-color: #D31334; }
.yb .wc-block-components-notice-banner.is-info > svg,
.yb .wc-block-components-notice-banner.is-warning > svg { background-color: #000; }

.yb .woocommerce-notices-wrapper:empty { display: none; }

/* ==========================================================================
   2. Labels + required asterisks
   ========================================================================== */

.yb .form-row > label:not(.checkbox):not(.woocommerce-form__label-for-checkbox),
.yb .wpcf7 form > p > label,
.yb .wpforms-field-label,
.yb .ff-el-input--label label {
	color: #000;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
}
.yb form label .required,
.yb form abbr.required,
.yb .yb-autoef-req,
.yb .wpforms-required-label {
	border: 0;
	color: #D31334;
	font-weight: 400;
	text-decoration: none;
	cursor: default;
}

/* ==========================================================================
   3. Validation — red border + message under the field
   ========================================================================== */

.yb .woocommerce-invalid input.input-text,
.yb .woocommerce-invalid select,
.yb .woocommerce-invalid textarea,
.yb .woocommerce-invalid .select2-selection,
.yb input.yb-autoef-invalid,
.yb select.yb-autoef-invalid,
.yb textarea.yb-autoef-invalid,
.yb .wpcf7-not-valid,
.yb input.wpforms-error,
.yb select.wpforms-error,
.yb textarea.wpforms-error,
.yb .ff-el-is-error .ff-el-form-control {
	border-color: #D31334 !important;
	box-shadow: none;
}
.yb .woocommerce-invalid input.input-text:focus,
.yb input.yb-autoef-invalid:focus,
.yb select.yb-autoef-invalid:focus,
.yb textarea.yb-autoef-invalid:focus,
.yb .wpcf7-not-valid:focus { outline-color: #D31334; }

.yb .woocommerce-validated input.input-text,
.yb .woocommerce-validated select { border-color: #2C282E; }

.yb .yb-autoef-err,
.yb .checkout-inline-error-message,
.yb .wpcf7-not-valid-tip,
.yb label.wpforms-error,
.yb em.wpforms-error,
.yb .ff-el-is-error .error,
.yb .ff-el-is-error .text-danger {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 6px 0 0;
	padding: 0;
	color: #D31334;
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.35;
}
.yb .yb-autoef-err::before,
.yb .checkout-inline-error-message::before,
.yb .wpcf7-not-valid-tip::before {
	content: "";
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	margin-top: 1px;
	background: no-repeat center / 14px 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.25' fill='%23D31334'/%3E%3Cpath d='M10 5.5v5.5' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.2' r='1.15' fill='%23fff'/%3E%3C/svg%3E");
}
/* If WooCommerce already printed its inline message, hide ours */
.yb .checkout-inline-error-message ~ .yb-autoef-err { display: none; }

/* ==========================================================================
   4. Select arrow, date, file
   ========================================================================== */

.yb select:where(:not([multiple]):not([size]):not(#wpadminbar *)) {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	cursor: pointer;
}
.yb select:where(:not([multiple]):not([size]))::-ms-expand { display: none; }
.yb .select2-container--default .select2-selection--single .select2-selection__arrow b {
	width: 12px;
	height: 8px;
	margin: -4px 0 0 -10px;
	border: 0;
	background: no-repeat center / 12px 8px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.yb input[type="date"],
.yb input[type="time"],
.yb input[type="datetime-local"],
.yb input[type="month"] {
	height: 50px;
	padding: 0 12px 0 16px;
	border: 1px solid #2C282E;
	border-radius: 4px;
	background-color: #fff;
	color: #000;
	font-family: var(--yb-font);
	font-size: 16px;
	line-height: 48px;
}
.yb input[type="date"]::-webkit-calendar-picker-indicator,
.yb input[type="time"]::-webkit-calendar-picker-indicator,
.yb input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.yb input[type="month"]::-webkit-calendar-picker-indicator {
	opacity: .85;
	cursor: pointer;
}

.yb input[type="file"] {
	max-width: 100%;
	height: auto;
	padding: 0;
	border: 0;
	background: none;
	color: #57585B;
	font-family: var(--yb-font);
	font-size: 14px;
}
.yb input[type="file"]::file-selector-button {
	margin: 0 12px 0 0;
	padding: 0 18px;
	height: 40px;
	border: 1px solid #000;
	border-radius: 4px;
	background: #fff;
	color: #000;
	font-family: var(--yb-font);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.yb input[type="file"]::file-selector-button:hover { background: #000; color: #fff; }

/* ==========================================================================
   5. Custom checkbox / radio (area files with more specific rules still win)
   ========================================================================== */

.yb input[type="checkbox"]:where(:not(#wpadminbar *)),
.yb input[type="radio"]:where(:not(#wpadminbar *)) {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 1px solid #2C282E;
	background: #fff no-repeat center;
	box-shadow: none;
	vertical-align: -4px;
	cursor: pointer;
	transition: background-color .12s ease-in-out, border-color .12s ease-in-out;
}
.yb input[type="checkbox"]:where(:not(#wpadminbar *)) { border-radius: 2px; }
.yb input[type="radio"]:where(:not(#wpadminbar *)) { border-radius: 50%; }
.yb input[type="checkbox"]:where(:not(#wpadminbar *)):checked {
	border-color: #000;
	background-color: #000;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2l2.7 2.7L11 4.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 14px 14px;
}
.yb input[type="radio"]:where(:not(#wpadminbar *)):checked {
	border-color: #000;
	background-image: radial-gradient(circle, #000 0 4.5px, transparent 5px);
}
.yb input[type="checkbox"]:where(:not(#wpadminbar *)):focus-visible,
.yb input[type="radio"]:where(:not(#wpadminbar *)):focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.yb input[type="checkbox"]:where(:not(#wpadminbar *)):disabled,
.yb input[type="radio"]:where(:not(#wpadminbar *)):disabled { border-color: #BFBFBF; background-color: #F2F2F2; cursor: not-allowed; }
.yb .woocommerce-invalid input[type="checkbox"],
.yb .wpcf7-not-valid input[type="checkbox"],
.yb .wpcf7-not-valid input[type="radio"] { border-color: #D31334; }

/* ==========================================================================
   6. Password eye
   ========================================================================== */

.yb .yb-autoef-pw { position: relative; display: block; }
.yb .yb-autoef-pw > input { padding-right: 52px !important; }
.yb .yb-autoef-pw__eye,
.yb .password-input .show-password-input {
	position: absolute;
	top: 50%;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: #000;
	cursor: pointer;
	transform: translateY(-50%);
}
.yb .yb-autoef-pw__eye:hover,
.yb .yb-autoef-pw__eye:focus { background: none; color: #000; }
.yb .yb-autoef-pw__eye:focus-visible,
.yb .password-input .show-password-input:focus-visible { outline: 2px solid #000; outline-offset: -4px; border-radius: 4px; }
.yb .yb-autoef-pw__eye.is-shown .yb-autoef-pw__slash { display: none; }

/* WooCommerce's own toggle (my-account / checkout): same eye icon */
.yb .password-input { position: relative; display: block; }
.yb .password-input input { padding-right: 52px; }
.yb .password-input .show-password-input::before,
.yb .password-input .show-password-input::after {
	content: "";
	position: static;
	display: block;
	width: 22px;
	height: 22px;
	margin: 0;
	background: no-repeat center / 22px 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 10S4.5 4.5 10 4.5 18.5 10 18.5 10 15.5 15.5 10 15.5 1.5 10 1.5 10z'/%3E%3Ccircle cx='10' cy='10' r='2.6'/%3E%3Cpath d='M3 17L17 3'/%3E%3C/svg%3E");
	font-size: 0;
	transform: none;
}
.yb .password-input .show-password-input::after { display: none; }
.yb .password-input .show-password-input.display-password::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 10S4.5 4.5 10 4.5 18.5 10 18.5 10 15.5 15.5 10 15.5 1.5 10 1.5 10z'/%3E%3Ccircle cx='10' cy='10' r='2.6'/%3E%3C/svg%3E");
}

/* ==========================================================================
   7. Plugin forms inherit the field tokens (CF7, WPForms, Fluent Forms, Gravity, Mailchimp)
   ========================================================================== */

.yb .wpcf7 input:where([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"]),
.yb .wpcf7 select,
.yb .wpcf7 textarea,
.yb .wpforms-container input:where([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="password"]),
.yb .wpforms-container select,
.yb .wpforms-container textarea,
.yb .fluentform .ff-el-form-control,
.yb .gform_wrapper input:where([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"]),
.yb .gform_wrapper select,
.yb .gform_wrapper textarea,
.yb .mc4wp-form input:where([type="text"], [type="email"]) {
	width: 100%;
	max-width: 100%;
	height: 50px;
	padding: 0 16px;
	border: 1px solid #2C282E;
	border-radius: 4px;
	background-color: #fff;
	box-shadow: none;
	color: #000;
	font-family: var(--yb-font);
	font-size: 16px;
	line-height: normal;
}
.yb .wpcf7 textarea,
.yb .wpforms-container textarea,
.yb .fluentform textarea.ff-el-form-control,
.yb .gform_wrapper textarea {
	height: auto;
	min-height: 120px;
	padding: 14px 16px;
	line-height: 1.4;
}
.yb .wpcf7 select,
.yb .wpforms-container select,
.yb .fluentform select.ff-el-form-control,
.yb .gform_wrapper select { padding-right: 40px; }
.yb .wpcf7 input:focus,
.yb .wpcf7 select:focus,
.yb .wpcf7 textarea:focus,
.yb .wpforms-container input:focus,
.yb .wpforms-container select:focus,
.yb .wpforms-container textarea:focus,
.yb .fluentform .ff-el-form-control:focus,
.yb .gform_wrapper input:focus,
.yb .gform_wrapper select:focus,
.yb .gform_wrapper textarea:focus {
	border-color: #000;
	box-shadow: none;
	outline: 1px solid #000;
	outline-offset: 0;
}
.yb .wpcf7 .wpcf7-submit,
.yb .wpforms-container .wpforms-submit,
.yb .fluentform .ff-btn-submit,
.yb .gform_wrapper .gform_button,
.yb .mc4wp-form input[type="submit"] {
	height: 50px;
	padding: 0 28px;
	border: 1px solid #000;
	border-radius: 4px;
	background: #000;
	box-shadow: none;
	color: #fff;
	font-family: var(--yb-font);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color .15s ease-in-out, color .15s ease-in-out;
}
.yb .wpcf7 .wpcf7-submit:hover,
.yb .wpforms-container .wpforms-submit:hover,
.yb .fluentform .ff-btn-submit:hover,
.yb .gform_wrapper .gform_button:hover,
.yb .mc4wp-form input[type="submit"]:hover { background: #fff; color: #000; }
.yb .wpcf7 .wpcf7-spinner { margin: 0 12px; background-color: #000; }
.yb .wpforms-container .wpforms-field { padding: 0 0 20px; }
.yb .fluentform .ff-el-group { margin-bottom: 20px; }

/* ==========================================================================
   8. Loading & feedback
   ========================================================================== */

/* WooCommerce / jQuery blockUI overlays (cart totals, checkout review, mini cart, account) */
.yb .blockUI.blockOverlay {
	background: rgba(255, 255, 255, .6) !important;
	opacity: 1 !important;
	cursor: progress !important;
}
.yb .blockUI.blockOverlay::before { display: none !important; content: none !important; }
.yb .blockUI.blockOverlay::after {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	display: block !important;
	width: 28px !important;
	height: 28px !important;
	margin: -14px 0 0 -14px !important;
	border: 2px solid rgba(0, 0, 0, .12) !important;
	border-left-color: #000 !important;
	border-radius: 50% !important;
	background: none !important;
	font-size: 0 !important;
	animation: yb-autoef-spin .7s linear infinite !important;
}
.yb .blockUI.blockMsg { display: none !important; }
@keyframes yb-autoef-spin { to { transform: rotate(360deg); } }

/* Disabled buttons. Not .single_add_to_cart_button.disabled: the PDP keeps its red Add to bag. */
.yb :is(button, input[type="submit"], input[type="button"], .button):disabled:not(.single_add_to_cart_button):not([id="place_order"]):where(:not(.mfp-close, .yb-autoef-pw__eye, .show-password-input, #wpadminbar *)),
.yb :is(button, .button)[aria-disabled="true"]:not(.single_add_to_cart_button):where(:not(.mfp-close, .owl-prev, .owl-next, #wpadminbar *)) {
	border-color: #BFBFBF;
	background-color: #BFBFBF;
	box-shadow: none;
	color: #fff;
	cursor: not-allowed;
	opacity: 1 !important;
}

/* Toast (AJAX wishlist etc.) */
.yb-autoef-toasts {
	position: fixed;
	left: 50%;
	bottom: 24px;
	/* Overlay tier 100100 (INTEGRATION-3 S7): toasts are small, transient and never block a click,
	   so they stay readable above the drawer (100000) and the modals (100040/100050). */
	z-index: 100100;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: max-content;
	max-width: calc(100vw - 32px);
	transform: translateX(-50%);
	pointer-events: none;
}
.yb-autoef-toast {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	max-width: 100%;
	padding: 12px 12px 12px 16px;
	border-radius: 4px;
	background: #000;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
	color: #fff;
	font-family: var(--yb-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
	font-size: 15px;
	line-height: 1.35;
	opacity: 0;
	pointer-events: auto;
	transform: translateY(8px);
	transition: opacity .2s ease-out, transform .2s ease-out;
}
.yb-autoef-toast.is-in { opacity: 1; transform: none; }
.yb-autoef-toast__icon { flex: 0 0 18px; width: 18px; height: 18px; }
.yb-autoef-toast__msg { flex: 1 1 auto; }
.yb-autoef-toast__link,
.yb-autoef-toast__link:hover {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	white-space: nowrap;
}
.yb-autoef-toast__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
}
.yb-autoef-toast__close:hover { background: none; color: #fff; opacity: .7; }
.yb-autoef-toast.is-error { background: #D31334; }

@media (max-width: 767px) {
	.yb-autoef-toasts { bottom: 16px; width: calc(100vw - 32px); }
	.yb-autoef-toast { width: 100%; }
	.yb .woocommerce-message .button,
	.yb .woocommerce-info .button,
	.yb .woocommerce-error .button { float: none; display: inline-block; margin: 6px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
	.yb .blockUI.blockOverlay::after { animation-duration: 1.6s !important; }
	.yb-autoef-toast { transition: none; }
}