/*
 * Wallex Easy Trade – frontend styles
 *
 * Instant buy/sell panel (RTL): buy/sell tabs, a coin slider, an amount field
 * with a currency dropdown, a conversion preview, and a confirmation bottom
 * sheet. Colors resolve from the Wallex theme CSS variables where present and
 * fall back to a self-contained dark palette.
 */

.wallex-et-wrap {
	box-sizing: border-box;
	width: 100%;
	direction: rtl;
}

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

.wallex-et {
	--wallex-et-accent: var(--color-primary, #1273ea);
	--wallex-et-bg: var(--color-bg, #12141c);
	--wallex-et-bg-2: var(--color-bg-2, #1c1f2a);
	--wallex-et-bg-3: var(--color-bg-3, #333846);
	--wallex-et-text: var(--color-text-1, #ffffff);
	--wallex-et-text-2: var(--color-text-3, rgba(255, 255, 255, 0.5));
	--wallex-et-stroke: var(--color-stroke-2, rgba(255, 255, 255, 0.08));

	position: relative;
	width: 100%;
	max-width: 420px;
	margin-inline: auto;
	font-size: 15px;
	color: var(--wallex-et-text);
}

/* ---------------------------------- Tabs ----------------------------------- */
.wallex-et__tabs {
	display: flex;
	justify-content: center;
	gap: 2px;
	width: max-content;
	margin: 0 auto 16px;
	padding: 4px;
	background: var(--wallex-et-bg-2);
	border-radius: var(--cornerRadiusFull, 999px);
}

.wallex-et__tab {
	padding: 8px 28px;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--wallex-et-text-2);
	background: transparent;
	border: 0;
	border-radius: var(--cornerRadiusFull, 999px);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.wallex-et__tab.is-active {
	color: var(--wallex-et-text);
	background: var(--wallex-et-bg-3);
}

/* --------------------------------- Panel ----------------------------------- */
.wallex-et__panel {
	position: relative;
	padding: 16px;
	background: var(--wallex-et-bg);
	border: 1px solid var(--wallex-et-stroke);
	border-radius: var(--cornerRadiusXL, 20px);
}

/* --------------------------------- Slider ---------------------------------- */
.wallex-et__slider {
	overflow: hidden;
	margin-bottom: 24px;
	/* Horizontal drags belong to the slider. */
	touch-action: pan-y;
	cursor: grab;
}

.wallex-et__slider.is-dragging {
	cursor: grabbing;
}

.wallex-et__slider-track {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: transform 0.35s ease;
	/* A drag across the coins must not paint a text selection over them. */
	user-select: none;
	-webkit-user-select: none;
}

.wallex-et__coin {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 33.33%;
	padding: 6px 0;
	font-family: inherit;
	color: var(--wallex-et-text-2);
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: opacity 0.3s ease;
	opacity: 0.55;
}

.wallex-et__coin-img {
	display: block;
	width: 74px;
	height: 74px;
	object-fit: contain;
	/* Native image dragging would hijack the slider drag. */
	-webkit-user-drag: none;
	filter: grayscale(0.7);
	transform: scale(0.82);
	transition: transform 0.3s ease, filter 0.3s ease;
}

.wallex-et__coin-img--empty {
	background: var(--wallex-et-bg-3);
	border-radius: 50%;
}

.wallex-et__coin-name {
	font-size: 0.88rem;
	font-weight: 600;
}

.wallex-et__coin.is-active {
	opacity: 1;
	color: var(--wallex-et-text);
}

.wallex-et__coin.is-active .wallex-et__coin-img {
	filter: none;
	transform: scale(1.12);
}

/* ------------------------------ Amount field ------------------------------- */
.wallex-et__amount-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
	font-size: 0.82rem;
}

.wallex-et__amount-label {
	font-weight: 700;
}

.wallex-et__balance {
	color: var(--wallex-et-text-2);
}

.wallex-et__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: var(--wallex-et-bg-2);
	border: 1.5px solid var(--wallex-et-accent);
	border-radius: var(--cornerRadiusL, 14px);
}

.wallex-et__currency {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	font-weight: 700;
	cursor: pointer;
	user-select: none;
}

.wallex-et__currency-icon,
.wallex-et__currency-icon img {
	display: block;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: contain;
}

.wallex-et__currency-icon:empty {
	background: var(--wallex-et-bg-3);
}

.wallex-et__currency-caret {
	color: var(--wallex-et-text-2);
}

.wallex-et__max {
	flex: 0 0 auto;
	padding: 0;
	font-family: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wallex-et-accent);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.wallex-et__input {
	flex: 1 1 auto;
	width: 40px;
	min-width: 0;
	font-family: inherit;
	font-size: 1.05rem;
	font-weight: 700;
	text-align: left;
	direction: ltr;
	color: var(--wallex-et-text);
	background: transparent !important;
	border: 0;
	outline: none;
}

.wallex-et__input::placeholder {
	color: var(--wallex-et-text-2);
}

.wallex-et__input-unit {
	flex: 0 0 auto;
	font-size: 0.82rem;
	color: var(--wallex-et-text-2);
}

/* The placeholder carries a range («۹۰٬۰۰۰ ~ ۱۰٬۰۰۰٬۰۰۰»), which reads
   left-to-right like the value it stands in for. */
.wallex-et__input::placeholder {
	font-weight: 500;
	font-size: 0.95rem;
}

/* --------------------------- Amount limit error --------------------------- */
.wallex-et__amount-error {
	margin-top: 8px;
	font-size: 0.8rem;
	line-height: 1.6;
	color: var(--color-criticalText, #f65555);
}

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

/* The field itself picks up the error colour so the two read as one unit. */
.wallex-et.has-amount-error .wallex-et__field {
	border-color: var(--color-criticalText, #f65555);
}

/* Currency dropdown menu */
.wallex-et__currency-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	z-index: 30;
	max-height: 260px;
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--wallex-et-bg-2);
	border: 1px solid var(--wallex-et-stroke);
	border-radius: var(--cornerRadiusL, 14px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.wallex-et__currency-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	cursor: pointer;
}

.wallex-et__currency-item:hover {
	background: var(--wallex-et-bg-3);
}

.wallex-et__currency-item.is-active {
	background: var(--wallex-et-bg-3);
}

.wallex-et__currency-item img,
.wallex-et__currency-item .wallex-et__currency-item-icon {
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: contain;
	background: var(--wallex-et-bg-3);
}

.wallex-et__currency-item-name {
	flex: 1 1 auto;
	font-size: 0.9rem;
	font-weight: 600;
}

.wallex-et__currency-item-balance {
	font-size: 0.8rem;
	color: var(--wallex-et-text-2);
	direction: ltr;
}

/* -------------------------------- Price row -------------------------------- */
.wallex-et__price-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
	font-size: 0.82rem;
	color: var(--wallex-et-text-2);
}

/* ------------------------------- Conversion -------------------------------- */
.wallex-et__convert {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin: 18px 0 22px;
	text-align: center;
}

.wallex-et__convert-arrow {
	color: var(--wallex-et-text-2);
}

.wallex-et__convert-main {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.wallex-et__convert-value {
	font-size: 1.7rem;
	font-weight: 800;
}

.wallex-et__convert-unit {
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	color: var(--color-text-2);
}

.wallex-et__settlement {
	display: flex;
	justify-content: center;
	gap: 2px;
	width: max-content;
	margin-top: 6px;
	padding: 4px;
	background: var(--wallex-et-bg-2);
	border-radius: var(--cornerRadiusFull, 999px);
}

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

.wallex-et__settlement-tab {
	min-width: 76px;
	padding: 7px 20px;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--wallex-et-text-2);
	background: transparent;
	border: 0;
	border-radius: var(--cornerRadiusFull, 999px);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.wallex-et__settlement-tab.is-active {
	color: var(--wallex-et-text);
	background: var(--wallex-et-bg-3);
}

/* ----------------------------------- CTA ----------------------------------- */
.wallex-et__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 14px 20px;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-text-inverse, #ffffff);
	background: var(--wallex-et-accent);
	border: 0;
	border-radius: var(--cornerRadiusFull, 999px);
	cursor: pointer;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.wallex-et__cta:hover {
	filter: brightness(1.08);
}

.wallex-et__cta:disabled {
	opacity: 0.55;
	cursor: default;
	filter: none;
}

/* `display: flex` above beats the hidden attribute on its own. */
.wallex-et__cta[hidden] {
	display: none;
}

/* ----------------------------- Alternative row ----------------------------- */
.wallex-et__alt {
	margin-top: 42px;
	padding-top: 18px;
	border-top: 1px solid var(--wallex-et-stroke);
}

.wallex-et__alt-title {
	font-size: 0.8rem;
	text-align: center;
	color: var(--wallex-et-text-2);
	width: max-content;
	justify-self: center;
	top: -30px;
	position: relative;
	background: var(--wallex-et-bg);
	padding: 0 15px;
}

.wallex-et__alt-links {
	display: flex;
	gap: 10px;
}

.wallex-et__alt-link {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 10px;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--wallex-et-text);
	text-decoration: none;
	background: transparent;
	border: 1px solid var(--wallex-et-stroke);
	border-radius: var(--cornerRadiusFull, 999px);
	transition: background 0.2s ease;
}

.wallex-et__alt-link:hover {
	background: var(--wallex-et-bg-2);
	color: var(--wallex-et-text);
}

/* ------------------------------- Bottom sheet ------------------------------ */
.wallex-et__modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

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

.wallex-et__modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(8, 12, 24, 0.6);
	backdrop-filter: blur(2px);
}

.wallex-et__sheet {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: 86vh;
	overflow-y: auto;
	padding: 14px 22px 26px;
	direction: rtl;
	background: var(--color-bg-2, #1c1f2a);
	border-radius: var(--cornerRadiusXL, 20px) var(--cornerRadiusXL, 20px) 0 0;
	animation: wallex-et-sheet-in 0.3s ease;
}

@keyframes wallex-et-sheet-in {
	from {
		transform: translateY(40px);
		opacity: 0;
	}

	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* On wide screens the sheet becomes a centered dialog. */
@media (min-width: 640px) {
	.wallex-et__modal {
		align-items: center;
		padding: 20px;
	}

	.wallex-et__sheet {
		border-radius: var(--cornerRadiusXL, 20px);
	}
}

.wallex-et__sheet-handle {
	width: 44px;
	height: 4px;
	margin: 0 auto 22px;
	background: var(--color-bg-3, #333846);
	border-radius: 999px;
}

.wallex-et__swap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 26px;
}

.wallex-et__swap-col {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
}

.wallex-et__swap-icon,
.wallex-et__swap-icon img {
	display: block;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: contain;
}

.wallex-et__swap-icon:empty {
	background: var(--color-bg-3, #333846);
}

.wallex-et__swap-label {
	font-size: 0.85rem;
	color: var(--color-text-3, rgba(255, 255, 255, 0.55));
}

.wallex-et__swap-value {
	font-size: 1.02rem;
	font-weight: 800;
	direction: rtl;
}

/* Unit next to the amount (coin symbol / currency label). */
.wallex-et__swap-value-unit {
	font-size: 12px;
	font-weight: 500;
	color: var(--color-text-3, rgba(255, 255, 255, 0.55));
}

.wallex-et__swap-arrow {
	flex: 0 0 auto;
	color: var(--color-text-1, #ffffff);
}

.wallex-et__countdown {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 22px;
	font-size: 0.85rem;
	color: var(--color-text-3, rgba(255, 255, 255, 0.6));
}

.wallex-et__countdown-text {
	min-width: 160px;
	text-align: center;

}

/*
 * Determinate MUI CircularProgress: the arc is what is left of the quote's
 * life, not a spinner. MUI's own geometry — a 44-unit viewBox, r=20.2,
 * stroke-width 3.6, the arc driven by stroke-dashoffset — with rotate(-90deg)
 * starting it at twelve o'clock. The extra scaleX(-1) mirrors the sweep, so
 * the arc runs counter-clockwise as it shrinks toward zero.
 */
.wallex-et__countdown-ring {
	display: inline-block;
	width: 16px;
	height: 16px;
	color: var(--wallex-et-accent, #1273ea);
	transform: scaleX(1) rotate(-90deg);
}

.wallex-et__countdown-ring-svg {
	display: block;
	width: 100%;
	height: 100%;
}

.wallex-et__countdown-ring-arc {
	stroke: currentColor;
	stroke-linecap: round;
	/*
	 * One tick is one second, so a second-long linear transition makes the
	 * arc travel continuously instead of stepping once per tick.
	 */
	transition: stroke-dashoffset 1s linear;
}

/* Quote expired: the counter row becomes the "به‌روزرسانی قیمت" action. */
.wallex-et__countdown.is-expired {
	color: var(--color-criticalText, #F65555);
	cursor: pointer;
	user-select: none;
	background: var(--color-criticalBg-3, #F65555);
	font-weight: 500;
	font-size: 0.875rem;
	line-height: 1.715;
	background-color: rgb(254, 238, 238);
	outline: 0px;
	text-decoration: none;
	border-width: 0px;
	border-style: none;
	border-color: currentcolor;
	padding: 6px 16px;
	border-radius: 320px;
	width: fit-content;
	justify-self: center;
}

.wallex-et__countdown.is-expired .wallex-et__countdown-ring {
	display: none;
}

/*
 * The refresh glyph takes the ring's slot in the expired state — same size,
 * same place in the row, and currentColor so it turns red with the rest of
 * the pill.
 */
.wallex-et__countdown-refresh {
	display: none;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

.wallex-et__countdown-refresh svg {
	display: block;
	width: 100%;
	height: 100%;
}

.wallex-et__countdown.is-expired .wallex-et__countdown-refresh {
	display: block;
}

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

/* ----------------------- Insufficient balance notice ----------------------- */
/* Replaces the countdown + pay button when the trade exceeds the wallet. */
.wallex-et__insufficient {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
	padding: 14px 12px;
	background: var(--color-warningBg-3, rgba(241, 172, 28, 0.14));
	border-radius: var(--cornerRadiusLarge, 16px);
}

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

.wallex-et__insufficient-text {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-text-1, #f7f7f7);
}

.wallex-et__insufficient-text svg {
	flex: 0 0 auto;
}

.wallex-et__insufficient-link {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--color-primaryBrandText, #3395FF);
	text-decoration: none;
	white-space: nowrap;
}

.wallex-et__insufficient-link:hover {
	filter: brightness(1.1);
}

.wallex-et__sheet-error {
	margin-bottom: 14px;
	padding: 10px 14px;
	font-size: 0.85rem;
	color: #ff8a8f;
	background: rgba(229, 72, 77, 0.12);
	border-radius: 10px;
	text-align: center;
}

/* Result state (success / failure) */
.wallex-et__sheet-result {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 10px 0 4px;
	text-align: center;
}

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

.wallex-et__result-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	font-size: 30px;
	border-radius: 50%;
}

.wallex-et__result-icon.is-success {
	color: #22c493;
	background: rgba(34, 196, 147, 0.14);
}

.wallex-et__result-icon.is-error {
	color: #e5484d;
	background: rgba(229, 72, 77, 0.14);
}

.wallex-et__result-message {
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.8;
}

/* Body scroll lock while the sheet is open. */
html.wallex-et--modal-open {
	overflow: hidden;
}

/* --------------------------- Reduced motion --------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wallex-et__sheet {
		animation: none;
	}

	.wallex-et__slider-track,
	.wallex-et__coin-img {
		transition: none;
	}

	/* The ring still steps once a second — it just stops sweeping between. */
	.wallex-et__countdown-ring-arc {
		transition: none;
	}
}