/* === imports === */

@import "normalize.css";

/* === constants === */

:root {
	--border-gray: 1px solid var(--color-border-gray);
	--border-radius: 1.5rem;
	--btn-blue: rgb(0, 130, 200);
	--btn-red: rgb(186, 36, 36);
	--btn-white: white;
	--color-bg-blue: #2962ff;
	--color-bg-green: #2e982e;
	--color-bg-purple: #623cb9;
	--color-bg-red: #cb3333;
	--color-bg: rgb(10 12 14);
	--color-blue-light: #acf3f2;
	--color-blue: #00fffc;
	--color-border-gray: rgb(138 145 158 / 15%);
	--color-card-bg: rgb(20 22 24);
	--color-subcard-bg: rgb(4 30 40);
	--color-text-gray: #aaa;
	--color-text-green: lightgreen;
	--color-text-orange: rgb(255 190 71);
	--color-text-red: rgb(255, 158, 158);
	--color-text: rgb(225 225 225);
	--font-mono:
		ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
		"Courier New", monospace;
	--font-system: system-ui, sans-serif;
	--input-bg: rgb(51 53 61);
	--input-disabled-text-color: #666;
	--input-focus-border-color: rgb(87 139 250);
	--input-hover-bg: rgb(59 61 69);
	--input-placeholder-text-color: #777;
	--max-width-page-regular: 1440px;
	--nav-bar-height: 62px;
	--padding: 0.67em 1.1em;
	--radius: 0.5em;
	--screen-large: 1100px;
	--screen-medium: 700px;
	--screen-small: 420px;
}

/* === resets === */

* {
	margin: 0;
	border: 0;
	box-sizing: border-box;
	font-family: var(--font-mono);
	color: var(--color-text);
	text-decoration: none;
	font-size: 1rem;
}

body {
	background-color: var(--color-bg);
}

h1,
h2,
h3,
h4,
h5,
button,
input {
	padding: 0;
	margin: 0;
}

/* === utility classes === */

.address {
	word-break: break-all;
}
.break-all {
	word-break: break-all;
}
.break-any {
	overflow-wrap: anywhere;
}
.nowrap {
	white-space: nowrap;
}
.center-element {
	margin: 0 auto;
}
.center-text {
	text-align: center;
}
.cursor-pointer {
	cursor: pointer;
}
.success {
	overflow-wrap: anywhere;
	color: var(--color-text-green);
}
.text-green {
	color: var(--color-text-green);
}
.text-orange {
	color: var(--color-text-orange);
}
.text-red {
	color: var(--color-text-red);
}

.error {
	overflow-wrap: anywhere;
	color: var(--color-text-red);
}

.icon {
	height: 1.7rem;
	width: 1.7rem;
	fill: var(--color-text);
	&:hover {
		fill: var(--color-blue);
		cursor: pointer;
	}
	&.item-chosen {
		fill: rgb(0 255 0);
	}
	&.item-verified {
		fill: #eac742;
	}
}

.hide-scrollbar {
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* Internet Explorer 10+ */
	&::-webkit-scrollbar {
		/* WebKit browsers (Chrome, Safari, newer versions of Opera) */
		display: none;
	}
}

/* === shared styles === */

.page-description,
.section-title,
.section-description,
.card-title,
.card-section {
	overflow-wrap: anywhere;
}

.page-description,
.section-description,
.card-section {
	line-height: 1.35em;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.page-description,
.section-description,
.card-section {
	width: 100%;
}

.page-description {
	text-align: center;
}

.page-description,
.section-description,
.card-section,
.card {
	a:not(.btn) {
		color: var(--color-blue-light);
		&:hover {
			text-decoration: underline;
			cursor: pointer;
		}
	}
}

/* === layout === */

header {
	display: flex;
	align-items: center;
	justify-content: right;
	gap: 1rem 2.5rem;
	padding: 0 1.25rem;
	height: var(--nav-bar-height);
	width: 100%;
	overflow-x: scroll;
	overflow-y: hidden;
	position: sticky;
	top: 0;
	left: 0;
	user-select: none;
	background-color: var(--color-bg);
	border-bottom: 1px solid var(--color-border-gray);
	z-index: 1;
	.header-item {
		&:first-child {
			flex-grow: 1;
			position: relative;
			.glitch,
			.glitch span {
				font-size: 1.5rem;
				font-weight: bold;
				letter-spacing: 0.02em;
			}
		}
		display: inline-block;
	}
	.header-network-label {
		position: absolute;
		margin-left: 0.3rem;
		font-size: 0.7rem;
		font-weight: bold;
		color: yellow;
		text-transform: uppercase;
	}
}

footer {
	padding: 3em 0 2em;
	display: flex;
	justify-content: space-between;
}

.page-regular {
	max-width: var(--max-width-page-regular);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 3rem;
	padding: 2rem 2rem 8rem;
	@media (max-width: 700px) {
		/* dup: screen-medium */
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	.page-title {
		font-size: 2rem;
		font-weight: bold;
		margin: 0 auto;
		text-align: center;
		&:first-of-type {
			padding-top: 1rem;
		}
	}
	.page-section {
		display: flex;
		flex-direction: column;
		align-items: start;
		gap: 1.75rem;
		.section-title {
			color: white;
			font-size: 1.75em;
			font-weight: bold;
			padding: 0 0.25rem;
		}
		.section-description {
			padding: 0 0.25rem;
		}
	}
}

.section-header,
.card-header {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: start;
	gap: 1.5rem;

	&.column-on-small {
		@media (max-width: 420px) {
			/* dup: screen-small */
			flex-direction: column-reverse;

			.auction-header-info,
			.card-toggle {
				width: 100%;
				justify-content: space-between;
			}

			.card-toggle {
				justify-content: center;
			}
		}
	}

	.flex-grid & {
		flex-direction: column-reverse;

		.auction-header-info,
		.card-toggle {
			width: 100%;
			justify-content: space-between;
		}

		.card-toggle {
			justify-content: center;
		}
	}

	.auction-header-info,
	.card-toggle {
		display: flex;
		align-items: center;
		gap: 1.5rem;
	}

	.card-toggle {
		.header-label {
			border: var(--border-gray);
			cursor: pointer;
			&.selected {
				cursor: default;
			}
			&.selected,
			&:hover {
				background-color: var(--color-bg-blue);
				border-color: var(--color-bg-blue);
				color: white;
			}
		}
	}

	.header-label {
		text-align: center;
		padding: 0.3em 0.6em;
		font-size: 0.9em;
		color: #bbb;
		background-color: var(--color-border-gray);
		border-radius: var(--border-radius);
		font-weight: bold;
		white-space: nowrap;

		&.canceled {
			background-color: var(--color-bg-red);
			color: white;
		}
		&.live {
			background-color: var(--color-bg-green);
			color: white;
		}
		&.top-bid {
			color: var(--color-text);
		}
		&.empty {
			visibility: hidden;
		}
	}
}

.tabs-container {
	width: 100%;
	.tabs-header {
		display: flex;
		flex-direction: row;
		gap: 1rem 2.5rem;
		flex-wrap: wrap;
		padding: 1rem 0.25rem 0;
		width: 100%;
		font-size: 1.1em;
		line-height: 1em;
		justify-content: center;
		@media (max-width: 420px) {
			/* dup: screen-small */
			column-gap: 0;
			justify-content: space-around;
		}
		.tab-title {
			cursor: pointer;
			font-weight: bold;
			text-transform: uppercase;
			display: flex;
			align-items: center;
			.tab-text {
				border-bottom: 2px solid transparent;
			}
			&.selected {
				.tab-text {
					color: var(--color-blue);
					border-bottom: 2px solid var(--color-blue);
				}
				.tab-icon svg {
					fill: var(--color-blue);
				}
			}
		}
	}
	.tabs-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		padding-top: 1.5rem;
	}
}

.grid,
.flex-grid {
	gap: 2rem;
	.card.grid-item {
		padding: 1.5rem;
	}
	@media (max-width: 1100px) {
		/* dup: screen-large */
		gap: 1.5rem;
		.card.grid-item {
			padding: 1.5rem;
		}
	}

	.card.grid-item {
		&:hover {
			cursor: pointer;
			background-color: var(--color-border-gray);
		}
		&.chosen {
			border-color: rgb(0 255 0 / 50%);
		}
		.item {
			.icon.item-chosen,
			.icon.item-verified {
				position: absolute;
				top: -4%;
				right: -4%;
				height: 18%;
				width: 18%;
				max-width: 55px;
				max-height: 55px;
			}
		}
	}
}

.flex-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;

	.card {
		flex: 1 1 280px; /* grow, shrink, basis */
		.card-title,
		.more-items {
			text-align: center;
			align-self: center;
		}
	}

	.filler-card {
		height: 0;
		padding: 0;
		margin: 0;
		visibility: hidden;
	}

	/* compensate for the extra gap added by stacked .filler-card's */
	@media (max-width: 599px) {
		margin-bottom: -4rem;
	}
	@media (min-width: 600px) {
		margin-bottom: -3rem;
	}
	@media (min-width: 952px) {
		margin-bottom: -2rem;
	}
	@media (min-width: 1280px) {
		margin-bottom: -1rem;
	}
}

.grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);

	@media (max-width: 1100px) {
		/* dup: screen-large */
		grid-template-columns: repeat(3, 1fr);
	}
	@media (max-width: 700px) {
		/* dup: screen-medium */
		grid-template-columns: repeat(2, 1fr);
	}
	@media (max-width: 420px) {
		/* dup: screen-small */
		grid-template-columns: repeat(1, 1fr);
	}
}

.grid-selector {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.flex-grid,
.grid,
.card-list {
	&.loading {
		opacity: 0.4;
		cursor: wait;
		* {
			pointer-events: none;
		}
	}
}

/* === cards === */

.card-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
}

.card {
	background-color: var(--color-card-bg);
	border-radius: var(--border-radius);
	border: var(--border-gray);
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 2rem;
	gap: 1.5rem;
	@media (max-width: 700px) {
		/* dup: screen-medium */
		padding: 1.5rem;
	}
	.card-title {
		display: flex;
		align-items: center;
		gap: 0.5em;
		font-size: 1.3em;
		font-weight: bold;
		line-height: 1.2em;
		.icon {
			&:hover {
				cursor: default;
				fill: var(--color-text);
			}
		}
	}
	&.disabled {
		opacity: 0.4;
		background-color: #333;
		cursor: default;
		pointer-events: none;
	}
}

.card.subcard {
	background-color: var(--color-subcard-bg);
}

.card-spinner {
	position: relative;
	color: transparent;
	pointer-events: none;

	&::after {
		/* dup: spinner */
		content: "";
		position: absolute;
		left: calc(50% - 0.6em - 0.085em);
		top: calc(50% - 0.6em - 0.085em);
		width: 1.2em;
		height: 1.2em;
		border: 0.17em solid white;
		border-radius: 50%;
		border-top-color: transparent;
		animation: spin 0.8s linear infinite;
	}
}

.item {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
	position: relative;

	.item-img {
		position: relative;
		width: 100%;
		padding-top: 50%; /* creates a 1:1 aspect ratio even when the image src is broken */
		padding-bottom: 50%; /* creates a 1:1 aspect ratio even when the image src is broken */
		text-align: center;
		border-radius: 5%;
		img {
			position: absolute;
			top: 0;
			left: 0;
		}
	}

	.item-info {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 1rem;
		.item-button {
			.btn {
				width: 100%;
			}
		}
	}
}

.item,
.chosen-item {
	.item-img {
		img {
			width: 100%;
			height: 100%;
			border-radius: 5%;
			object-fit: cover;
			background-color: var(--color-bg);
			&.no-image {
				background-color: #999;
			}
		}
	}
}

.slim-list {
	margin: 0 auto;
	width: 100%;
}

.card.slim {
	padding: 1.5rem;
	gap: 1rem;
	.card-body {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		gap: 1rem;
		@media (max-width: 420px) {
			/* dup: screen-small */
			flex-direction: column;
		}
	}
	&.tx-create,
	&.tx-finalize {
		border-left: 2px solid #4caf50;
	}
	&.tx-bid {
		border-left: 2px solid #2196f3;
	}
	&.tx-cancel {
		border-left: 2px solid #f44336;
	}
	&.tx-set-pay-addr {
		border-left: 2px solid #ff9800;
	}
	.card-title {
		font-size: 1.2em;
	}
}

.card.compact {
	max-width: 550px;
	margin: 0 auto;
}

a.card,
.card.link {
	&:hover {
		cursor: pointer;
		background-color: var(--color-border-gray);
	}
}

.card-details {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0 auto;
	width: 100%;
	@media (max-width: 700px) {
		/* dup: screen-medium */
		max-width: 100%;
	}

	.detail {
		display: flex;
		justify-content: space-between;
		padding: 0.25rem 0;
		gap: 1rem;
		align-items: flex-start;
		&.verified {
			align-items: center;
		}

		.label {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			font-weight: bold;
			color: var(--color-text-gray);
			flex-shrink: 0;
		}

		.value {
			display: flex;
			align-items: center;
			text-align: right;
			gap: 0.5rem;
			.icon {
				flex-shrink: 0;
			}
		}

		@media (max-width: 700px) {
			/* dup: screen-medium */
			flex-direction: column;
			align-items: flex-start;
			gap: 0.25rem;
			&.verified {
				align-items: flex-start;
			}
			.value {
				text-align: left;
			}
		}
	}
}

/* === various components === */

form,
.form {
	display: flex;
	flex-direction: column;
	gap: 2em;
	margin: 0 auto;
	width: 100%;
	@media (max-width: 700px) {
		/* dup: screen-medium */
		width: 100%;
	}
	.form-section {
		display: flex;
		flex-direction: column;
		gap: 2em;
		.section-toggle {
			cursor: pointer;
			user-select: none;
		}
	}
	.chosen-items {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		.card-list {
			gap: 0.5rem;
			.chosen-item {
				display: flex;
				gap: 1rem;
				flex-direction: row;
				align-items: center;
				.item-img {
					img {
						border: var(--border-gray);
						height: 40px;
						width: 40px;
					}
				}
				&:hover {
					cursor: pointer;
					.item-title {
						color: var(--color-text-red);
					}
				}
			}
		}
	}
}

.btn {
	padding: var(--padding);
	border-radius: var(--radius);
	padding-top: 0.6em;
	padding-bottom: 0.6em;
	&,
	* {
		color: var(--btn-white);
	}
	background-color: var(--btn-blue);
	cursor: pointer;
	font-weight: 600;
	display: inline-block;
	user-select: none;
	text-align: center;
	text-transform: uppercase;
	&:hover {
		&,
		* {
			color: var(--btn-blue);
		}
		background-color: var(--btn-white);
	}
	&.red {
		&,
		* {
			color: var(--btn-white);
		}
		background-color: var(--btn-red);
		&:hover {
			&,
			* {
				color: var(--btn-red);
			}
			background-color: var(--btn-white);
		}
	}
	&:disabled,
	&.working,
	&.disabled {
		&,
		* {
			color: #ddd;
		}
		background-color: gray;
		cursor: default;
		pointer-events: none;
	}
	&.working {
		position: relative;
		color: transparent;
		pointer-events: none;

		&::after {
			/* dup: spinner */
			content: "";
			position: absolute;
			left: calc(50% - 0.55em - 0.09em);
			top: calc(50% - 0.55em - 0.09em);
			width: 1.1em;
			height: 1.1em;
			border: 0.18em solid white;
			border-radius: 50%;
			border-top-color: transparent;
			animation: spin 0.8s linear infinite;
		}
	}
}

.btn-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	padding-top: 0.5rem;
}

.btn-prev-next {
	display: flex;
	gap: 1rem;
	justify-content: center;
	width: 100%;
}

.poly-input {
	display: flex;
	flex-direction: column;
	gap: 0.55em;
	.input-error {
		overflow-wrap: anywhere;
		color: var(--color-text-red);
	}
	.input {
		padding: var(--padding);
		border-radius: 0.8em;
		background-color: var(--input-bg);
		color: var(--color-text);
		&:hover {
			background-color: var(--input-hover-bg);
			cursor: pointer;
		}
		&.error {
			outline: 2px solid var(--color-text-red);
		}
		&:focus {
			outline: 2px solid var(--input-focus-border-color);
		}
		&:disabled {
			background-color: #222;
			color: var(--input-disabled-text-color);
			cursor: default;
			pointer-events: none;
		}
		&::placeholder {
			color: var(--input-placeholder-text-color);
			opacity: 1;
		}

		&:is(textarea) {
			padding: 0.8em 0.9em;
		}

		&:is(select) {
			appearance: none;
			/* biome-ignore lint/complexity/noImportantStyles: cut me some slack */
			padding-right: 2.7em !important;
			background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
			background-repeat: no-repeat;
			background-position: right 0.8em center;
			background-size: 1.2em;
			&:invalid {
				color: var(--input-placeholder-text-color);
			}
		}
	}
}

.poly-radio-selector {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	overflow-wrap: anywhere;
	.selector-label {
		display: flex;
		flex-direction: row;
		gap: 0.5rem;
		&,
		* {
			cursor: pointer;
		}
	}
	&.poly-network-radio-selector {
		text-transform: capitalize;
	}
}

.poly-coin-radio-selector {
	padding: var(--padding);
	border-radius: var(--radius);
	flex-direction: row;
	justify-content: center;
	gap: 1rem 2rem;
	border-color: var(--input-bg);
	flex-wrap: wrap;

	.selector-label {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.75em;
		.selector-text {
			display: flex;
			flex-direction: row;
			align-items: center;
			img,
			svg {
				border-radius: 50%;
			}
		}
		&:hover {
			.selector-text {
				color: var(--color-text-green);
			}
		}
	}

	.selector-radio {
		appearance: none;
		width: 1.25em;
		height: 1.25em;
		border: 0.125em solid var(--color-border-gray);
		border-radius: 50%;
		cursor: pointer;
		position: relative;

		&:checked {
			border-color: var(--color-text-green);

			&::after {
				content: "";
				width: 0.75em;
				height: 0.75em;
				background-color: var(--color-text-green);
				border-radius: 50%;
				position: absolute;
				inset: 0;
				margin: auto;
			}

			& + .selector-text {
				color: var(--color-text-green);
			}
		}

		&:hover {
			border-color: var(--color-text-green);
		}
	}
}

#btn-network {
	padding: 0;
	text-transform: uppercase;
	.network-option {
		.text {
			display: block;
		}
		&:not(.selected) {
			.text {
				&:hover {
					color: var(--btn-white);
				}
			}
		}
	}
	.network-options {
		position: absolute;
	}
}

.full-screen-msg {
	position: absolute;
	top: 0;
	left: 0;
	height: 100dvh;
	width: 100dvw;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	z-index: -1;
	.msg {
		text-align: center;
		font-size: 3rem;
		font-weight: bold;
	}
}

.full-card-message {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	.msg {
		text-align: center;
		font-size: 1.5em;
		font-weight: bold;
		text-transform: uppercase;
	}
}

.display-demo {
	/* border: 1px solid grey; */
	/* border-radius: 50%; */
	border-radius: 5%;
}

/* === specific pages === */

#page-user {
	.tabs-container {
		max-width: 800px;
		margin: 0 auto;
	}
}

/* === animations === */

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