/*
Theme Name: mixswap
Theme URI: https://www.mixswap.org/
Author: mixswap
Author URI: https://www.mixswap.org/
Description: mixswap theme
Version: 1.0
License: MIT License
License URI: https://opensource.org/licenses/MIT
Text Domain: mixswap
Tags: custom
*/

:root {
	--mixswap-ink: #17252c;
	--mixswap-muted: #64747a;
	--mixswap-surface: rgba(255, 255, 255, 0.94);
	--mixswap-surface-soft: rgba(246, 250, 249, 0.88);
	--mixswap-line: #d9e4e2;
	--mixswap-accent: #0c8f83;
	--mixswap-accent-dark: #087066;
	--mixswap-highlight: #e7f5f1;
	--mixswap-shadow: 0 24px 70px rgba(20, 54, 56, 0.14);
}

html {
	scroll-behavior: smooth;
}

body {
	color: var(--mixswap-ink);
	background-color: #eaf3f1;
	background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(218, 239, 234, 0.48)), url("img/bg.png");
	background-attachment: fixed;
	font-family: "Inter", sans-serif;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0.32), transparent 45%, rgba(12, 143, 131, 0.08));
	z-index: -1;
}

header > div {
	padding: 18px 20px 15px;
	background: #17252c !important;
}

.logo {
	width: min(420px, 88vw) !important;
	max-width: 100%;
}

.logo img {
	display: block;
	width: 100%;
	height: auto;
}

.nav-container {
	padding: 0 18px !important;
	background: rgba(23, 37, 44, 0.98) !important;
	border-bottom: 0 !important;
	box-shadow: 0 10px 28px rgba(23, 37, 44, 0.16) !important;
}

.nav-list {
	gap: 4px;
}

.nav-link {
	border-radius: 8px;
	color: #e7f5f1 !important;
	font-size: 0.78rem !important;
	letter-spacing: 0.06em;
	padding: 0.95rem 1.05rem !important;
}

.nav-link:hover,
.nav-link:focus-visible {
	background: var(--mixswap-accent) !important;
	color: #fff !important;
}

main {
	max-width: 1080px !important;
	margin: 46px auto !important;
}

.home-container,
article {
	border: 1px solid rgba(255, 255, 255, 0.78);
	border-radius: 18px !important;
	background: var(--mixswap-surface) !important;
	box-shadow: var(--mixswap-shadow);
}

.home-container {
	padding: clamp(20px, 4vw, 44px) !important;
}

#crypto-exchange-form {
	max-width: 940px;
	margin: 0 auto;
}

fieldset {
	height: 78px !important;
	margin-bottom: 22px !important;
	border: 1px solid var(--mixswap-line) !important;
	background: var(--mixswap-surface-soft);
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

fieldset:focus-within,
fieldset:hover {
	border-color: var(--mixswap-accent) !important;
	box-shadow: 0 0 0 4px rgba(12, 143, 131, 0.1);
}

legend {
	color: var(--mixswap-muted);
	font-size: 0.74rem !important;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.fieldset-inner {
	background: transparent !important;
}

#exchange-from-input,
#exchange-to-input {
	box-sizing: border-box;
	flex: 1 1 0 !important;
	min-width: 0 !important;
	max-width: 100%;
	width: 50% !important;
	color: var(--mixswap-ink);
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

#exchange-to-input.exchange-status-message {
	font-size: 0.76rem !important;
	font-weight: 700;
	letter-spacing: 0;
	text-align: left;
}

.fieldset-inner > .custom-select-wrapper {
	flex: 0 1 50%;
	min-width: 0;
}

.custom-select-wrapper {
	border-left-color: var(--mixswap-line) !important;
	background: #fff !important;
	position: relative;
	min-width: 0;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.custom-select-wrapper::after {
	content: "";
	position: absolute;
	right: 13px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--mixswap-muted);
	border-bottom: 2px solid var(--mixswap-muted);
	transform: translateY(-65%) rotate(45deg);
	pointer-events: none;
}

#fromInput,
#toInput {
	min-width: 0;
	padding: 10px 12px !important;
	padding-right: 30px !important;
	color: var(--mixswap-ink);
	font-size: 1rem !important;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: background-color 180ms ease, color 180ms ease;
}

#fromInput.currency-label-long,
#toInput.currency-label-long {
	font-size: 0.8rem !important;
}

#fromInput.currency-label-extra-long,
#toInput.currency-label-extra-long {
	font-size: 0.72rem !important;
}

#fromInput:focus,
#toInput:focus {
	background: var(--mixswap-highlight);
	outline: 0;
}

#fromInput::placeholder,
#toInput::placeholder,
#recipient_address::placeholder {
	color: #8a999c;
}

.dropdown-content {
	border: 1px solid var(--mixswap-line) !important;
	border-radius: 10px !important;
	background: #fff;
	box-shadow: 0 18px 36px rgba(23, 37, 44, 0.16);
	max-height: 300px !important;
	scrollbar-color: #b7cfca transparent;
	scrollbar-width: thin;
}

.option {
	gap: 10px;
	min-height: 48px;
	box-sizing: border-box;
	color: var(--mixswap-ink);
	border-bottom: 1px solid #edf2f1;
	font-size: 0.88rem;
	line-height: 1.25;
	padding: 10px 13px !important;
}

.option:hover {
	background: var(--mixswap-highlight) !important;
}

.option {
	white-space: nowrap;
}

.option span {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.option:active {
	background: #d8eee9 !important;
}

.option:last-child {
	border-bottom: 0;
}

.option img {
	flex: 0 0 28px;
	width: 28px !important;
	height: 28px !important;
	margin: 0 !important;
	border-radius: 50%;
	object-fit: contain;
	background: #f2f7f6;
}

#fromDropdown,
#toDropdown {
	width: 200% !important;
	left: -100% !important;
	right: auto !important;
	max-width: none !important;
	min-width: 0;
	box-sizing: border-box;
	position: absolute !important;
	z-index: 1000 !important;
}

@media (max-width: 480px) {
	#fromDropdown,
	#toDropdown {
		width: 178.5714% !important;
		left: -78.5714% !important;
	}
}

.exchange-min-amount-container,
.exchange-max-amount-container {
	color: var(--mixswap-muted);
	font-size: 0.84rem !important;
	font-weight: 500;
}

#exchange-min-amount,
#exchange-max-amount {
	color: var(--mixswap-ink);
	font-weight: 700;
}

#recipient_address {
	border: 1px solid var(--mixswap-line) !important;
	border-radius: 10px !important;
	color: var(--mixswap-ink);
	font-size: 1rem !important;
	min-height: 58px;
	padding: 15px 17px !important;
	transition: border-color 180ms ease, box-shadow 180ms ease;
}

#recipient_address:focus {
	border-color: var(--mixswap-accent) !important;
	box-shadow: 0 0 0 4px rgba(12, 143, 131, 0.1);
	outline: 0;
}

.exchange-submit {
	border: 0 !important;
	border-radius: 10px !important;
	background: var(--mixswap-accent) !important;
	font-size: 1rem !important;
	font-weight: 700;
	letter-spacing: 0.02em;
	min-height: 58px;
	padding: 14px 20px !important;
}

.exchange-submit:hover:not(:disabled),
.exchange-submit:focus-visible:not(:disabled) {
	background: var(--mixswap-accent-dark) !important;
	box-shadow: 0 10px 22px rgba(12, 143, 131, 0.24);
	transform: translateY(-1px);
}

.features-grid {
	gap: 14px !important;
	margin-top: 18px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.feature-card {
	border: 1px solid rgba(217, 228, 226, 0.9) !important;
	border-radius: 14px !important;
	background: rgba(255, 255, 255, 0.82) !important;
	color: var(--mixswap-ink);
	padding: 25px 20px !important;
	text-align: left !important;
}

.feature-card:hover {
	border-color: rgba(12, 143, 131, 0.45) !important;
	transform: translateY(-3px);
}

.icon-box {
	color: var(--mixswap-accent) !important;
	font-size: 1.45rem !important;
	margin-bottom: 16px !important;
}

.feature-card h3 {
	color: var(--mixswap-ink) !important;
	font-size: 1rem !important;
}

.feature-card p {
	color: var(--mixswap-muted) !important;
	font-size: 0.87rem !important;
}

.footer {
	border-top: 3px solid var(--mixswap-accent) !important;
	background: #17252c !important;
	color: #b9cbc8 !important;
	font-size: 0.78rem;
	letter-spacing: 0.03em;
}

@media (max-width: 480px) {
	#exchange-from-input,
	#exchange-to-input {
		width: 44% !important;
		flex-basis: 44% !important;
	}

	#exchange-to-input.exchange-status-message {
		font-size: 0.62rem !important;
	}

	.custom-select-wrapper {
		width: 56% !important;
	}

	#fromInput,
	#toInput {
		font-size: 0.75rem !important;
		padding-left: 7px !important;
		padding-right: 28px !important;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	#fromInput.currency-label-long,
	#toInput.currency-label-long {
		font-size: 0.68rem !important;
	}

	#fromInput.currency-label-extra-long,
	#toInput.currency-label-extra-long {
		font-size: 0.64rem !important;
	}

	.option {
		font-size: 0.82rem;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

@media (max-width: 768px) {
	main {
		margin: 24px auto !important;
	}

	.nav-container {
		padding: 6px 10px !important;
	}

	.nav-list {
		gap: 0;
	}

	.nav-link {
		padding: 0.75rem 0.9rem !important;
	}

	.home-container {
		border-radius: 14px !important;
	}

	.features-grid {
		grid-template-columns: 1fr !important;
	}
}