/* Joe's Site Basics: forms. Plain on purpose: fonts, colors and buttons come from the theme. */
.joes-form { position: relative; }
.joes-form__field { margin: 0 0 1.1em; }
.joes-form__field > label,
.joes-form__field legend { display: block; font-weight: 600; margin-bottom: .3em; }
.joes-form fieldset.joes-form__field { border: 0; padding: 0; min-width: 0; }
.joes-form fieldset.joes-form__field label,
.joes-form__field--checkbox label { display: block; font-weight: normal; margin: .25em 0; }
.joes-form input[type="text"], .joes-form input[type="email"], .joes-form input[type="tel"],
.joes-form input[type="date"], .joes-form select, .joes-form textarea { width: 100%; max-width: 40rem; box-sizing: border-box; }
.joes-form__desc { display: block; font-size: .9em; opacity: .8; margin-bottom: .3em; }
.joes-form__req { color: #b32d2e; }
.joes-form__error { display: block; color: #b32d2e; font-size: .9em; }
.joes-form__error:empty { display: none; }
.joes-form [aria-invalid="true"] { outline: 2px solid #b32d2e; outline-offset: 1px; }
.joes-form__check { margin: 0 0 1em; }
.joes-form__status:empty { display: none; }
.joes-form__status[data-state="invalid"], .joes-form__status[data-state="failed"],
.joes-form__status[data-state="turnstile"], .joes-form__status[data-state="rate_limited"] { color: #b32d2e; }
.joes-form [hidden] { display: none !important; }

/* Photos: a row of thumbnails, each with its state and a way to take it back out. */
.joes-form__photos { list-style: none; margin: .6em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6em; }
.joes-form__photos li { position: relative; width: 6.5rem; font-size: .8em; }
.joes-form__photos img { display: block; width: 6.5rem; height: 6.5rem; object-fit: cover; border-radius: 6px; }
.joes-form__photos li:not([data-state]) img { opacity: .55; }
.joes-form__photos li[data-state="failed"] img { opacity: .35; }
.joes-form__photos li[data-state="failed"] .joes-form__photo-note { color: #b32d2e; }
.joes-form__photo-note { display: block; margin-top: .25em; line-height: 1.3; }
.joes-form__photo-remove { position: absolute; top: .3em; right: .3em; font-size: .85em; padding: .15em .45em; line-height: 1.2; cursor: pointer; }