/*
 * The request dialog.
 *
 * A native <dialog>, so the browser supplies the top layer, focus trapping and
 * Escape. Everything here is the look.
 */

.sx-request {
	width: min( 560px, calc( 100vw - 32px ) );
	max-height: calc( 100vh - 48px );
	padding: 0;
	border: 0;
	border-radius: var( --sx-radius-lg );
	background: var( --sx-white );
	box-shadow: 0 24px 64px rgba( 17, 19, 24, 0.24 );
	color: var( --sx-text );
	overflow: visible;
}

/*
 * The dialog rises into place instead of appearing already there.
 *
 * Keyframes rather than a transition: a dialog is switched between display
 * none and block, and display cannot be transitioned — there is no "before"
 * state for the browser to move away from. An animation on the open state runs
 * the moment the element appears, which is exactly the moment wanted.
 *
 * 100px and 0.4s, matching the reference the office asked to follow.
 */
@keyframes sx-request-in {
	from {
		opacity: 0;
		transform: translateY( 100px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes sx-request-backdrop-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.sx-request[open] {
	animation: sx-request-in 0.4s ease both;
}

/*
 * The dim behind it. Near-opaque on purpose: the point of a dialog is that the
 * page stops competing for attention while a form is open, and a light wash
 * leaves the page legible enough to keep reading.
 */
.sx-request::backdrop {
	background: rgba( 17, 19, 24, 0.86 );
}

.sx-request[open]::backdrop {
	animation: sx-request-backdrop-in 0.4s ease both;
}

@media ( prefers-reduced-motion: reduce ) {
	.sx-request[open],
	.sx-request[open]::backdrop {
		animation: none;
	}
}

.sx-request__form {
	display: grid;
	gap: 18px;
	padding: 32px;
	max-height: calc( 100vh - 48px );
	overflow-y: auto;
	overscroll-behavior: contain;
}

.sx-request__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var( --sx-text-muted );
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background-color var( --sx-transition-fast ) var( --sx-ease ),
		color var( --sx-transition-fast ) var( --sx-ease );
}

.sx-request__close:hover {
	background: var( --sx-surface );
	color: var( --sx-text );
}

.sx-request__head {
	display: grid;
	gap: 10px;
	padding-right: 34px;
}

.sx-request__title {
	margin: 0;
	font-size: 1.4rem;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.sx-request__lead {
	margin: 0;
	color: var( --sx-text-secondary );
	font-size: 0.9375rem;
	line-height: 1.55;
}

/* What the office will be told, shown to the person telling it. */
.sx-request__context {
	margin: 0;
	padding: 12px 16px;
	border-radius: var( --sx-radius-md );
	background: var( --sx-brand-50 );
	font-size: 0.9375rem;
	line-height: 1.5;
	overflow-wrap: break-word;
}

.sx-request__context[ hidden ] {
	display: none;
}

.sx-request__context-label {
	color: var( --sx-text-muted );
	font-size: 0.8125rem;
}

.sx-request__context-value {
	display: block;
	margin-top: 2px;
	font-weight: 600;
	color: var( --sx-brand-text );
}

.sx-request__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 16px 18px;
}

.sx-request__field {
	position: relative;
	margin: 0;
	min-width: 0;
}

.sx-request__field--wide {
	grid-column: 1 / -1;
}

/*
 * The field's name sits inside the box and rises out of the way once there is
 * something to read under it.
 *
 * A real <label>, not a placeholder standing in for one: a placeholder is gone
 * the moment anyone types, and four filled boxes with nothing saying which is
 * which is a form people re-read before sending. This keeps the name on screen
 * and keeps the label a label for anything reading the page aloud.
 *
 * pointer-events:none so a tap on the word still lands in the field under it.
 */
.sx-request__field label {
	position: absolute;
	top: 24px;
	inset-inline-start: 15px;
	color: var( --sx-text-secondary );
	font-size: 0.9375rem;
	line-height: 1.4;
	pointer-events: none;
	transform-origin: left top;
	/*
	 * Slower than the theme's usual control timing, and deliberately so: this
	 * movement is watched, unlike a hover state that happens beside the eye.
	 * At the theme's 0.16s, and still at 0.26s, the label was in its new place
	 * before the travel registered as travel.
	 *
	 * ease-out rather than the theme's curve: the label should leave quickly
	 * and settle slowly, which is what makes a short distance read as a glide
	 * instead of a jump.
	 */
	transition: transform 0.5s cubic-bezier( 0.16, 1, 0.3, 1 ),
		color 0.5s cubic-bezier( 0.16, 1, 0.3, 1 );
}

/*
 * :has() rather than a sibling selector, so the label can keep coming first in
 * the markup — the order a screen reader wants — while still reacting to the
 * field after it. The empty test is the one-space placeholder each field
 * carries; :placeholder-shown is the only way CSS can ask "is this empty".
 */
.sx-request__field:has( input:focus ) label,
.sx-request__field:has( textarea:focus ) label,
.sx-request__field:has( input:not( :placeholder-shown ) ) label,
.sx-request__field:has( textarea:not( :placeholder-shown ) ) label {
	/*
	 * Both halves of the movement made larger than they were.
	 *
	 * The scale was always here, but at 0.78 over 14px, ending inside the
	 * field's own grey, the whole thing read as a nudge rather than as a word
	 * shrinking and rising out of the way. 0.72 over 18px is far enough that
	 * the size change is what you notice.
	 */
	transform: translateY( -18px ) scale( 0.72 );
	color: var( --sx-text-muted, var( --sx-text-secondary ) );
}

/* The box, the ground and the focus line come from .sx-form--filled in
   tokens.css — shared with the contacts and CV forms. Only the sizing that
   makes room for the floating label belongs to this form. */
.sx-request__field input,
.sx-request__field textarea {
	width: 100%;
	/* Room above the text for the label to land in. */
	padding: 24px 14px 7px;
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: inherit;
}

@media ( prefers-reduced-motion: reduce ) {
	.sx-request__field label {
		transition: none;
	}
}

/*
 * "Обов'язкове поле", under the two fields that are.
 *
 * Faded rather than removed: taking it out of the flow would shorten the field
 * the moment it is touched and shove everything under it up the screen, which
 * is a worse thing to do to someone in the middle of typing than a line of
 * small grey text is.
 *
 * Gone once the field has something in it as well as while it is focused —
 * telling a filled field it is required is noise.
 */
.sx-request__hint {
	display: block;
	margin-top: 4px;
	color: var( --sx-text-muted, var( --sx-text-secondary ) );
	font-size: 0.75rem;
	line-height: 1.3;
	transition: opacity 0.2s var( --sx-ease );
}

.sx-request__field:has( input:focus ) .sx-request__hint,
.sx-request__field:has( input:not( :placeholder-shown ) ) .sx-request__hint {
	opacity: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.sx-request__hint {
		transition: none;
	}
}

.sx-request__field textarea {
	resize: vertical;
}


.sx-request__consent {
	margin: 0;
}

.sx-request__consent label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --sx-text-secondary );
}

.sx-request__consent input {
	margin-top: 2px;
	flex: none;
}

.sx-request__consent a {
	color: var( --sx-brand-text );
	text-decoration: underline;
}

.sx-request__submit {
	margin: 0;
}

.sx-request__submit button {
	width: 100%;
}

/*
 * After a successful send the script hides the fields and leaves the thank-you.
 * The hidden attribute alone does not do it: display:grid on the group beats
 * the browser's own display:none for [hidden], so the fields stayed on screen
 * under the confirmation. An attribute selector outranks the class and settles it.
 */
.sx-request__grid[ hidden ],
.sx-request__consent[ hidden ],
.sx-request__submit[ hidden ] {
	display: none;
}

.sx-request__state {
	margin: 0;
	padding: 14px 18px;
	border-radius: var( --sx-radius-md );
	font-size: 0.9375rem;
	line-height: 1.5;
}

.sx-request__state--ok {
	border: 1px solid var( --sx-success-100 );
	background: var( --sx-success-50 );
}

.sx-request__state--err {
	border: 1px solid var( --sx-brand-200 );
	background: var( --sx-brand-50 );
	color: var( --sx-brand-text );
}

/* Off screen rather than display:none — a bot fills what it finds in the
   source, and this field is there to be filled. */
.sx-request__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
 * On a phone the form has to fit between the top of the screen and the bottom
 * of it, and it did not: 853px of content in a dialog capped at 764px, so the
 * send button sat below the fold behind a scroll nobody expects in a four-field
 * form. Every measurement below is a few pixels taken back from somewhere that
 * could spare them — nothing is removed, the fields keep their labels, and the
 * spacing stays even.
 */
@media ( max-width: 560px ) {
	.sx-request__form {
		gap: 14px;
		padding: 20px 18px;
	}

	.sx-request__head {
		gap: 8px;
	}

	.sx-request__title {
		font-size: 1.25rem;
	}

	.sx-request__lead {
		font-size: 0.875rem;
		line-height: 1.45;
	}

	/* Label and answer on one line: as a stacked pair this cost 71px to say
	   four words. */
	.sx-request__context {
		padding: 8px 12px;
		font-size: 0.875rem;
	}

	.sx-request__context-value {
		display: inline;
		margin-top: 0;
	}

	.sx-request__grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: 12px;
	}

	.sx-request__field label {
		top: 21px;
		inset-inline-start: 13px;
	}

	.sx-request__field:has( input:focus ) label,
	.sx-request__field:has( textarea:focus ) label,
	.sx-request__field:has( input:not( :placeholder-shown ) ) label,
	.sx-request__field:has( textarea:not( :placeholder-shown ) ) label {
		transform: translateY( -16px ) scale( 0.72 );
	}

	.sx-request__field input,
	.sx-request__field textarea {
		padding: 21px 12px 6px;
	}

	/*
	 * Three rows is a comfortable size for a message and an expensive one for a
	 * screen. Two rows still shows what is being typed, and the box grows if
	 * the visitor drags it.
	 */
	.sx-request__field textarea {
		min-height: 76px;
		height: 76px;
	}

	.sx-request__consent label {
		line-height: 1.4;
	}
}

/*
 * The short phones — an iPhone SE at 667 and the 640-tall Androids still in
 * use here. The measurements above get every current handset under the cap;
 * these two are 66 and 93 pixels over it, and the only things left worth
 * spending are the reassurance line and another row of the message box.
 *
 * The lead goes rather than the consent text or a field: it is the one part of
 * this dialog that is nice to read rather than needed to send, and on a screen
 * this short the form itself is the reassurance.
 *
 * Bounded by width as well as height so a laptop with a short window keeps its
 * copy — there the fields sit two to a row and the dialog was never close to
 * the edge.
 */
@media ( max-width: 560px ) and ( max-height: 720px ) {
	.sx-request__form {
		gap: 12px;
		padding: 16px 16px 18px;
	}

	.sx-request__lead {
		display: none;
	}

	.sx-request__field textarea {
		min-height: 58px;
		height: 58px;
	}
}