/* Shared mobile / small-screen layout. Loaded after each page's inline CSS. */

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

code,
.code-tag {
	word-break: break-all;
}

@media (max-width: 900px) {
	body {
		padding: 14px !important;
		max-width: 100% !important;
		margin: 0 auto !important;
	}

	header {
		flex-wrap: wrap !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 12px !important;
		padding-bottom: 16px !important;
		margin-bottom: 16px !important;
	}

	header .logo,
	.logo {
		font-size: 22px !important;
	}

	header nav,
	nav {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 8px 12px;
	}

	nav a {
		margin-left: 0 !important;
		margin-right: 0 !important;
		font-size: 13px;
	}

	.logout-btn,
	nav .logout-btn {
		margin-left: auto;
	}

	.wallet-box {
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
	}

	.wallet-address {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.page-title,
	.big {
		font-size: 24px !important;
	}

	.panel {
		padding: 16px !important;
		border-radius: 14px !important;
	}

	.controls {
		flex-direction: column;
		align-items: stretch !important;
	}

	.token-back-link {
		display: block;
		text-align: center;
	}

	.token-hero {
		flex-direction: column !important;
		text-align: center;
	}

	.token-hero-content {
		width: 100%;
	}

	.token-hero-meta {
		flex-direction: column;
		justify-content: center;
		gap: 6px !important;
	}

	.search-bar,
	.search-bar input,
	.controls select {
		width: 100% !important;
		min-width: 0 !important;
		flex: 1 1 auto !important;
	}

	.form-actions,
	.form-actions button,
	button.btn-primary {
		width: 100%;
		min-width: 0 !important;
	}

	#pendingBanner button {
		width: 100%;
	}

	.stepper {
		gap: 0;
	}

	.step {
		padding: 0 2px !important;
	}

	.step-label {
		font-size: 10px !important;
		line-height: 1.2;
	}

	.step-circle {
		width: 28px !important;
		height: 28px !important;
		font-size: 12px;
	}

	table.breakdown {
		min-width: 560px;
	}

	.container {
		grid-template-columns: 1fr !important;
		margin: 12px auto !important;
		gap: 14px !important;
	}

	.login-card {
		margin: 16px;
		padding: 24px !important;
		width: calc(100% - 32px) !important;
		box-sizing: border-box;
	}

	.token-hero {
		flex-direction: column !important;
		align-items: center !important;
		gap: 16px !important;
	}

	.token-hero .logo,
	.token-hero img.logo {
		width: 96px !important;
		height: 96px !important;
		align-self: center;
	}

	.badge-card {
		align-items: flex-start !important;
	}

	.site-footer-inner {
		flex-direction: column;
		align-items: flex-start !important;
	}
}

@media (max-width: 640px) {
	body {
		padding: 12px !important;
	}

	input,
	select,
	textarea,
	button {
		font-size: 16px !important;
	}

	.token-pair {
		display: none;
	}

	.market-table-wrap {
		border-radius: 12px;
		-webkit-overflow-scrolling: touch;
	}

	.market-table-wrap table {
		min-width: 0;
		font-size: 13px;
	}

	.market-table-wrap thead th:nth-child(1),
	.market-table-wrap tbody td:nth-child(1),
	.market-table-wrap thead th:nth-child(4),
	.market-table-wrap tbody td:nth-child(4),
	.market-table-wrap thead th:nth-child(5),
	.market-table-wrap tbody td:nth-child(5),
	.market-table-wrap thead th:nth-child(6),
	.market-table-wrap tbody td:nth-child(6) {
		display: none;
	}

	.market-table-wrap th,
	.market-table-wrap td {
		padding: 10px 8px !important;
		white-space: nowrap;
	}

	.action-cell {
		flex-direction: column;
		align-items: stretch !important;
		gap: 6px !important;
	}

	.action-cell .buy-btn,
	.action-cell .info-btn {
		width: 100%;
		justify-content: center;
		text-align: center;
		box-sizing: border-box;
	}

	.token-cell:hover .token-logo,
	.token-cell:hover .token-icon {
		transform: none !important;
		box-shadow: none !important;
	}

	.pagination {
		flex-wrap: wrap;
		gap: 8px !important;
	}

	.trades-table th,
	.trades-table td {
		padding: 10px 8px !important;
	}

	.process-warning {
		padding: 12px !important;
		font-size: 13px !important;
	}
}