/* Quick Topup — content styles only; popup chrome comes from alert.css */

/* Close button — injected into .divAlertPopup when QuickTopup is active */
.btnQtClose
{
	cursor:pointer;
	height:40px;
	position:absolute;
	right:20px;
	top:20px;
	width:40px;
}

.btnQtClose:before
{
	background-color:#3f4656;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(45deg);
	transition:background-color 0.25s, box-shadow 0.25s;
	width:24px;
}

.btnQtClose:after
{
	background-color:#3f4656;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(-45deg);
	transition:background-color 0.25s, box-shadow 0.25s;
	width:24px;
}

.btnQtClose:hover:before, .btnQtClose:hover:after
{
	background-color:#fbd3ff;
	box-shadow:0px 0px 5px #e600ff;
}

.qtHeader
{
	align-items: center;
	display: flex;
	gap: 10px;
	margin-bottom: 18px;
}

.qtLogo
{
	height: 28px;
	width: auto;
}

.qtTitle
{
	color: #ffffff;
	font-size: 17px;
	font-weight: 600;
}

/* Preset pills — match wallet popup pill style, persistent selected state */
.qtPresets
{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-bottom: 14px;
	margin-top: 50px;
}

.qtPreset
{
	align-items: center;
	background-color: #292a2f;
	border: 2px solid #292a2f;
	border-radius: 10px;
	box-sizing: border-box;
	color: #ffffff;
	cursor: pointer;
	display: flex;
	flex: 1 1 calc((100% - 16px) / 3);
	font-size: 14px;
	max-width: calc((100% - 16px) / 3);
	height: 45px;
	justify-content: center;
	padding: 0 14px;
	transition: border-color 0.25s, color 0.25s;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.qtPreset:hover, .qtPreset:focus, .qtPreset:active
{
	border-color: #7262f2;
	color: #ffffff;
}

.qtPreset.selected
{
	border-color: #7262f2;
	color: #ffffff;
}

/* Amount input wrapper — give TextInput component full width */
#divQtAmountInput
{
	margin-top: 4px;
	margin-bottom: 10px;
}

/* Full-width button row — overrides alert's default right-aligned layout when QuickTopup is active */
#divAppAlert.quickTopup #divAlertButtons
{
	text-align:center;
}

/* Primary DEPOSIT button — overrides alert's default .btnAlert.blue when QuickTopup is active */
#divAppAlert.quickTopup .btnAlert.blue
{
	background:linear-gradient(180deg, #ac78e4 0%, #7262f2 100%);
	border:none;
	border-radius:10px;
	box-shadow:0px 0px 20px rgba(0, 0, 0, 0.5);
	color:#ffffff;
	display:block;
	font-family:"JostBold", sans-serif;
	font-size:18px;
	font-weight:900;
	height:68px;
	line-height:68px;
	margin-left:0;
	min-width:0;
	padding:0;
	text-shadow:none;
	width:100%;
}

#divAppAlert.quickTopup .btnAlert.blue:hover,
#divAppAlert.quickTopup .btnAlert.blue:focus
{
	border:none;
	box-shadow:0px 0px 20px rgba(0, 0, 0, 0.5);
	color:#ffffff;
	text-shadow:none;
}

/* Mobile — full-screen takeover, matching the wallet popup breakpoint */
@media (max-width: 540px)
{
	#divAppAlert.quickTopup .divAlertPopup,
	#divAppAlert.quickTopup.autoSize .divAlertPopup
	{
		border-radius:0;
		box-shadow:none;
		height:100%;
		left:0;
		max-height:100%;
		max-width:100%;
		min-width:0;
		padding:20px;
		top:0;
		transform:none;
		width:calc(100% - 40px);
	}
}

/* Defensive — keep loader above gamePopup (z-index:15) and stacked-wallet (z-index:20)
   when a game is active. Loader's base z-index:30 already wins, this is belt-and-braces. */
body.gameActive #divAppLoader
{
	z-index:30;
}