/* Reyal Form Guard front end. Colors, font and radius come from CSS variables set from the Brand tab. */

/* Character counter under textareas */
.elementor-widget-form .rfg-counter { margin-top: 4px; font-size: 11px; text-align: right; color: #706F6F; }

/* Pop-up notices: fixed on screen, outside the form, so the form never moves.
   Colors, font, size, corners, position and width are CSS variables set from the Messages tab. */
.rfg-toasts {
	position: fixed; top: var(--rfg-n-top, 112px); bottom: var(--rfg-n-bottom, auto); left: var(--rfg-n-left, 50%); right: var(--rfg-n-right, auto);
	transform: var(--rfg-n-tx, translateX(-50%)); z-index: 100000;
	width: min(var(--rfg-n-width, 540px), calc(100vw - 24px)); display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.rfg-toasts > * { pointer-events: auto; cursor: pointer; }
.rfg-toasts .elementor-message, .rfg-toasts .rfg-alert {
	position: relative; display: block; box-sizing: border-box; width: 100%; margin: 0 !important;
	padding: 16px 44px 16px var(--rfg-n-pad-l, 54px) !important; font-family: var(--rfg-n-font, var(--rfg-font, inherit)) !important;
	font-size: var(--rfg-n-size, 14px) !important; font-weight: var(--rfg-n-weight, 500);
	line-height: 1.5 !important; text-align: left !important; border: 1px solid; border-left-width: 4px;
	border-radius: var(--rfg-n-radius, 6px); box-shadow: var(--rfg-n-shadow, 0 18px 40px -12px rgba(27, 23, 18, .35)); animation: rfgIn .35s ease both;
}
.rfg-toasts .elementor-message::before, .rfg-toasts .rfg-alert::before {
	content: ""; position: absolute; left: 20px; top: 17px; width: 22px; height: 22px; background-color: currentColor; display: var(--rfg-n-icon, block);
	-webkit-mask: var(--rfg-ic) center / contain no-repeat; mask: var(--rfg-ic) center / contain no-repeat;
}
.rfg-toasts .elementor-message::after, .rfg-toasts .rfg-alert::after {
	content: "\00d7"; position: absolute; right: 14px; top: 9px; font-size: 22px; line-height: 1; opacity: .55;
}
/* Success */
.rfg-toasts .elementor-message.elementor-message-success {
	--rfg-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.4L6.6 12.2l1.4-1.4 2.8 2.8 5.2-5.2 1.4 1.4-6.6 6.6z'/%3E%3C/svg%3E");
	color: var(--rfg-ok-accent, #B8975A) !important; background-color: var(--rfg-ok-bg, #F7F5F0) !important; border-color: var(--rfg-ok-accent, #B8975A);
	-webkit-text-fill-color: var(--rfg-ok-text, #1B1712);
}
/* Error and validation */
.rfg-toasts .elementor-message.elementor-message-danger, .rfg-toasts .rfg-alert {
	--rfg-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
	color: var(--rfg-err-accent, #B3261E) !important; background-color: var(--rfg-err-bg, #FBEDEB) !important; border-color: var(--rfg-err-accent, #B3261E);
	-webkit-text-fill-color: var(--rfg-err-text, #7A1A14);
}
.rfg-toasts .rfg-alert-title { font-weight: 700; color: var(--rfg-err-text, #7A1A14); -webkit-text-fill-color: var(--rfg-err-text, #7A1A14); }
.rfg-toasts .rfg-alert ul { margin: 8px 0 0; padding: 0 0 0 18px; list-style: disc; }
.rfg-toasts .rfg-alert li { margin: 0 0 6px; padding: 0; font-size: inherit; line-height: 1.5; color: var(--rfg-err-text, #7A1A14); -webkit-text-fill-color: var(--rfg-err-text, #7A1A14); }
.rfg-toasts .rfg-alert li:last-child { margin-bottom: 0; }
.rfg-toasts .rfg-out { opacity: 0 !important; transform: translateY(-8px) !important; transition: opacity .3s ease, transform .3s ease !important; animation: none !important; }
@keyframes rfgIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* Pop-up mode: nothing inline inside the form (the words are in the notice) */
form[data-rfg-popup] .elementor-field-group .elementor-message,
form[data-rfg-popup] .elementor-field-group .elementor-help-inline { display: none !important; }

/* Field in error: red border, words are in the notice or under the field */
form[data-rfg] .elementor-field-group.elementor-error .elementor-field-textual { border-color: var(--rfg-err-accent, var(--rfg-danger, #B3261E)) !important; }
form[data-rfg] .elementor-field-group.elementor-error .elementor-field-subgroup input { border-color: var(--rfg-danger, #B3261E) !important; }
form[data-rfg] .elementor-field-group .rfg-inline { display: block; margin-top: 4px; font-size: 13px; color: var(--rfg-danger, #B3261E); }

@media (max-width: 767px) {
	.rfg-toasts { top: var(--rfg-n-top, 84px); }
	.rfg-toasts .elementor-message, .rfg-toasts .rfg-alert { padding: 14px 38px 14px var(--rfg-n-pad-l, 46px) !important; }
	.rfg-toasts .elementor-message::before, .rfg-toasts .rfg-alert::before { left: 14px; top: 15px; width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) { .rfg-toasts .elementor-message, .rfg-toasts .rfg-alert { animation: none; } }
