/*
 * Wallex Margin Calculator – frontend styles
 * Compatible with Light and Dark modes using Wallex Token Style.
 */

.wallex-mc-wrap {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--spacingS, 12px);
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
	direction: rtl;
}

.wallex-mc-wrap *,
.wallex-mc-wrap *::before,
.wallex-mc-wrap *::after {
	box-sizing: border-box;
}

.wallex-mc {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-inline: 0;
	padding: var(--spacingM, 18px) var(--spacingM, 18px) var(--spacingM, 16px);
	background: var(--color-bg, #ffffff);
	border-radius: var(--cornerRadiusXL, 16px);
	box-shadow: 0 8px 30px var(--color-glass-black-5, rgba(20, 20, 43, 0.08));
}

.wallex-mc *,
.wallex-mc *::before,
.wallex-mc *::after {
	box-sizing: border-box;
}

/* ---------- Header ---------- */
.wallex-mc__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacingS, 12px);
	margin-bottom: var(--spacingXXL, 40px);
}

.wallex-mc__title {
	display: inline-flex;
	align-items: center;
	gap: var(--spacingXS, 8px);
	font-size: var(--body-large-size, 16px);
	font-weight: var(--body-strong-weight, 700);
}

.wallex-mc__side {
	display: inline-flex;
	background: var(--color-stroke-2, rgba(20, 20, 43, 0.05));
	border: 1px solid var(--color-stroke-2, rgba(20, 20, 43, 0.05));
	border-radius: var(--cornerRadiusCircular, 999px);
	padding: var(--spacingXXS, 4px);
	max-width: 96px;
	max-height: 28px;
}

.wallex-mc__side-btn {
	order: 0;
	background: transparent;
	font: inherit;
	font-size: var(--caption-size, 12px);
	font-weight: var(--caption-medium-weight, 500);
	padding: 0px var(--spacingXS, 8px);
	border-radius: var(--cornerRadiusCircular, 999px);
	cursor: pointer;
	color: var(--color-text-3, rgba(0, 0, 0, 0.4));
	transition: background-color .15s ease, color .15s ease;
	max-width: 44px;
	max-height: 20px;
	line-height: 20px;
	border: none;
}

.wallex-mc__side-btn.is-active.is-long {
	background: var(--color-approveBg, #00b88a);
	color: var(--color-onColorLightText, #ffffff);
}

.wallex-mc__side-btn.is-active.is-short {
	background: var(--color-criticalBg, #f65555);
	color: var(--color-onColorLightText, #ffffff);
}

/* ---------- Market selector ---------- */
.wallex-mc__market {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: var(--color-negativeGlassBg-2, rgba(0, 0, 0, 0.05));
	color: var(--color-text-1, #252525);
	border: 0;
	border-radius: var(--cornerRadiusCircular, 1000px);
	margin-bottom: var(--spacingXL, 32px);
	font: inherit;
	cursor: pointer;
	transition: background-color .15s ease;
	height: 48px;
	padding: var(--spacingS, 12px);
}

.wallex-mc__market:hover {
	background: var(--color-negativeGlassBg-2, rgba(0, 0, 0, 0.05));
}

.wallex-mc__symbol {
	color: var(--color-text-1, #252525);
	font-size: var(--body-large-size, 16px);
	font-weight: var(--body-medium-weight, 500);
	line-height: var(--caption-line-height, 20px);
}

.wallex-mc__symbol-defaults {
	color: var(--color-text-3, rgba(0, 0, 0, 0.4));
}

.wallex-mc__market-pair {
	display: inline-flex;
	align-items: center;
	gap: var(--spacingSNudge, 6px);
	font-weight: var(--body-strong-weight, 700);
	font-size: 15px;
}

.wallex-mc__market-icon {
	width: 24px;
	height: 24px;
	border-radius: var(--cornerRadiusCircular, 1000px);
}

.wallex-mc__market-info {
	display: flex;
}

.wallex-mc__coin-wrap {
	display: flex;
	flex-direction: row;
	align-content: center;
	flex-wrap: nowrap;
	align-items: center;
	gap: 15px;
}

.wallex-mc__sep,
.wallex-mc__base {
	color: var(--color-text-3, rgba(0, 0, 0, 0.4));
	font-size: var(--caption-size, 12px);
}

.wallex-mc__coin-icon {
	display: inline-flex;
	max-width: 24px;
	max-height: 24px;
	align-content: center;
	align-items: center;
	justify-content: center;
}

.wallex-mc__coin-icon img {
	border-radius: var(--cornerRadiusCircular, 1000px);
}

.wallex-mc__market-price {
	display: inline-flex;
	align-items: center;
	gap: var(--spacingSNudge, 6px);
	color: var(--color-text-3, rgba(0, 0, 0, 0.4));
	font-size: 13px;
}

.wallex-mc__price-value {
	font-weight: var(--body-strong-weight, 600);
}

/* ---------- Field rows ---------- */
.wallex-mc__field {
	margin-bottom: var(--spacingM, 16px);
}

.wallex-mc__field__exit {
	margin-bottom: var(--spacingXXL, 40px);
}

.wallex-mc__field-head {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--spacingXS, 8px);
	padding: 0 var(--spacingS, 12px);
	gap: var(--spacingS, 10px);
}

.wallex-mc__label {
	color: var(--color-text-2, rgba(0, 0, 0, 0.6));
	display: inline-flex;
	align-items: center;
	gap: var(--spacingXXS, 4px);
	font-weight: var(--caption-strong-weight, 700);
	font-size: var(--caption-size, 12px);
	line-height: var(--caption-line-height, 20px);
	letter-spacing: 0%;
	text-align: center;
}

.wallex-mc__unit {
	color: var(--color-text-3, rgba(0, 0, 0, 0.4));
	font-weight: var(--caption-regular-weight, 400);
	font-size: var(--caption-size, 12px);
}

.wallex-mc__shortcut {
	border: 0;
	background: none;
	color: var(--color-primaryBrandText, #007aff);
	font: inherit;
	font-size: var(--caption-size, 12px);
	font-weight: var(--caption-medium-weight, 500);
	cursor: pointer;
	padding: 0;
	line-height: var(--caption-line-height, 20px);
}

.wallex-mc__shortcut:hover {
	text-decoration: underline;
}

/* ---------- Stepper ---------- */
.wallex-mc__stepper {
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	align-items: stretch;
	background: var(--color-negativeGlassBg, rgba(0, 0, 0, 0.02));
	border-radius: var(--cornerRadiusCircular, 1000px);
	overflow: hidden;
	height: 40px;
}

.wallex-mc__step {
	border: 0;
	background: var(--color-negativeGlassBg, rgba(0, 0, 0, 0.02));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font: inherit;
	transition: background-color .15s ease, color .15s ease;
	padding: 0;
	gap: -4px;
}

.wallex-mc__step svg {
	display: block;
}

.wallex-mc__step svg+svg {
	margin-inline-start: -10px;
}

.wallex-mc__step.is-pressing {
	background: var(--color-Press, rgba(0, 0, 0, .06));
}

.wallex-mc__input {
	border: 0;
	text-align: center;
	font: inherit;
	font-size: 15px;
	font-weight: var(--body-strong-weight, 600);
	width: 100%;
	outline: none;
	direction: ltr;
	background: transparent;
	color: var(--color-text-1, #252525);
}

.wallex-mc__input:focus {
	background: var(--color-negativeGlassBg, rgba(0, 0, 0, 0.02));
}

.wallex-mc__field-error {
	color: var(--color-criticalText, #f65555);
	font-size: var(--caption-size, 12px);
	font-weight: var(--caption-medium-weight, 500);
	line-height: var(--caption-line-height, 1.7);
	margin-top: var(--spacingSNudge, 6px);
	text-align: center;
}

.wallex-mc__field-error-amount {
	direction: rtl;
	display: inline-flex;
	gap: var(--spacingXXS, 4px);
	unicode-bidi: isolate;
}

.wallex-mc__field-error-value,
.wallex-mc__field-error-unit {
	display: inline-block;
}

.wallex-mc__field-error[hidden] {
	display: none;
}

/* ---------- Leverage ---------- */
.wallex-mc__leverage {
	margin-bottom: var(--spacingS, 14px);
}

.wallex-mc__lev-head {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--spacingXXL, 40px);
	padding: 0 var(--spacingS, 12px);
}

.wallex-mc__lev-control {
	display: inline-flex;
	align-items: center;
	gap: var(--spacingXS, 8px);
}

.wallex-mc__lev-btn {
	max-width: 32px;
	max-height: 32px;
	border-radius: var(--cornerRadiusCircular, 50%);
	background: var(--color-negativeGlassBg-2, rgba(0, 0, 0, 0.05));
	border: 0;
	font: inherit;
	color: var(--color-text-1, #252525);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.wallex-mc__lev-value {
	min-width: 56px;
	text-align: center;
	font-weight: var(--caption-strong-weight, 700);
	font-size: var(--caption-size, 12px);
	flex-direction: row-reverse;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	color: var(--color-text-2, rgba(0, 0, 0, 0.6));
	gap: 3px;
}

.wallex-mc__lev-leverage {
	font-size: var(--body-large-size, 16px);
	color: var(--color-text-1, #252525);
}

.wallex-mc__slider {
	display: flex;
	flex-direction: column;
	gap: var(--spacingS, 10px);
	margin-bottom: var(--spacingM, 16px);
}

.wallex-mc__slider input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	height: 6px;
	background: var(--color-negativeGlassBg-2, rgba(0, 0, 0, 0.05));
	border-radius: var(--cornerRadiusCircular, 999px);
	outline: none;
	width: 100%;
	direction: ltr;
}

.wallex-mc__slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	background: var(--color-bg, #ffffff);
	border-radius: var(--cornerRadiusCircular, 50%);
	cursor: pointer;
	border: 6px solid var(--color-negativeBg, rgba(0, 0, 0, 0.1));
	box-shadow: 0 0 0 1px var(--color-stroke-2, rgba(0, 0, 0, .1));
}

.wallex-mc__slider input[type="range"]::-moz-range-thumb {
	width: 18px;
	height: 18px;
	background: var(--color-negativeGlassBg-2, rgba(0, 0, 0, 0.05));
	border-radius: var(--cornerRadiusCircular, 50%);
	cursor: pointer;
	border: 3px solid var(--color-bg, #ffffff);
	box-shadow: 0 0 0 1px var(--color-stroke-2, rgba(0, 0, 0, .1));
}

.wallex-mc__slider-labels {
	display: flex;
	justify-content: space-between;
	font-size: var(--caption-size, 12px);
	color: var(--color-text-2, rgba(0, 0, 0, 0.6));
}

/* ---------- Summary ---------- */
.wallex-mc__summary {
	border: 1px solid var(--color-stroke-2, rgba(0, 0, 0, 0.05));
	border-radius: var(--cornerRadiusM, 8px);
	padding: var(--spacingXS, 8px) var(--spacingS, 12px);
	transition: background-color .2s ease;
	width: 311px;
	justify-self: center;
}

.wallex-mc__summary.is-profit {
	background: var(--color-approveBg-4, rgba(229, 248, 243, 0.12));
	border: 1px solid var(--color-approveStroke-3, #CCF1E8);
}

.wallex-mc__summary.is-loss {
	background: var(--color-criticalBg-4, rgba(254, 238, 238, 0.08));
	border: 1px solid var(--color-criticalStroke-3, #FEEEEE);
}

.wallex-mc__summary-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacingXS, 8px);
}

.wallex-mc__summary-row+.wallex-mc__summary-row {
	margin-top: var(--spacingXS, 8px);
}

.wallex-mc__summary-label {
	display: inline-flex;
	align-items: center;
	gap: var(--spacingXXS, 4px);
	color: var(--color-text-2, rgba(0, 0, 0, 0.6));
	font-size: var(--caption-size, 12px);
	font-weight: var(--caption-strong-weight, 700);
}

.wallex-mc__summary-label-icon {
	width: 20px;
	height: 20px;
}

.wallex-mc__summary-value {
	display: inline-flex;
	align-items: baseline;
	gap: var(--spacingSNudge, 6px);
	font-weight: var(--body-strong-weight, 700);
	font-size: var(--body-size, 14px);
}

.wallex-mc__summary-row--pl .wallex-mc__summary-value {
	font-size: 15px;
}

.wallex-mc__pl-amount {
	font-size: var(--body-large-size, 16px);
	font-weight: var(--body-strong-weight, 700);
	color: var(--color-text-1, #252525);
	direction: ltr;
}

.wallex-mc__pl-amount.is-profit {
	color: var(--color-approveText, #00b88a);
}

.wallex-mc__pl-amount.is-loss {
	color: var(--color-criticalText, #f65555);
}

.wallex-mc__pl-amount.is-calculating {
	color: var(--color-text-3, rgba(0, 0, 0, 0.4));
	direction: rtl;
	font-size: var(--caption-size, 12px);
	font-weight: var(--caption-medium-weight, 500);
}

.wallex-mc__pl-unit {
	font-size: var(--caption-size, 12px);
	font-weight: var(--caption-medium-weight, 500);
	color: var(--color-text-3, rgba(0, 0, 0, 0.4));
}

.wallex-mc__pl-percent {
	font-size: var(--caption-small-size, 11px);
	background: var(--color-negativeGlassBg, rgba(0, 0, 0, 0.04));
	padding: 0px var(--spacingXXS, 4px);
	border-radius: var(--cornerRadiusCircular, 1000px);
	color: var(--color-text-3, rgba(0, 0, 0, 0.4));
	direction: ltr;
	gap: var(--spacingS, 12px);
	display: flex;
	min-width: 45px;
	min-height: 16px;
	align-content: center;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: center;
	position: relative;
	top: -22px;
}

.wallex-mc__pl-percent.hidden {
	display: none;
}

.is-loss .wallex-mc__pl-percent {
	color: var(--color-criticalText, #f65555);
	background: var(--color-criticalBg-3, rgba(254, 238, 238, 0.5));
}

.wallex-mc__pl-percent.is-profit {
	color: var(--color-approveText, #00b88a);
	background: var(--color-approveBg-3, rgba(229, 248, 243, 0.5));
}

/* ---------- Trade link (outside card) ---------- */
.wallex-mc-wrap>.wallex-mc__trade-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0 var(--spacingS, 12px);
	border-radius: var(--cornerRadiusCircular, 1000px);
	font: inherit;
	font-weight: var(--body-medium-weight, 500);
	font-size: var(--body-large-size, 16px);
	text-align: center;
	text-decoration: none;
	color: var(--color-text-2, rgba(0, 0, 0, 0.6));
	background: var(--color-bg, #ffffff);
	box-shadow: 0 8px 30px var(--color-glass-black-5, rgba(20, 20, 43, 0.08));
	transition: background-color .15s ease, transform .05s ease;
}

.wallex-mc__trade-link:active {
	transform: translateY(1px);
}

html.wallex-mc--modal-open {
	overflow: hidden;
}

/* ---------- Modal ---------- */
.wallex-mc__modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacingM, 16px);
}

.wallex-mc__modal[hidden] {
	display: none;
}

.wallex-mc__modal-backdrop {
	position: absolute;
	inset: 0;
	background: var(--color-glass-black-60, rgba(8, 12, 24, .55));
	backdrop-filter: blur(2px);
}

.wallex-mc__modal-dialog {
	position: relative;
	background: var(--color-bg, #ffffff);
	border-radius: var(--cornerRadiusXL, 16px);
	width: 100%;
	max-width: 480px;
	max-height: 80vh;
	min-height: 80vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 20px 60px var(--color-glass-black-30, rgba(8, 12, 24, .25));
	direction: rtl;
}

.wallex-mc__modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px var(--spacingM, 16px);
}

.wallex-mc__modal-head h3 {
	font-size: var(--body-large-size, 16px);
	margin: 0;
	font-weight: var(--body-strong-weight, 700);
}

.wallex-mc__modal-close {
	border: 0;
	background: transparent;
	font-size: 22px;
	cursor: pointer;
	color: var(--color-text-3, rgba(0, 0, 0, 0.4));
	line-height: 1;
	padding: var(--spacingXXS, 4px) var(--spacingXS, 8px);
}

.wallex-mc__base-tabs {
	display: flex;
	gap: var(--spacingXXS, 4px);
	padding: var(--spacingS, 12px) var(--spacingM, 16px) 0;
}

.wallex-mc__base-tab {
	border: 0;
	color: var(--color-text-3, rgba(0, 0, 0, 0.4));
	background: var(--color-negativeGlassBg, rgba(0, 0, 0, 0.02));
	padding: var(--spacingSNudge, 6px) 14px;
	border-radius: var(--cornerRadiusCircular, 999px);
	font: inherit;
	font-size: 13px;
	font-weight: var(--body-medium-weight, 600);
	cursor: pointer;
}

.wallex-mc__base-tab.is-active {
	background: var(--color-negativeGlassBg-2, rgba(0, 0, 0, 0.05));
	color: var(--color-text-1, #252525);
}

.wallex-mc__search {
	display: flex;
	align-items: center;
	gap: var(--spacingSNudge, 6px);
	background: var(--color-negativeGlassBg, rgba(0, 0, 0, 0.02));
	border-radius: var(--cornerRadiusL, 12px);
	padding: var(--spacingXS, 8px) var(--spacingS, 12px);
	margin: var(--spacingS, 12px) var(--spacingM, 16px);
	color: var(--color-text-3, rgba(0, 0, 0, 0.4));
}

.wallex-mc__search-input {
	flex: 1;
	border: 0;
	background: transparent !important;
	outline: none;
	font: inherit;
	font-size: var(--body-size, 14px);
	color: var(--color-text-1, #252525);
}

.wallex-mc__coin-panel {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.wallex-mc__coin-panel.is-empty .wallex-mc__coin-list {
	display: none;
}

.wallex-mc__coin-list {
	list-style: none;
	margin: 0;
	padding: 0 var(--spacingXS, 8px) var(--spacingS, 12px);
	overflow-y: auto;
	flex: 1;
}

.wallex-mc__coin-empty {
	display: none;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--spacingS, 12px);
	padding: 24px var(--spacingM, 16px) 32px;
	text-align: center;
	color: var(--color-text-3, rgba(0, 0, 0, 0.4));
}

.wallex-mc__coin-panel.is-empty .wallex-mc__coin-empty {
	display: flex;
}

.wallex-mc__coin-empty-icon {
	color: var(--color-text-3, rgba(0, 0, 0, 0.4));
	opacity: 0.85;
	line-height: 0;
	width: 120px;
	height: 120px;
}

.wallex-mc__coin-empty-text {
	margin: 0;
	font-size: var(--body-size, 14px);
	font-weight: var(--body-medium-weight, 500);
	color: var(--color-text-3, rgba(0, 0, 0, 0.4));
}

.wallex-mc__coin-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacingS, 10px) var(--spacingS, 12px);
	border-radius: var(--cornerRadiusM, 10px);
	cursor: pointer;
	gap: var(--spacingS, 12px);
	transition: background-color .12s ease;
}

.wallex-mc__coin-item:hover {
	background: var(--color-negativeGlassBg-2, rgba(0, 0, 0, 0.05));
}

.wallex-mc__coin-name {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	gap: var(--spacingXXXS, 2px);
}

.wallex-mc__coin-symbol {
	font-weight: var(--body-strong-weight, 700);
	font-size: var(--body-size, 14px);
}

.wallex-mc__coin-fa {
	color: var(--color-text-3, rgba(0, 0, 0, 0.4));
	font-size: var(--caption-size, 12px);
}

.wallex-mc__coin-price {
	font-size: var(--caption-size, 12px);
	color: var(--color-text-3, rgba(0, 0, 0, 0.4));
	text-align: end;
	display: flex;
	flex-direction: column;
	gap: var(--spacingXXXS, 2px);
}

.wallex-mc__coin-price-tmn {
	font-weight: var(--body-strong-weight, 600);
	font-size: 13px;
}

[data-base="USDT"] .wallex-mc__coin-price-tmn {
	display: none;
}

[data-base="USDT"] .wallex-mc__coin-price-usdt {
	font-weight: var(--body-strong-weight, 600);
	font-size: 13px;
}

[data-base="USDT"] [data-symbol="USDT"] {
	display: none;
	visibility: hidden;
}

[data-base="TMN"] .wallex-mc__coin-price-usdt {
	display: none;
}

/* ---------- Compact ---------- */
@media (max-width: 360px) {
	.wallex-mc {
		padding: 14px;
	}
}