/* ElevenMaps forms: place suggestions, results and the order form. Colours come from the Night Atlas palette set in Kadence. */
.em-field--place { position: relative; }
.em-suggest { position: absolute; z-index: 20; left: 0; right: 0; margin: 2px 0 0; padding: 4px; list-style: none; background: var(--global-palette9, #F3EEE4); border: 1px solid var(--global-palette7, #D3CAB8); border-radius: 10px; box-shadow: 0 16px 32px -16px rgba(15, 22, 48, .35); max-height: 15rem; overflow-y: auto; }
.em-suggest li { padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: .9375rem; color: var(--global-palette4, #1B2238); }
.em-suggest li.is-active, .em-suggest li:hover { background: var(--global-palette3, #0F1630); color: var(--global-palette9, #F3EEE4); }
.em-suggest .em-suggest__none { cursor: default; color: var(--global-palette5, #5A6178); }
.em-suggest .em-suggest__none:hover { background: none; color: var(--global-palette5, #5A6178); }
.em-form input.is-invalid { border-color: #A3412E; }
/* A problem ("Choose your birth place from the list.", a missing field, a 429) must be impossible to miss:
   plain, unstyled text here was easy to submit past without noticing (DECISIONS #48). */
.em-form__status:not(:empty) { margin: 10px 0 0; font-weight: 600; color: #A3412E; }
.em-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.em-btn--link { display: inline-block; text-align: center; text-decoration: none; width: auto; }
.em-form__submit .em-btn:disabled { opacity: .6; cursor: progress; }

.em-result { background: var(--global-palette9, #F3EEE4); color: var(--global-palette4, #1B2238); border-radius: 10px; padding: 28px; margin-top: 24px; }
/* The tool sits in a dark section: headings must not inherit its light text colour. */
.em-result h2, .em-result h3, .em-result h4 { color: var(--global-palette3, #0F1630); }
.em-result__title { margin: 0 0 14px; font-size: 1.75rem; }
.em-result__title:focus { outline: none; }
.em-result__map { background: var(--global-palette3, #0F1630); border-radius: 10px; padding: 10px; }
.em-result__map svg { display: block; width: 100%; height: auto; }
.em-result__sub { margin: 26px 0 10px; font-size: 1.25rem; }
.em-result__places { list-style: none; counter-reset: p; margin: 0; padding: 0; }
.em-result__places li { counter-increment: p; position: relative; padding: 0 0 18px 44px; margin: 0 0 18px; border-bottom: 1px solid var(--global-palette7, #D3CAB8); }
.em-result__places li:last-child { border-bottom: 0; margin-bottom: 0; }
.em-result__places li::before { content: counter(p); position: absolute; left: 0; top: -4px; font-family: Gloock, Georgia, serif; font-size: 2rem; line-height: 1; color: var(--global-palette1, #8A6420); }
.em-result__places h4 { margin: 0 0 2px; font-size: 1.25rem; }
.em-result__places h4 small { font: 400 .875rem "Work Sans", sans-serif; color: var(--global-palette5, #5A6178); }
.em-result__places p { margin: 0 0 6px; color: var(--global-palette4, #1B2238); }
.em-result__line { font-weight: 600; font-size: .9375rem; color: var(--global-palette3, #0F1630); }
.em-result__cta { background: var(--global-palette3, #0F1630); color: var(--global-palette9, #F3EEE4); border-radius: 10px; padding: 22px; margin: 22px 0 12px; }
.em-result__cta p { margin: 0 0 14px; color: var(--global-palette11, #B8BED0); }
.em-note { color: var(--global-palette5, #5A6178); }
.em-result__cta .em-btn { background: var(--global-palette2, #D9B56A); color: var(--global-palette3, #0F1630); }
.em-note { font-size: .875rem; color: var(--global-palette5, #5A6178); margin: 10px 0 0; }
@media (max-width: 767px) { .em-result { padding: 20px 16px; } }

.em-opt { font-weight: 400; color: var(--global-palette11, #B8BED0); }
.em-result__actions { margin: 18px 0 8px; }
.em-result__actions .em-btn--link { background: var(--global-palette3, #0F1630); color: var(--global-palette9, #F3EEE4); }
.em-link-button { background: none; border: 0; padding: 0; margin-top: 12px; font: inherit; color: var(--global-palette1, #8A6420); text-decoration: underline; cursor: pointer; }

/* Date and time side by side need room: let the columns shrink, and stack them on narrow phones (the native time field is wide). */
.em-form .em-form__row--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.em-form .em-form__row--two input { min-width: 0; max-width: 100%; box-sizing: border-box; }
@media (max-width: 520px) { .em-form .em-form__row--two { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* free PDF offer under the map result */
.em-pdf { background: var(--global-palette8, #E9E2D3); border-radius: 10px; padding: 20px 22px; margin: 22px 0 8px; }
.em-pdf .em-result__sub { margin-top: 0; }
.em-pdf .em-form__status { color: var(--global-palette4, #1B2238); }