#accountSelectForm.std-popup-form {
	width: 80vw;
}

/* When only one currency card is available, shrink the whole frame */
#accountSelectForm.std-popup-form.acctsel--single {
	width: 52vw;
}

#accountSelectForm .acctsel-wrap {
	padding: 1.6vw 2.2vw 1.8vw 2.2vw;
}

#accountSelectForm .acctsel-title {
	text-align: center;
	font-size: 1.6vw;
	font-weight: 700;
	padding-bottom: 1.2vw;
}

#accountSelectForm .acctsel-title label {
	margin-bottom: 0 !important;
}

#accountSelectForm .acctsel-cards {
	display: flex;
	gap: 2vw;
	justify-content: space-between;
	align-items: stretch;
}

/* When only one currency card is available, center it and keep it card-sized */
#accountSelectForm .acctsel-cards.acctsel-cards--single {
	justify-content: center;
}

#accountSelectForm .acctsel-cards.acctsel-cards--single .acctsel-card {
	flex: 1;
}

#accountSelectForm .acctsel-card {
	flex: 1;
	background-color: #ffffff;
	border-radius: 0.6vw;
	box-shadow: 1px 1px 10px 1px #d0d0d0;
	padding: 1.2vw 1.2vw 1vw 1.2vw;
	display: flex;
	flex-direction: column;
}

#accountSelectForm .acctsel-card-head {
	display: flex;
	align-items: flex-start;
	gap: 0.8vw;
	padding-bottom: 0.8vw;
}

#accountSelectForm .acctsel-icon {
	width: 2.2vw;
	height: 2.2vw;
	border-radius: 0.4vw;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-weight: 800;
	font-size: 1.2vw;
}

#accountSelectForm .acctsel-icon-thb {
	/* Match THB button gradient */
	background-image: linear-gradient(90deg, #c08a2e 0%, #d4b06c 55%, #f3ddb6 100%);
}

#accountSelectForm .acctsel-icon-usd {
	/* Match USD button gradient */
	background-image: linear-gradient(90deg, #4aa8d6 0%, #7cc8c6 55%, #e8d3aa 100%);
}

/* Title color follows the currency theme */
#accountSelectForm .acctsel-icon-thb + .acctsel-head-text .acctsel-head-title {
	color: #c08a2e;
}

#accountSelectForm .acctsel-icon-usd + .acctsel-head-text .acctsel-head-title {
	color: #c08a2e;
}

#accountSelectForm .acctsel-head-title {
	font-size: 1.2vw;
	font-weight: 800;
	color: brown;
	line-height: 1.2;
}

#accountSelectForm .acctsel-head-sub {
	font-size: 0.75vw;
	font-weight: 600;
	color: #c49a41;
	margin-top: 0.2vw;
}

#accountSelectForm .acctsel-split {
	display: flex;
	gap: 0.9vw;
	align-items: stretch;
	flex: 1;
}

#accountSelectForm .acctsel-col {
	/* Ensure both columns share width equally and can shrink without squeezing the other */
	flex: 1 1 0;
	min-width: 0;
}

#accountSelectForm .acctsel-divider {
	width: 2px;
	background-color: #d7c99a;
	border-radius: 2px;
}

#accountSelectForm .acctsel-gold-type {
	font-size: 0.9vw;
	font-weight: 800;
	color: #2b2b2b;
}

#accountSelectForm .acctsel-qty {
	font-size: 1.8vw;
	font-weight: 800;
	color: #b8872f;
	line-height: 1.1;
	padding-top: 0.4vw;
}

#accountSelectForm .acctsel-unit {
	font-size: 1vw;
	font-weight: 700;
	color: #2b2b2b;
}

#accountSelectForm .acctsel-label {
	font-size: 0.8vw;
	font-weight: 700;
	color: #2b2b2b;
	padding-top: 0.6vw;
}

#accountSelectForm .acctsel-value {
	font-size: 1vw;
	font-weight: 900;
	padding-top: 0.3vw;
	/* Put delta (+/- and %) on the next line */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15vw;
}

#accountSelectForm .acctsel-main {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
}


#accountSelectForm .acctsel-delta {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 0.7vw;
	font-weight: 800;
	margin-left: 0;
}

#accountSelectForm .acctsel-up {
	color: green;
}

#accountSelectForm .acctsel-down {
	color: red;
}

#accountSelectForm .acctsel-card-foot {
	padding-top: 1.2vw;
	display: flex;
	justify-content: center;
}

#accountSelectForm .acctsel-enter {
	border: 0;
	color: #ffffff;
	font-weight: 800;
	font-size: 1vw;
	height: 2.4vw;
	border-radius: 1.4vw;
	padding: 0 2.6vw;
	min-width: 16vw;
	cursor: pointer;
}

#accountSelectForm .acctsel-enter-thb {
	/* Match screenshot: gold → light gold (left → right) */
	background-image: linear-gradient(90deg, #c08a2e 0%, #d4b06c 55%, #f3ddb6 100%);
}

#accountSelectForm .acctsel-enter-usd {
	/* Match screenshot: blue → mint/teal → beige */
	background-image: linear-gradient(90deg, #4aa8d6 0%, #7cc8c6 55%, #e8d3aa 100%);
}

/* Disabled state: grey button and hide details for that currency */
#accountSelectForm .acctsel-enter:disabled {
	background-image: none;
	background-color: #d0d0d0;
	color: #6b6b6b;
	cursor: not-allowed;
	opacity: 1;
}

#accountSelectForm .acctsel-footnote {
	text-align: center;
	padding-top: 1.2vw;
}

#accountSelectForm .acctsel-footnote label {
	font-size: 0.7vw;
	font-weight: 600;
	color: #6b6b6b;
	margin-bottom: 0 !important;
}

@media (max-width: 900px) {
	#accountSelectForm.std-popup-form {
		width: 92vw;
	}

	#accountSelectForm.std-popup-form.acctsel--single {
		width: 92vw;
	}

	#accountSelectForm .acctsel-cards {
		flex-direction: column;
	}

	#accountSelectForm .acctsel-enter {
		height: 36px;
		border-radius: 18px;
		font-size: 14px;
		min-width: 240px;
	}

	#accountSelectForm .acctsel-title {
		font-size: 18px;
	}
}