/*! yForms - v1.0.2 - 16/09/2026
* By Yuval Ashkenazi */
/* =========================================
   yForms – Core Logic (embed-safe, unstyled)
   Every value ships as a CSS variable with the
   original as its fallback — override any of
   them from demo.css without touching this file.
   Scoped to .wpcf7-form only.
   ========================================= */
:root {
	--y-select-wrap-display: flex;
}

/* Native control reset – required so the JS-built custom
   controls (y-select, custom checkbox) aren't fighting the
   browser's own control chrome. */
.wpcf7-form select,
.wpcf7-form textarea,
.wpcf7-form input[type="url"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="text"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="time"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="search"],
.wpcf7-form input[type="submit"],
.wpcf7-form input[type="password"] {
	-moz-appearance: var(--y-native-appearance, none);
	-webkit-appearance: var(--y-native-appearance, none);
	appearance: var(--y-native-appearance, none);
	-webkit-box-shadow: var(--y-native-shadow, none);
	box-shadow: var(--y-native-shadow, none);
	direction: var(--y-native-direction, inherit);
}
/* 1. מצב ברירת מחדל / כשהשדה ריק (הפלייסהולדר מוצג) */
input[type="url"]:placeholder-shown,
input[type="tel"]:placeholder-shown,
input[type="date"]:placeholder-shown,
input[type="time"]:placeholder-shown,
input[type="email"]:placeholder-shown,
.wpcf7 input[type="url"]:placeholder-shown,
.wpcf7 input[type="tel"]:placeholder-shown,
.wpcf7 input[type="email"]:placeholder-shown {
	direction: rtl;
}
/* 2. כשהמשתמש מקליד משהו (הפלייסהולדר נעלם) */
input[type="url"]:not(:placeholder-shown),
input[type="tel"]:not(:placeholder-shown),
input[type="date"]:not(:placeholder-shown),
input[type="time"]:not(:placeholder-shown),
input[type="email"]:not(:placeholder-shown),
.wpcf7 input[type="url"]:not(:placeholder-shown),
.wpcf7 input[type="tel"]:not(:placeholder-shown),
.wpcf7 input[type="email"]:not(:placeholder-shown) {
	direction: ltr;
	text-align: right;
}
.wpcf7-form a,
.wpcf7-form [role="tab"],
.wpcf7-form [role="button"],
.wpcf7-form button:not(:disabled),
.wpcf7-form input[type="button"]:not(:disabled),
.wpcf7-form input[type="submit"]:not(:disabled),
.wpcf7-form input[type="image"]:not(:disabled),
.wpcf7-form input[type="reset"]:not(:disabled),
.wpcf7-form select:not(:disabled) {
	cursor: var(--y-interactive-cursor, pointer);
}
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
	cursor: var(--y-native-checkbox-cursor, pointer);
}
.wpcf7-form br {
	display: var(--y-br-display, none);
}
/* y-select layout – the widget JS builds its markup expecting
   a flex column wrapper with the error message ordered last */
.y-select-wrap {
	flex-direction: var(--y-select-wrap-flex-direction, column);
}
.y-select-wrap .label-error {
	order: var(--y-select-error-order, 2);
}
/* Anchors the absolutely-positioned floating label / error message */
.wpcf7-form-control-wrap {
	position: var(--y-control-wrap-position, relative);
	display: var(--y-control-wrap-display, block);
}
/* Floating label – full styling ships here since the label IS the
   form's own validation/state feedback, not a site-theme choice */
.inputs-label,
.wpcf7-form input[type="date"] ~ .inputs-label,
.wpcf7-form input[type="time"] ~ .inputs-label,
.val-is-empty:focus ~ .inputs-label {
	cursor: var(--y-label-cursor, text);
	position: var(--y-label-position, absolute);
	right: var(--y-label-right, 12px);
	top: var(--y-label-top, -8px);
	padding: var(--y-label-padding, 0 5px);
	transition: var(--y-label-transition, all 0.3s ease);
	color: var(--y-label-active-color, currentColor);
	font-size: var(--y-label-font-size, 13px);
	line-height: var(--y-label-line-height, 13px);
	opacity: var(--y-label-active-opacity, 1);
	visibility: var(--y-label-active-visibility, visible);
}
.upload-btn-wrap:not(.active) .inputs-label,
.val-is-empty ~ .inputs-label {
	overflow: var(--y-label-idle-overflow, hidden);
	color: var(--y-label-idle-color, #6b7280);
	font-size: var(--y-label-idle-font-size, 15px);
	top: var(--y-label-idle-top, 15px);
	right: var(--y-label-idle-right, 15px);
	opacity: var(--y-label-idle-opacity, 0);
	visibility: var(--y-label-idle-visibility, hidden);
}
.inputs-label span {
	position: var(--y-label-span-position, relative);
	z-index: var(--y-label-span-z-index, 1);
}
.inputs-label::before {
	content: "";
	background: var(--y-label-bg, #fff);
	width: var(--y-label-mask-width, 100%);
	height: var(--y-label-mask-height, 4px);
	position: var(--y-label-mask-position, absolute);
	right: var(--y-label-mask-right, 0);
	top: var(--y-label-mask-top, 5px);
	z-index: var(--y-label-mask-z-index, 0);
}
.val-is-empty ~ .inputs-label::before { background: var(--y-label-mask-hidden-bg, none); }
.val-is-empty:focus ~ .inputs-label::before { background: var(--y-label-bg, #fff); }
.hide-inputs-label { display: var(--y-label-hidden-display, none); }
/* Checkbox – full styling ships here too, same reasoning as the floating
   label: the custom box/checkmark IS the form's own feedback, not a
   site-theme choice. Hides the native input but keeps it clickable/focusable. */
.checkbox-wrap { margin-bottom: var(--y-checkbox-wrap-margin-bottom, 25px); }
.wpcf7-list-item { margin: var(--y-list-item-margin, 0); }
.wpcf7-acceptance, .wpcf7-checkbox { position: var(--y-checkbox-container-position, relative); }
.wpcf7-acceptance label, .wpcf7-checkbox label {
	cursor: var(--y-checkbox-label-cursor, pointer);
	display: var(--y-checkbox-label-display, flex);
	align-items: var(--y-checkbox-label-align, center);
}
.wpcf7-acceptance input[type="checkbox"],
.wpcf7-checkbox input[type="checkbox"] {
	position: var(--y-checkbox-input-position, absolute);
	opacity: var(--y-checkbox-input-opacity, 0);
	cursor: var(--y-checkbox-input-cursor, pointer);
}
.wpcf7-acceptance .wpcf7-list-item-label,
.wpcf7-checkbox .wpcf7-list-item-label {
	display: var(--y-checkbox-text-display, block);
	padding: var(--y-checkbox-text-padding, 0 30px 0 0);
	position: var(--y-checkbox-text-position, relative);
	color: var(--y-checkbox-label-color, inherit);
	font-size: var(--y-checkbox-text-font-size, 14px);
}
.wpcf7-acceptance .wpcf7-list-item-label::before,
.wpcf7-checkbox .wpcf7-list-item-label::before {
	content: "";
	width: var(--y-checkbox-box-size, 20px);
	height: var(--y-checkbox-box-size, 20px);
	border: var(--y-checkbox-border-width, 2px) var(--y-checkbox-border-style, solid) var(--y-checkbox-border-color, #ccc);
	border-radius: var(--y-checkbox-box-radius, 4px);
	position: var(--y-checkbox-box-position, absolute);
	right: var(--y-checkbox-box-right, 0);
	top: var(--y-checkbox-box-top, -2px);
	transition: var(--y-checkbox-box-transition, all 0.2s ease);
}
input[type="checkbox"].error ~ .wpcf7-list-item-label::before {
	border-color: var(--y-checkbox-error-border-color, red);
	background-color: var(--y-checkbox-error-bg, rgba(239, 68, 68, 0.08));
}
.wpcf7-acceptance .wpcf7-list-item-label::after,
.wpcf7-checkbox .wpcf7-list-item-label::after {
	content: "";
	width: var(--y-checkbox-mark-size, 12px);
	height: var(--y-checkbox-mark-size, 12px);
	background: var(--y-checkbox-checked-bg, currentColor);
	border-radius: var(--y-checkbox-mark-radius, 2px);
	position: var(--y-checkbox-mark-position, absolute);
	right: var(--y-checkbox-mark-right, 6px);
	top: var(--y-checkbox-mark-top, 4px);
	opacity: var(--y-checkbox-mark-opacity-off, 0);
	transition: var(--y-checkbox-mark-transition, all 0.2s ease);
}
.wpcf7-acceptance input[type="checkbox"]:checked ~ .wpcf7-list-item-label::before,
.wpcf7-checkbox input[type="checkbox"]:checked ~ .wpcf7-list-item-label::before {
	border-color: var(--y-checkbox-checked-border, currentColor);
	background-color: var(--y-checkbox-checked-box-bg, transparent);
}
.wpcf7-acceptance input[type="checkbox"]:checked ~ .wpcf7-list-item-label::after,
.wpcf7-checkbox input[type="checkbox"]:checked ~ .wpcf7-list-item-label::after {
	opacity: var(--y-checkbox-mark-opacity-on, 1);
}
/* Submit / loading state – pure display+position toggles driven by
   the "submitting" class the JS adds to the form, no color anywhere */
.submit-btn-wrap {
	display: var(--y-submit-wrap-display, block);
	position: var(--y-submit-wrap-position, relative);
	z-index: var(--y-submit-wrap-z-index, 0);
}
.submit-btn-wrap::after {
	content: "";
	display: var(--y-submit-clearfix-display, block);
	clear: var(--y-submit-clearfix-clear, both);
}
.submit-btn-wrap:has(.wpcf7-spinner)::before {
	content: "";
	display: var(--y-loader-overlay-display, none);
	width: var(--y-loader-overlay-width, 100%);
	height: var(--y-loader-overlay-height, 100%);
	position: var(--y-loader-overlay-position, absolute);
	right: var(--y-loader-overlay-right, 0);
	top: var(--y-loader-overlay-top, 0);
	z-index: var(--y-loader-overlay-z-index, 50000);
	align-items: var(--y-loader-overlay-align, center);
	justify-content: var(--y-loader-overlay-justify, center);
}
.submit-btn-wrap .wpcf7-spinner {
	display: var(--y-spinner-display, none);
	position: var(--y-spinner-position, absolute);
	left: var(--y-spinner-left, 50%);
	top: var(--y-spinner-top, 50%);
	z-index: var(--y-spinner-z-index, 50001);
	margin: var(--y-spinner-margin, 0);
	-webkit-transform: var(--y-spinner-transform, translate(-50%,-50%));
	transform: var(--y-spinner-transform, translate(-50%,-50%));
}
form.submitting .submit-btn-wrap .wpcf7-spinner,
form.submitting .submit-btn-wrap:has(.wpcf7-spinner)::before {
	display: var(--y-loader-active-display, block);
}