/* The signup modal. A file of its own rather than more rules in form.css, so a
   browser still holding a cached form.css from before the modal existed gets
   these anyway. */
.hsmn-modal {
	width: min( 40rem, calc( 100vw - 2rem ) );
	max-width: none;
	max-height: calc( 100vh - 2rem );
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: #fff;
	color: #324A6D;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, .25 );
	overflow: auto;
}

.hsmn-modal::backdrop {
	background: rgba( 20, 20, 20, .55 );
}

.hsmn-modal__header {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.5rem;
	background: #fff;
	border-bottom: 1px solid #C8D5DC;
}

.hsmn-modal__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
}

/* Astra styles every bare <button> transparent with white text; see the note
   in form.css. Both buttons here carry their own colours. */
.hsmn-modal .hsmn-modal__close {
	padding: .25rem .5rem;
	border: 0;
	background: transparent;
	color: #324A6D;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.hsmn-modal .hsmn-modal__close:hover,
.hsmn-modal .hsmn-modal__close:focus {
	background: transparent;
	color: var( --ast-global-color-6, #1b5e35 );
}

.hsmn-modal__body {
	padding: 1.5rem;
}

.hsmn-modal__body .hsmn-form {
	max-width: none;
}

.hsmn-modal__status {
	margin: 0 0 1rem;
}

.hsmn-modal .hsmn-modal__retry {
	background-color: var( --ast-global-color-6, #1b5e35 );
	color: #fff;
	border: 1px solid transparent;
	border-radius: 30px;
	padding: .8rem 1.75rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.hsmn-modal .hsmn-form__errors:focus {
	outline: 2px solid #b3261e;
	outline-offset: 2px;
}

@media ( max-width: 600px ) {
	.hsmn-modal {
		width: 100vw;
		height: 100vh;
		max-height: 100vh;
		/* dvh accounts for iOS Safari's toolbar, keeping the submit button above
		   it; vh above is the fallback for browsers that do not support dvh. */
		height: 100dvh;
		max-height: 100dvh;
		margin: 0;
		border-radius: 0;
	}
}