/**
 * The quote form's uploaded-file list and the button spinner.
 *
 * The fields themselves wear the compiled utilities. These few pieces are built
 * in JavaScript, where Tailwind cannot see them, so they are written out.
 *
 * @package GermanyAssignment
 */

/* the drop target, while something is being dragged over it */
.gah-drop.is-over {
	border-color: var( --rot-500 );
	background: var( --grad-red-soft );
}

/* ------------------------------------------------------- the file list */

.gah-file {
	display: grid;
	grid-template-columns: 1fr auto 96px 62px 28px;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var( --line );
	border-radius: var( --r-md, 12px );
	background: var( --grad-card );
	font-size: .8rem;
}

@media ( max-width: 620px ) {
	.gah-file {
		grid-template-columns: 1fr auto 28px;
		row-gap: 8px;
	}
	.gah-file-bar,
	.gah-file-state {
		grid-column: 1 / -1;
	}
	.gah-file-state {
		text-align: left;
	}
}

.gah-file-name {
	font-weight: 600;
	color: var( --ink );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gah-file-size {
	color: var( --slate-lt );
	font-size: .72rem;
	white-space: nowrap;
}

.gah-file-bar {
	display: block;
	height: 6px;
	border-radius: 99px;
	background: var( --line-2 );
	overflow: hidden;
}

.gah-file-bar i {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 99px;
	background: var( --grad-red );
	transition: width .18s linear;
}

.gah-file-state {
	font-size: .7rem;
	font-weight: 700;
	color: var( --slate-lt );
	text-align: right;
	white-space: nowrap;
}

.gah-file.is-done .gah-file-bar i { background: linear-gradient( 135deg, #1B7A49, #0F5231 ); }
.gah-file.is-done .gah-file-state { color: #0F5231; }

.gah-file.is-failed { border-color: #F1D5D4; }
.gah-file.is-failed .gah-file-bar i { background: var( --grad-red ); }
.gah-file.is-failed .gah-file-state { color: var( --rot-600 ); }

.gah-file-x {
	width: 24px;
	height: 24px;
	line-height: 1;
	font-size: 1.05rem;
	border: 1px solid var( --line );
	border-radius: 50%;
	background: #fff;
	color: var( --slate );
	cursor: pointer;
	transition: border-color .18s, color .18s, background .18s;
}

.gah-file-x:hover {
	border-color: var( --rot-500 );
	color: var( --rot-600 );
	background: var( --rot-050 );
}

/* ------------------------------------------------------- the date field */

/*
 * A date input shows the browser's own dd/mm/yyyy when it is empty, and there
 * is no way to change that text. So the visible field is an ordinary readonly
 * text input carrying the placeholder, and the real date input lies over it at
 * zero opacity — a click anywhere in the field lands on it and opens the
 * calendar, and its dd/mm/yyyy is never seen.
 */
.gah-date {
	position: relative;
	display: block;
}

.gah-date-face {
	cursor: pointer;
	pointer-events: none;
}

.gah-date-native {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
	background: transparent;
	color: transparent;
}

/* the whole calendar icon is the hit area on Chrome, not just the little glyph */
.gah-date-native::-webkit-calendar-picker-indicator {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}

/* the face has to wear the focus ring, since the thing being focused is invisible */
.gah-date:focus-within .gah-date-face {
	border-color: var( --rot-500 );
	background: #fff;
	box-shadow: 0 0 0 4px rgba( 180, 5, 2, .09 );
}

/* --------------------------------------------------- the button spinner */

.gah-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba( 255, 255, 255, .45 );
	border-top-color: #fff;
	border-radius: 50%;
	animation: gahSpin .7s linear infinite;
}

@keyframes gahSpin {
	to { transform: rotate( 360deg ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.gah-spinner { animation-duration: 2s; }
	.gah-file-bar i { transition: none; }
}

/* ------------------------------------------------- the wait after submit */

/*
 * The form posts to the order API and the API redirects, so the page sits
 * doing nothing visible for as long as that takes. This covers it, which is
 * both a progress signal and a guard against a second press.
 */
/*
 * Visible the moment it is in the document.
 *
 * It used to start at opacity 0 and fade in on the next animation frame — but
 * the browser begins navigating away as soon as the submit handler returns, so
 * that frame never painted and the overlay was there and invisible. An
 * animation runs from the first paint instead, with no frame to miss.
 */
.gah-submitting {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background: rgba( 12, 10, 10, .55 );
	-webkit-backdrop-filter: blur( 3px );
	backdrop-filter: blur( 3px );
	opacity: 1;
	animation: gahFade .16s ease both;
}

@keyframes gahFade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.gah-submitting-spinner {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	border: 4px solid rgba( 255, 255, 255, .28 );
	border-top-color: var( --gold-500, #F7E500 );
	animation: gahSpin .8s linear infinite;
}

.gah-submitting-text {
	font-size: 15px;
	font-weight: 800;
	color: #fff;
	letter-spacing: .01em;
	text-align: center;
	padding: 10px 22px;
	border-radius: 99px;
	background: rgba( 12, 10, 10, .45 );
	border: 1px solid rgba( 255, 255, 255, .14 );
}

@media ( prefers-reduced-motion: reduce ) {
	.gah-submitting { animation: none; }
	.gah-submitting-spinner { animation-duration: 2.4s; }
}