/*!
 * Glass Account Panel — hero cards for the custom My Account dashboard
 * (the hand-built template with .dashboard_main / .white_card / etc.)
 *
 * Scoped entirely to .gap-hero-row / .gap-wallet-hero / .gap-points-hero
 * so this can never affect anything else already on the page. If the
 * anchor markup these classes attach to doesn't exist on a given site,
 * these rules simply match nothing and do nothing.
 */

.gap-hero-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 16px;
}

.gap-hero-row .white_card.gap-wallet-hero {
	flex: 1 1 300px;
	margin-bottom: 0;
}

/* ------------------------------------------------------------ */
/* Shared "hero card" look                                       */
/* ------------------------------------------------------------ */
.gap-wallet-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.28);
}

.gap-wallet-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 90% -10%, rgba(255, 255, 255, 0.25), transparent 55%),
		radial-gradient(circle at -10% 120%, rgba(255, 255, 255, 0.12), transparent 50%);
	pointer-events: none;
}

.gap-wallet-hero__right,
.gap-wallet-hero__actions {
	position: relative;
	z-index: 1;
}

.gap-wallet-hero__right {
	display: flex;
	align-items: center;
	gap: 14px;
}

.gap-wallet-hero .icon_container.gold {
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

.gap-wallet-hero .text_gray {
	color: rgba(255, 255, 255, 0.8) !important;
	margin: 0 0 2px;
}

.gap-wallet-hero__amount,
.gap-wallet-hero__amount * {
	color: #fff !important;
	font-size: 20px;
	font-weight: 800;
	margin: 0;
}

.gap-wallet-hero__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.gap-wallet-hero__btn.btn.solid.medium {
	background: #fff;
	color: #6b4a23;
	border: none;
	font-weight: 700;
}

.gap-wallet-hero__btn.btn.solid.medium:hover {
	background: #fff;
	opacity: 0.92;
}

.gap-wallet-hero .btn.link_primary {
	color: #fff;
}

/* ------------------------------------------------------------ */
/* Wallet card — bronze/gold gradient (matches the jewelry brand) */
/* ------------------------------------------------------------ */
.gap-wallet-hero:not(.gap-points-hero) {
	background: linear-gradient(135deg, #2b2118 0%, #6b4a23 45%, #caa15d 100%);
	box-shadow: 0 14px 34px rgba(107, 74, 35, 0.25);
}

/* ------------------------------------------------------------ */
/* Points card — regal purple-to-gold, its visual "pair"          */
/* ------------------------------------------------------------ */
.gap-points-hero {
	background: linear-gradient(135deg, #3a1c58 0%, #7c4dbb 45%, #d4af37 100%);
	box-shadow: 0 14px 34px rgba(124, 77, 187, 0.28);
}

.gap-points-hero .box_right__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* The points plugin's own rank badge already comes with its own inline
   background color — just make sure it sits nicely under the amount. */
.gap-points-hero .pr-rank-badge {
	margin-top: 2px;
	width: fit-content;
}

/* ------------------------------------------------------------ */
/* Tickets card — blue/teal "support" gradient, third in the row */
/* ------------------------------------------------------------ */
.gap-tickets-hero {
	background: linear-gradient(135deg, #0f3460 0%, #1f6f8b 45%, #2ec4b6 100%);
	box-shadow: 0 14px 34px rgba(31, 111, 139, 0.28);
}

@media (max-width: 600px) {
	.gap-hero-row {
		flex-direction: column;
	}

	.gap-wallet-hero {
		flex-direction: column;
		align-items: flex-start;
	}
}