/* Revolv Forms, front end.

   Every selector is wrapped in :where(), which gives it no weight at all, so
   one ordinary rule in a theme wins without !important. This sheet sets
   layout and states; colours and type are inherited from the theme. It can be
   switched off in Forms > Settings when a theme styles forms itself. */

:where(.rvf) { max-width: 100%; }
:where(.rvf) *,
:where(.rvf) *::before,
:where(.rvf) *::after { box-sizing: border-box; }

:where(.rvf-heading) { margin: 0 0 1.25em; }
:where(.rvf-title) { margin: 0 0 .4em; }
:where(.rvf-description) { margin: 0; }

:where(.rvf-fields) { display: flex; flex-direction: column; gap: 1.1em; }
:where(.rvf-field) { margin: 0; padding: 0; border: 0; min-width: 0; }
:where(.rvf-field) > :where(label, legend, .rvf-label) { display: block; margin: 0 0 .35em; padding: 0; font-weight: 600; }
:where(.rvf-required) { color: #b32d2e; margin-left: .15em; }
/* A hidden label is still read out by a screen reader. */
:where(.rvf-sr) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

:where(.rvf-input-wrap) { display: block; }
:where(.rvf) :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea) {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: .6em .75em;
	font: inherit;
	line-height: 1.4;
	color: inherit;
	background: #fff;
	border: 1px solid #8c8f94;
	border-radius: 4px;
}
:where(.rvf) :where(textarea) { min-height: 8em; resize: vertical; }
:where(.rvf) :where(select[multiple]) { min-height: 7em; }
:where(.rvf) :where(input, select, textarea, button):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Name and address: parts side by side, stacked on a phone. */
:where(.rvf-field-name, .rvf-field-address) :where(.rvf-input-wrap) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75em; }
:where(.rvf-sub-street, .rvf-sub-line2, .rvf-sub-full),
:where(.rvf-field-name) :where(.rvf-input-wrap) > :where(input) { grid-column: 1 / -1; }
:where(.rvf-sub) { display: block; min-width: 0; }
:where(.rvf-sublabel) { display: block; margin-top: .25em; font-size: .85em; opacity: .8; }
/* A sub-label set above its box ("Full name") gets its gap underneath. */
:where(.rvf-sub) > :where(.rvf-sublabel:first-child) { margin: 0 0 .25em; }
:where(.rvf-required-text) { font-weight: 400; font-style: italic; }
@media (max-width: 480px) {
	:where(.rvf-field-name, .rvf-field-address) :where(.rvf-input-wrap) { grid-template-columns: minmax(0, 1fr); }
}

:where(.rvf-choices) { display: flex; flex-direction: column; gap: .45em; margin: 0; padding: 0; list-style: none; }
/* Tick boxes beside their words. Left to the theme on forms drawn with
   Gravity's class names: themes built for Gravity already lay these out, and
   a second set of rules fights theirs. */
:where(.rvf:not(.gform_wrapper)) :where(.rvf-choice),
:where(.rvf:not(.gform_wrapper)) :where(.rvf-field-consent) :where(.rvf-input-wrap) { display: flex; align-items: flex-start; gap: .55em; }
:where(.rvf:not(.gform_wrapper)) :where(.rvf-choice, .rvf-field-consent) :where(input) { flex: 0 0 auto; margin: .25em 0 0; }
:where(.rvf:not(.gform_wrapper)) :where(.rvf-choice, .rvf-field-consent) :where(label) { margin: 0; font-weight: 400; }

:where(.rvf-desc, .rvf-file-rules) { display: block; margin: .35em 0 0; font-size: .875em; opacity: .8; }

/* Problems. The red is dark enough to pass 4.5:1 on white. */
:where(.rvf-error) { margin: .35em 0 0; font-size: .875em; font-weight: 600; color: #b32d2e; }
:where(.rvf-has-error) :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { border-color: #b32d2e; }
:where(.rvf-status) { margin: 0 0 1.1em; padding: .75em 1em; border-left: 4px solid #b32d2e; background: #fcf0f1; color: #50191a; }
:where(.rvf) :where([hidden]) { display: none; }

:where(.rvf-footer) { margin: 1.4em 0 0; }
:where(.rvf-submit) { cursor: pointer; }
:where(.rvf-submit):disabled { cursor: progress; opacity: .65; }
:where(.rvf-sending) :where(.rvf-fields) { opacity: .6; transition: opacity .15s; }
:where(.rvf-turnstile) { margin: 1.1em 0 0; min-height: 65px; }

:where(.rvf-confirmation) { padding: 1em 1.25em; border-left: 4px solid #1a7f37; background: #edfaef; color: #0f3d1c; }
:where(.rvf-confirmation):focus { outline: 0; }
:where(.rvf-confirmation) > :where(:first-child) { margin-top: 0; }
:where(.rvf-confirmation) > :where(:last-child) { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	:where(.rvf-sending) :where(.rvf-fields) { transition: none; }
}