/**
 * My Account dashboard — card layout.
 *
 * Scoped entirely to .spx-account-*: never targets a theme wrapper. This loads
 * on all four brands, including Salient sites that have no theme.json presets,
 * so every token carries a literal fallback taken from the SPx palette
 * (spx_hybrid_theme/theme.json).
 */

.spx-account-cards {
	--spx-ac-pink: var(--wp--preset--color--primary, #df2793);
	--spx-ac-blue: var(--wp--preset--color--secondary, #4290e9);
	--spx-ac-border: var(--wp--preset--color--grey-border, #d0d2d3);
	--spx-ac-muted: var(--wp--preset--color--muted-text, #8a8a8a);
	--spx-ac-surface: var(--wp--preset--color--white, #fff);
	--spx-ac-radius: var(--spr-radius-card, 12px);
	--spx-ac-shadow: var(--spr-shadow-card, 0 2px 12px rgba(0, 0, 0, .08));
	--spx-ac-gap: var(--spr-gutter, 24px);

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--spx-ac-gap);
	margin-block: var(--spx-ac-gap);
}

.spx-account-greeting {
	margin-block-end: 0.5em;
}

/* -------------------------------------------------------------------------
   Card shell
   ------------------------------------------------------------------------- */

.spx-account-card {
	min-width: 0; /* Lets grid children shrink so long content can truncate. */
	padding: var(--spx-ac-gap);
	border: 1px solid var(--spx-ac-border);
	border-radius: var(--spx-ac-radius);
	background: var(--spx-ac-surface);
	box-shadow: var(--spx-ac-shadow);
}

.spx-account-card__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	margin-block-end: 0.75em;
}

.spx-account-card__title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.3;
}

.spx-account-card__action {
	flex: 0 0 auto;
	font-size: 0.875rem;
}

.spx-account-card__intro {
	margin-block-end: 0.75em;
}

.spx-account-card__intro > :first-child { margin-block-start: 0; }
.spx-account-card__intro > :last-child  { margin-block-end: 0; }

.spx-account-card__empty {
	margin: 0;
	color: var(--spx-ac-muted);
}

/* -------------------------------------------------------------------------
   Referral card — full width, brand gradient
   ------------------------------------------------------------------------- */

.spx-account-card--referral {
	grid-column: 1 / -1;
	border-color: transparent;
	background: linear-gradient(90deg, var(--spx-ac-pink) 0%, var(--spx-ac-blue) 100%);
	color: #fff;
}

.spx-account-card--referral a { color: inherit; }

/* The link truncates; the Copy button must never be pushed off the card.
   Scoped to this card so [spr_referral_link] is untouched everywhere else. */
.spx-account-card--referral .spx-referral-link {
	max-width: none;
}

.spx-account-card--referral .spx-referral-link__row {
	flex-wrap: nowrap;
}

.spx-account-card--referral .spx-referral-link__url {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border-color: rgba(255, 255, 255, .5);
}

.spx-account-card--referral .spx-referral-link__copy {
	flex: 0 0 auto;
	background: #fff;
	color: var(--spx-ac-pink);
	font-weight: 600;
}

.spx-account-card--referral .spx-referral-link__copy.is-copied {
	background: var(--wp--preset--color--accent, #67f5f9);
	color: #1c1c1c;
}

/* -------------------------------------------------------------------------
   Row lists — orders and tickets
   ------------------------------------------------------------------------- */

.spx-account-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.spx-account-list__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em 0.75em;
	padding-block: 0.75em;
	border-block-start: 1px solid var(--spx-ac-border);
}

.spx-account-list__row:first-child {
	border-block-start: 0;
	padding-block-start: 0;
}

.spx-account-list__main {
	min-width: 0;
	flex: 1 1 12rem;
}

.spx-account-list__link {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}

.spx-account-list__meta {
	display: block;
	font-size: 0.8125rem;
	color: var(--spx-ac-muted);
}

.spx-account-list__aside {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.5em;
}

.spx-account-pill {
	padding-inline: 0.6em;
	padding-block: 0.15em;
	border-radius: var(--spr-radius-pill, 9999px);
	background: var(--wp--preset--color--grey-section, #f1f1f2);
	font-size: 0.75rem;
	line-height: 1.6;
	white-space: nowrap;
}

.spx-account-btn {
	display: inline-block;
	padding-inline: 1em;
	padding-block: 0.4em;
	border: 1px solid var(--spx-ac-pink);
	border-radius: var(--spr-radius-pill, 9999px);
	background: var(--spx-ac-pink);
	color: #fff;
	font-size: 0.8125rem;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.spx-account-btn:hover,
.spx-account-btn:focus {
	background: var(--wp--preset--color--primary-hover, #c51f80);
	border-color: var(--wp--preset--color--primary-hover, #c51f80);
	color: #fff;
}

/* The tickets card's New ticket button sits in the header, on white. */
.spx-account-card--tickets .spx-account-card__action {
	color: #fff;
}

/* -------------------------------------------------------------------------
   Single column
   ------------------------------------------------------------------------- */

@media (max-width: 782px) {
	.spx-account-cards {
		grid-template-columns: 1fr;
	}
}