:root {
		--bg: #f5f5f5;
		--surface: #ffffff;
		--text: #222222;
		--muted: #6b7280;
		--accent: #2563eb;
		--accent-hover: #1d4ed8;
		--on-accent: #ffffff;
		--border: #dddddd;
		--shadow: rgba(15, 23, 42, 0.08);
		--focus-ring: rgba(37, 99, 235, 0.35);
		--radius-lg: 14px;
		--radius-md: 10px;
		--radius-sm: 8px;
		--radius-pill: 999px;
		--space-1: 4px;
		--space-2: 8px;
		--space-3: 12px;
		--space-4: 16px;
		--space-5: 20px;
}

[data-theme="dark"] {
		--bg: #333333;
		--surface: #1a1a1a;
		--text: #ffffff;
		--muted: #9ca3af;
		--accent: #7dd3fc;
		--accent-hover: #bae6fd;
		--on-accent: #0c4a6e;
		--border: #555555;
		--shadow: rgba(0, 0, 0, 0.4);
		--focus-ring: rgba(125, 211, 252, 0.45);
}

body {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
		text-align: center;
		padding: var(--space-5);
		background-color: var(--bg);
		color: var(--text);
}

.container {
		background-color: var(--surface);
		padding: var(--space-5);
		border-radius: var(--radius-lg);
		box-shadow: 0 1px 2px var(--shadow), 0 8px 24px var(--shadow);
		width: 100%;
		max-width: 400px;
		margin: 0 auto;
}

.tagline {
		color: var(--muted);
		margin: var(--space-2) 0 var(--space-4);
		font-size: 14px;
}

.search-row {
		position: relative;
		display: flex;
		align-items: flex-start;
		gap: var(--space-2);
		margin-bottom: var(--space-4);
}

.autocomplete {
		flex: 1 1 auto;
		min-width: 72px;
		width: auto;
}

input[type="text"], button {
		width: 100%;
		padding: var(--space-3);
		border: 1px solid var(--border);
		border-radius: var(--radius-md);
		box-sizing: border-box;
		background-color: var(--surface);
		color: var(--text);
		font-size: 16px;
}

button {
		background-color: var(--accent);
		color: var(--on-accent);
		font-weight: 600;
		border-color: transparent;
		cursor: pointer;
}

button:hover {
		background-color: var(--accent-hover);
}

.form-actions {
		display: flex;
		flex: 0 0 auto;
		gap: var(--space-2);
}

.form-actions button {
		flex: 0 0 auto;
		width: auto;
		white-space: nowrap;
}

.secondary-button {
		background-color: var(--surface);
		color: var(--text);
		border: 1px solid var(--border);
		font-weight: 500;
}

.secondary-button:hover {
		background-color: var(--surface);
		border-color: var(--accent);
		color: var(--accent);
}

.info-header {
		display: flex;
		justify-content: flex-end;
		margin-bottom: var(--space-2);
}

.copy-button {
		width: auto;
		font-size: 13px;
		padding: var(--space-1) var(--space-3);
}

input[type="text"]:focus-visible,
button:focus-visible,
.suggestion-item:focus-visible {
		outline: none;
		border-color: var(--accent);
		box-shadow: 0 0 0 3px var(--focus-ring);
}

.theme-toggle {
		position: fixed;
		top: var(--space-3);
		right: var(--space-3);
		width: auto;
		cursor: pointer;
		background: var(--surface);
		border: 1px solid var(--border);
		padding: var(--space-2);
		border-radius: var(--radius-pill);
		line-height: 0;
		color: var(--text);
		box-shadow: 0 1px 2px var(--shadow);
}

.theme-toggle:hover {
		background-color: var(--surface);
		border-color: var(--accent);
}

.theme-toggle:focus-visible {
		outline: none;
		border-color: var(--accent);
		box-shadow: 0 0 0 3px var(--focus-ring);
}

.theme-toggle svg {
		width: 24px;
		height: 24px;
}

.theme-toggle .icon-sun {
		display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
		display: block;
}

[data-theme="dark"] .theme-toggle .icon-moon {
		display: none;
}

#suggestions {
		position: absolute;
		top: calc(100% + var(--space-2));
		left: 0;
		right: 0;
		z-index: 99;
		text-align: left;
}

/* Positioned against .search-row (not .autocomplete) so the dropdown spans
   the full row -- input plus buttons -- instead of squeezing into just the
   input's width, and opens below the whole row instead of over the buttons. */

#suggestions:not(:empty) .suggestions-container {
		background-color: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius-md);
		box-shadow: 0 4px 16px var(--shadow);
		overflow: hidden;
}


.suggestion-item {
		display: block;
		padding: var(--space-2) var(--space-3);
		cursor: pointer;
}

.suggestion-title {
		display: block;
}

.suggestion-sub {
		display: block;
		font-size: 12px;
		color: var(--muted);
}

.suggestion-item:hover,
.suggestion-item.active {
		background-color: var(--bg);
}

#airportInfo {
		margin-top: var(--space-4);
		text-align: left;
		line-height: 1.6;
}

.error-message {
		color: #b00020;
}

[data-theme="dark"] .error-message {
		color: #ff8a80;
}

#recentSearches {
		margin-bottom: var(--space-2);
		line-height: 2;
}

.recent-label {
		color: var(--muted);
		font-size: 13px;
		margin-right: var(--space-2);
}

.recent-chip {
		display: inline-block;
		width: auto;
		padding: var(--space-1) var(--space-3);
		margin: 0 var(--space-1) var(--space-1) 0;
		border: 1px solid var(--border);
		border-radius: var(--radius-pill);
		background-color: var(--surface);
		color: var(--text);
		font-size: 13px;
		font-weight: 400;
}

.recent-chip:hover {
		border-color: var(--accent);
		color: var(--accent);
		background-color: var(--surface);
}

.recent-chip:focus-visible {
		border-color: var(--accent);
}

.site-footer {
		margin-top: var(--space-5);
		font-size: 12px;
		color: var(--muted);
}

@media screen and (max-width: 600px) {
		.container {
				width: 90%;
		}
}

@media screen and (max-width: 400px) {
		.container {
				padding: var(--space-4);
		}

		.form-actions button {
				padding: var(--space-3) var(--space-2);
				font-size: 14px;
		}
}

@media (prefers-reduced-motion: no-preference) {
		input[type="text"],
		button,
		.suggestion-item {
				transition: background-color 120ms ease, border-color 120ms ease,
						color 120ms ease, box-shadow 120ms ease;
		}
}