﻿/**
 * Mi cuenta — estilos migrados desde woodmart-child/style.css
 * (dashboard Discord, VIP games, IDs, empty states, progreso suscripcion).
 * Se carga solo en el child Hello / preview.
 */

/*
 * Mi cuenta dashboard: avatar + nombre sobre banner Discord (GIF animado si a_).
 */
.woocommerce-account .ls-account-hello {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0 0 1em;
	padding: 16px 18px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: #1e1f22;
	line-height: 1.3;
	isolation: isolate;
}

/*
 * Con banner Discord: la imagen define la altura (ratio real, tipico 600x240).
 * Grid apila imagen + saludo; object-fit cover recortaba arriba y abajo.
 */
.woocommerce-account .ls-account-hello.has-banner {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-height: 0;
	padding: 0;
}

.woocommerce-account .ls-account-hello-banner {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.woocommerce-account .ls-account-hello.has-banner .ls-account-hello-banner {
	position: relative;
	inset: auto;
	grid-area: 1 / 1;
	align-self: stretch;
}

.woocommerce-account .ls-account-hello-banner__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.woocommerce-account .ls-account-hello.has-banner .ls-account-hello-banner__img {
	height: auto;
	object-fit: contain;
	object-position: center;
}

.woocommerce-account .ls-account-hello.has-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			0deg,
			rgba(10, 10, 12, 0.72) 0%,
			rgba(10, 10, 12, 0.18) 38%,
			rgba(10, 10, 12, 0) 55%
		),
		linear-gradient(
			90deg,
			rgba(10, 10, 12, 0.72) 0%,
			rgba(10, 10, 12, 0.45) 45%,
			rgba(10, 10, 12, 0.55) 100%
		);
}

.woocommerce-account .ls-account-hello-inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px 20px;
}

.woocommerce-account .ls-account-hello.has-banner .ls-account-hello-inner {
	grid-area: 1 / 1;
	align-self: stretch;
	width: 100%;
	box-sizing: border-box;
	/* Reserva la franja inferior para los IDs. */
	padding: 16px 18px 52px;
}

/* IDs en el borde inferior del banner Discord. */
.woocommerce-account .ls-account-hello.has-banner .ls-account-hello-ids {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 12px;
	margin-left: 0;
	justify-content: space-between;
	align-items: flex-end;
	gap: 8px 16px;
}

.woocommerce-account .ls-account-hello-avatar {
	display: block;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	background: #2b2d31;
	border: 4px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.woocommerce-account .ls-account-hello-text {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4em;
	color: #ffffff;
	font-size: 16px;
	line-height: 1.35;
	flex-shrink: 0;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* Nombre del clan Discord (antes del display name). Color = rol Discord si existe. */
.woocommerce-account .ls-account-hello-clan {
	font-weight: 700;
	color: #ffffff;
}

.woocommerce-account .ls-account-hello-clan.has-color {
	/* El color inline viene de Discord; la sombra mantiene legibilidad sobre banner. */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

.woocommerce-account .ls-account-hello-text strong {
	color: #ffffff;
	font-weight: 700;
}

/* IDs a la derecha del saludo (Discord, Steam, EOS, Bohemia, Hash). */
.woocommerce-account .ls-account-hello-ids {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px 22px;
	margin-left: auto;
	min-width: 0;
}

.woocommerce-account .ls-account-hello-id {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	max-width: 240px;
}

.woocommerce-account .ls-account-hello-id__label {
	color: rgba(255, 255, 255, 0.72);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.woocommerce-account .ls-account-hello-id__value {
	color: #ffffff;
	font-size: 13px;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	word-break: break-all;
	user-select: all;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

@media (max-width: 1024px) {
	.woocommerce-account .ls-account-hello-ids {
		flex: 1 1 100%;
		margin-left: 0;
		padding-left: 180px;
	}

	.woocommerce-account .ls-account-hello.has-banner .ls-account-hello-ids {
		padding-left: 0;
	}
}

@media (max-width: 576px) {
	.woocommerce-account .ls-account-hello {
		padding: 14px;
	}

	.woocommerce-account .ls-account-hello.has-banner .ls-account-hello-inner {
		padding: 14px 14px 48px;
	}

	.woocommerce-account .ls-account-hello.has-banner .ls-account-hello-ids {
		left: 14px;
		right: 14px;
		bottom: 10px;
	}

	.woocommerce-account .ls-account-hello-avatar {
		width: 112px;
		height: 112px;
		border-width: 3px;
	}

	.woocommerce-account .ls-account-hello-ids {
		padding-left: 0;
	}

	.woocommerce-account .ls-account-hello-id {
		max-width: none;
		flex: 1 1 calc(50% - 11px);
	}
}

/*
 * Datos de la cuenta: el VIP de servidor se carga en la pestana de cada juego.
 */
.woocommerce-account .ls-account-vip-game-hint {
	margin: 1.25em 0 0.85em;
	padding: 14px 16px;
	border: 1px solid rgba(248, 101, 17, 0.55);
	border-radius: 10px;
	background: rgba(248, 101, 17, 0.16);
	color: #ffffff;
}

.woocommerce-account .ls-account-vip-game-hint__text {
	margin: 0;
	color: #ffffff;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.45;
}

.woocommerce-account .ls-account-vip-game-hint__games {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	margin: 10px 0 0;
}

.woocommerce-account .ls-account-vip-game-hint__games a {
	color: #ffb347;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: underline;
}

.woocommerce-account .ls-account-vip-game-hint__games a:hover,
.woocommerce-account .ls-account-vip-game-hint__games a:focus {
	color: #ffd27a;
}

/*
 * IDs de juego en pestanas por juego: una sola carga + aviso Discord.
 */
.woocommerce-account .ls-account-game-ids-notice {
	margin: 0 0 1.25em;
	padding: 14px 16px;
	border: 1px solid rgba(248, 101, 17, 0.55);
	border-radius: 10px;
	background: rgba(248, 101, 17, 0.16);
	color: #ffffff;
}

.woocommerce-account .ls-account-game-ids-notice__title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #ffb347;
}

.woocommerce-account .ls-account-game-ids-notice__text {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.45;
	color: #ffffff;
}

.woocommerce-account .ls-account-game-ids-notice__action {
	margin: 0;
}

.woocommerce-account .ls-account-game-ids-notice__link {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	color: #ffb347;
	text-decoration: underline;
}

.woocommerce-account .ls-account-game-ids-notice__link:hover,
.woocommerce-account .ls-account-game-ids-notice__link:focus {
	color: #ffffff;
}

.woocommerce-account .ls-account-game-id-row .description {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.4;
	opacity: 0.9;
}

.woocommerce-account .ls-account-game-id-input--locked {
	cursor: not-allowed;
	opacity: 0.85;
	background: rgba(0, 0, 0, 0.4) !important;
	background-color: rgba(0, 0, 0, 0.4) !important;
}

.woocommerce-account .ls-account-game-id-locked-hint {
	color: #ffb347;
}

.woocommerce-account .ls-account-game-id-row.is-invalid-format .woocommerce-Input {
	border-color: #e74c3c;
}

.woocommerce-account .ls-account-game-id-invalid-hint {
	display: block;
	margin-top: 6px;
	color: #ff6b6b;
	font-weight: 600;
}

.woocommerce-account .ls-account-squad-banner-preview-wrap {
	display: block;
	margin: 8px 0;
	max-width: 100%;
}

.woocommerce-account .ls-account-squad-banner-preview {
	display: block;
	width: 100%;
	max-width: 200px;
	height: auto;
	aspect-ratio: 200 / 32;
	object-fit: contain;
	background: #111111;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 6px;
}

.woocommerce-account .ls-account-squad-banner-file {
	display: block;
	margin: 6px 0 8px;
	max-width: 100%;
	color: #ffffff;
}

.woocommerce-account .ls-account-squad-banner-choose-hint {
	margin: 8px 0 0;
	color: #ffb347;
}

.woocommerce-account .ls-account-squad-banner-picks.has-click-cue {
	margin-top: 12px;
}

.woocommerce-account .ls-account-squad-banner-picks,
.ls-account-squad-banner-picks {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px;
	margin: 12px 0;
}

/* La card: miniatura 200x32; la etiqueta puede ser mas ancha para no cortar el nombre. */
.woocommerce-account .ls-account-squad-banner-pick,
.ls-account-squad-banner-pick {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 0 0 auto;
	width: auto;
	min-width: 200px;
	max-width: min(360px, 100%);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	box-sizing: border-box;
	overflow: visible;
	gap: 14px;
}

/* Marco fijo: aunque Woodmart agrande el <button>, la etiqueta no se tapa. */
.woocommerce-account .ls-account-squad-banner-pick-frame,
.ls-account-squad-banner-pick-frame {
	display: block;
	box-sizing: border-box;
	flex: 0 0 32px;
	width: 200px;
	max-width: 100%;
	height: 32px;
	min-height: 32px;
	max-height: 32px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 6px;
	position: relative;
	z-index: 0;
	isolation: isolate;
}

.woocommerce-account .ls-account-squad-banner-pick.is-selected .ls-account-squad-banner-pick-frame,
.ls-account-squad-banner-pick.is-selected .ls-account-squad-banner-pick-frame {
	box-shadow: 0 0 10px rgba(254, 154, 12, 0.4);
	border-radius: 6px;
}

/* Mismo hueco que el preview vacio (200x32, borde fino, fondo oscuro). */
.woocommerce-account .ls-account-squad-banner-pick-hit,
.ls-account-squad-banner-pick-hit {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 32px;
	min-height: 32px;
	max-height: 32px;
	padding: 0;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.35);
	overflow: hidden;
	cursor: pointer;
	text-align: left;
	line-height: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 0;
}

.woocommerce form .woocommerce-account button.ls-account-squad-banner-pick-hit,
.woocommerce-account form button.ls-account-squad-banner-pick-hit,
.woocommerce-EditAccountForm button.ls-account-squad-banner-pick-hit,
.woocommerce-account button.ls-account-squad-banner-pick-hit,
.woocommerce-account button.button.ls-account-squad-banner-pick-hit,
.woocommerce-account .woocommerce-Button.ls-account-squad-banner-pick-hit,
.woocommerce-account button.ls-account-squad-banner-pick-hit:hover,
.woocommerce-account button.ls-account-squad-banner-pick-hit:focus,
.woocommerce-account button.ls-account-squad-banner-pick-hit:active {
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 32px !important;
	min-height: 32px !important;
	max-height: 32px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
	border-radius: 6px !important;
	background: rgba(0, 0, 0, 0.35) !important;
	color: inherit !important;
	box-shadow: none !important;
	line-height: 0 !important;
	text-transform: none !important;
	font-size: 0 !important;
	font-weight: inherit !important;
	letter-spacing: 0 !important;
	overflow: hidden !important;
	vertical-align: top !important;
	transform: none !important;
}

.woocommerce-account .ls-account-squad-banner-pick.is-selected .ls-account-squad-banner-pick-hit,
.ls-account-squad-banner-pick.is-selected .ls-account-squad-banner-pick-hit,
.woocommerce-account .ls-account-squad-banner-pick.is-selected button.ls-account-squad-banner-pick-hit,
.woocommerce-account .ls-account-squad-banner-pick.is-selected button.ls-account-squad-banner-pick-hit:hover,
.woocommerce-account .ls-account-squad-banner-pick.is-selected button.ls-account-squad-banner-pick-hit:focus {
	border-color: #f86511 !important;
	box-shadow: none !important;
}

.woocommerce-account .ls-account-squad-banner-pick-hit img,
.ls-account-squad-banner-pick-hit img {
	display: block;
	width: 200px;
	max-width: 100%;
	height: 32px;
	aspect-ratio: 200 / 32;
	object-fit: contain;
	background: #111111;
	border-radius: 5px;
}

.woocommerce-account .ls-account-squad-banner-pick-hit.is-empty,
.ls-account-squad-banner-pick-hit.is-empty {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100%;
	max-width: 100%;
	height: 32px;
	box-sizing: border-box;
	aspect-ratio: 200 / 32;
	background: #1a1a1a !important;
	border: 1px dashed #666666 !important;
	border-radius: 5px;
	text-align: center !important;
	font-size: 11px !important;
	line-height: 1 !important;
}

.woocommerce form .woocommerce-account button.ls-account-squad-banner-pick-hit.is-empty,
.woocommerce-account form button.ls-account-squad-banner-pick-hit.is-empty,
.woocommerce-EditAccountForm button.ls-account-squad-banner-pick-hit.is-empty,
.woocommerce-account button.ls-account-squad-banner-pick-hit.is-empty,
.woocommerce-account button.button.ls-account-squad-banner-pick-hit.is-empty {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	font-size: 11px !important;
	line-height: 1 !important;
}

.woocommerce-account .ls-account-squad-banner-pick-empty,
.ls-account-squad-banner-pick-empty {
	display: block;
	margin: 0 auto;
	font-size: 11px !important;
	line-height: 1 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #bdbdbd;
	text-align: center;
}

.woocommerce-account .ls-account-squad-banner-pick-radio,
.ls-account-squad-banner-pick-radio {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.woocommerce-account .ls-account-squad-banner-pick-meta,
.ls-account-squad-banner-pick-meta {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
	width: max-content;
	max-width: 100%;
	position: relative;
	z-index: 2;
	margin: 0;
	padding: 2px 0 0;
	color: #ffffff;
	font-weight: 700;
	line-height: 1.35;
	pointer-events: none;
}

.woocommerce-account .ls-account-squad-banner-pick-name,
.ls-account-squad-banner-pick-name {
	flex: 0 1 auto;
	min-width: 0;
	overflow: visible;
	text-overflow: clip;
	white-space: nowrap;
}

.woocommerce-account .ls-account-squad-banner-pick-badge,
.ls-account-squad-banner-pick-badge {
	flex: 0 0 auto;
	margin-left: 0;
	color: #111111;
	background: #ffb347;
	border-radius: 999px;
	padding: 2px 8px;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.woocommerce-account .ls-account-squad-banner-upload-label {
	margin: 12px 0 0;
	color: #ffffff;
}

.woocommerce-account .ls-account-squad-banner-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 6px 0 0;
}

/* Preview inmediata al elegir archivo: ver assets/squad-banner/squad-banner-picker.css */

.woocommerce-account .ls-account-squad-banner-toolbar .ls-account-squad-banner-file {
	margin: 0;
}

.woocommerce-account .ls-account-squad-banner-clan-btn {
	margin: 0;
	white-space: nowrap;
}

/* Recuadro de banner propio: mismo bloque que el de clan. */
.woocommerce-account .ls-account-squad-banner-personal,
.woocommerce-account .ls-account-squad-banner-clan {
	margin: 16px 0 0;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.25);
}

.woocommerce-account .ls-account-squad-banner-personal-title,
.woocommerce-account .ls-account-squad-banner-clan-title {
	margin: 0 0 8px;
	font-weight: 700;
	color: #ffffff;
}

.woocommerce-account .ls-account-squad-banner-personal-missing,
.woocommerce-account .ls-account-squad-banner-clan-missing {
	display: block;
	margin: 0 0 8px;
	color: #ffb347;
}

.woocommerce-account .ls-account-squad-banner-clan-none {
	display: block;
	margin: 10px 0 0;
	color: #ffb347;
}

.woocommerce-account .ls-account-squad-banner-clan-actions {
	margin: 8px 0 0;
}

/* Banner cargado sin EOS ID: no se publica en PlayerPrefixes. */
.woocommerce-account .ls-account-squad-banner-eos-warning,
.ls-account-squad-banner-eos-warning {
	display: block;
	box-sizing: border-box;
	margin: 12px 0;
	padding: 12px 14px;
	border: 1px solid #c47b1a;
	border-left-width: 4px;
	background: #2a1f12;
	color: #ffe0a8;
}

.woocommerce-account .ls-account-squad-banner-eos-warning__title,
.ls-account-squad-banner-eos-warning__title {
	margin: 0 0 6px;
	font-weight: 700;
	color: #ffb347;
}

.woocommerce-account .ls-account-squad-banner-eos-warning__text,
.ls-account-squad-banner-eos-warning__text {
	margin: 0;
	line-height: 1.45;
	color: #ffe0a8;
}

/* Boton Guardar cambios: pastilla naranja (banners, saludos e IDs). */
.woocommerce-EditAccountForm .ls-account-edit-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 16px 0 0;
}

.woocommerce-EditAccountForm .ls-account-edit-actions .button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 41px;
	margin: 0 !important;
	padding: 10px 28px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--btn-accented-bgcolor, #fe9a0c) !important;
	background-color: var(--btn-accented-bgcolor, #fe9a0c) !important;
	background-image: none !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
}

.woocommerce-account .ls-account-donor-thanks {
	margin: 0 0 1.25em;
	padding: 14px 16px;
	border: 1px solid rgba(248, 101, 17, 0.45);
	border-radius: 10px;
	background: rgba(248, 101, 17, 0.14);
	color: #ffffff;
}

/* Debajo de la grilla de accesos rapidos del dashboard. */
.woocommerce-account .wd-my-account-links + .ls-account-donor-thanks {
	margin-top: 1.25em;
}

.woocommerce-account .ls-account-donor-thanks__title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #ffb347;
}

.woocommerce-account .ls-account-donor-thanks__text {
	margin: 0 0 4px;
	font-size: 14px;
	line-height: 1.45;
	color: #ffffff;
}

.woocommerce-account .ls-account-donor-thanks__note {
	margin: 0;
	font-size: 12px;
	line-height: 1.35;
	opacity: 0.85;
	color: #ffffff;
}

/* Acceso VIP por juego (flags Si/No desde checkout). */
.woocommerce-account .ls-account-vip-games {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 1.25em;
	padding: 14px 16px;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.woocommerce-account .ls-account-vip-games__title {
	color: rgba(255, 255, 255, 0.7);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.woocommerce-account .ls-account-vip-games__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
}

.woocommerce-account .ls-account-vip-games__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.04);
	color: #ffffff;
	font-size: 13px;
	line-height: 1.2;
}

.woocommerce-account .ls-account-vip-games__item.is-active {
	border-color: rgba(248, 101, 17, 0.7);
	background: rgba(248, 101, 17, 0.14);
}

.woocommerce-account .ls-account-vip-games__game {
	color: #ffffff;
	font-weight: 600;
}

.woocommerce-account .ls-account-vip-games__flag {
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.woocommerce-account .ls-account-vip-games__item.is-active .ls-account-vip-games__flag {
	color: #f86511;
}

@media (max-width: 576px) {
	.woocommerce-account .ls-account-vip-games__item {
		flex: 1 1 calc(50% - 10px);
	}
}

/*
 * Juego con VIP activo al que le falta el ID: se marca en ambar para que no se
 * confunda con un "Si" que ya esta funcionando en el servidor.
 */
.woocommerce-account .ls-account-vip-games__item.needs-id {
	border-color: rgba(255, 176, 32, 0.75);
	background: rgba(255, 176, 32, 0.14);
}

.woocommerce-account .ls-account-vip-games__item.needs-id .ls-account-vip-games__flag {
	color: #ffb020;
}

/*
 * Aviso de VIP activo que no llega al servidor por falta del ID de juego.
 * Ambar sobre el fondo oscuro del dashboard: alto contraste y distinto del
 * naranja de marca, que aca significa "todo bien".
 */
.woocommerce-account .ls-account-vip-missing-id {
	margin: 0 0 1.25em;
	padding: 14px 16px;
	border: 1px solid rgba(255, 176, 32, 0.55);
	border-left: 4px solid #ffb020;
	background: rgba(255, 176, 32, 0.1);
	color: #ffffff;
}

.woocommerce-account .ls-account-vip-missing-id__title {
	margin: 0 0 8px;
	color: #ffb020;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.woocommerce-account .ls-account-vip-missing-id__row {
	margin: 0 0 8px;
	color: rgba(255, 255, 255, 0.92);
	font-size: 14px;
	line-height: 1.5;
}

.woocommerce-account .ls-account-vip-missing-id__row strong {
	color: #ffffff;
	font-weight: 700;
}

.woocommerce-account .ls-account-vip-missing-id__action {
	margin: 12px 0 0;
}

.woocommerce-account .ls-account-vip-missing-id__btn {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 999px;
	background: #f86511;
	color: #ffffff !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	transition: background .15s ease;
}

.woocommerce-account .ls-account-vip-missing-id__btn:hover,
.woocommerce-account .ls-account-vip-missing-id__btn:focus {
	background: #d95309;
	color: #ffffff !important;
}

/* Estados vacios de Pedidos / Suscripciones / etc. */
.woocommerce-account .ls-account-empty {
	box-sizing: border-box;
	margin: 0;
	padding: 36px 24px 32px;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: center;
	width: 100%;
}

.woocommerce-account .ls-account-empty__title {
	margin: 0 0 10px;
	color: #ffffff;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

.woocommerce-account .ls-account-empty__text {
	margin: 0 auto 22px;
	max-width: 36em;
	color: #d4d4d4;
	font-size: 14px;
	line-height: 1.45;
}

.woocommerce-account .ls-account-empty__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.woocommerce-account .ls-account-empty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 140px;
	min-height: 36px;
	padding: 0.4rem 1.35rem;
	border: 0;
	border-radius: 999px;
	background: var(--ls-brand, #f89b1c) !important;
	color: #ffffff !important;
	font-family: var(--ls-font-display, "Barlow Condensed", "Arial Narrow", sans-serif);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background 0.15s ease, filter 0.15s ease;
}

.woocommerce-account .ls-account-empty__btn:hover,
.woocommerce-account .ls-account-empty__btn:focus-visible {
	background: var(--ls-brand-hot, #f86511) !important;
	color: #ffffff !important;
	filter: brightness(1.05);
}

.woocommerce-account .ls-account-empty__btn--ghost {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.45);
}

.woocommerce-account .ls-account-empty__btn--ghost:hover,
.woocommerce-account .ls-account-empty__btn--ghost:focus-visible {
	background: rgba(255, 255, 255, 0.1) !important;
	border-color: #ffffff;
}

.woocommerce-account .ls-account-dashboard-lead {
	margin: 0 0 1em;
	color: #e8e8e8;
	font-size: 14px;
	line-height: 1.45;
}

.woocommerce-account .ls-account-dashboard-lead a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.woocommerce-account .ls-account-empty__pager {
	color: #e8e8e8;
}

.woocommerce-account .ls-account-empty__pager a {
	color: #ffffff;
	text-decoration: underline;
}

@media (max-width: 576px) {
	.woocommerce-account .ls-account-empty {
		padding: 28px 16px 24px;
	}

	.woocommerce-account .ls-account-empty__btn {
		min-width: 100%;
	}
}

/*
 * Mi cuenta > Suscripciones: barra de tiempo restante hasta el vencimiento.
 * Texto blanco sobre fondo oscuro; relleno naranja del sitio (rojo si queda poco).
 */
.woocommerce-account .ls-sub-progress {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	text-align: left;
	color: #ffffff;
}

.woocommerce-account .ls-sub-progress__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
}

.woocommerce-account .ls-sub-progress__label {
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.woocommerce-account .ls-sub-progress__date {
	color: #e8e8e8;
	font-size: 13px;
	line-height: 1.3;
}

.woocommerce-account .ls-sub-progress__track {
	display: block;
	height: 12px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.woocommerce-account .ls-sub-progress__fill {
	display: block;
	height: 100%;
	min-width: 0;
	max-width: 100%;
	border-radius: 999px;
	background: #22c55e;
}

.woocommerce-account .ls-sub-progress--warn .ls-sub-progress__fill {
	background: #f86511;
}

.woocommerce-account .ls-sub-progress--danger .ls-sub-progress__fill,
.woocommerce-account .ls-sub-progress--expired .ls-sub-progress__fill,
.woocommerce-account .ls-sub-progress--cancelled .ls-sub-progress__fill {
	background: #ef4444;
}

.woocommerce-account .ls-sub-progress--expired,
.woocommerce-account .ls-sub-progress--cancelled {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}

.woocommerce-account .ls-sub-progress--high {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}

.woocommerce-account .ls-sub-progress__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 160px;
	min-width: 0;
}

.woocommerce-account .ls-sub-expired-gif {
	display: block;
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	object-fit: contain;
	background: transparent;
	border-radius: 8px;
	pointer-events: none;
}

.woocommerce-account .ls-sub-high-gif {
	display: block;
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	object-fit: contain;
	background: transparent;
	border-radius: 8px;
	pointer-events: none;
}

.woocommerce-account .ls-sub-progress--expired .ls-sub-progress__label {
	color: #ffb4b4;
}

.woocommerce-account .ls-sub-progress--cancelled .ls-sub-progress__label {
	color: #ef4444;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.woocommerce-account .woocommerce-orders-table__row--status-cancelled .subscription-status,
.woocommerce-account .woocommerce-orders-table__row--status-pending-cancel .subscription-status {
	color: #ef4444;
	font-weight: 700;
}

/* Estados de suscripcion en Mi cuenta: Pendiente amarillo, Activada verde. */
.woocommerce-account .woocommerce-orders-table__row--status-pending .subscription-status,
.woocommerce-account .woocommerce-orders-table__row--status-on-hold .subscription-status {
	color: #f5c518;
	font-weight: 700;
}

.woocommerce-account .woocommerce-orders-table__row--status-active .subscription-status {
	color: #22c55e;
	font-weight: 700;
}

/* Pedidos: Completado se muestra como Activada (solo etiqueta visual en Mi cuenta). */
.woocommerce-account .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-orders-table__row--status-completed .order-status {
	color: #22c55e;
	font-weight: 700;
}

.woocommerce-account .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-orders-table__row--status-pending .order-status,
.woocommerce-account .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status,
.woocommerce-account .woocommerce-orders-table__row--status-on-hold .order-status {
	color: #f5c518;
	font-weight: 700;
}

.woocommerce-account .woocommerce-orders-table--subscriptions .ls-sub-has-progress > td {
	border-bottom: 0;
	padding-bottom: 8px;
}

/* Titulos de seccion en listado unificado Flexible + Mercado Pago. */
.woocommerce-account .ls-account-subs-section-title {
	margin: 1.75rem 0 0.85rem;
	color: #ffffff;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.woocommerce-account .ls-account-mp-subscriptions {
	margin-top: 0.5rem;
}

/* Solo administradores: quitar de la cuenta una suscripcion ya cancelada. */
.woocommerce-account .woocommerce-orders-table a.ls-sub-admin-delete,
.woocommerce-account .my_account_subscriptions a.ls-sub-admin-delete {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 40px;
	margin: 4px 0 4px 8px;
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: #ffffff;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
}

.woocommerce-account .woocommerce-orders-table a.ls-sub-admin-delete:hover,
.woocommerce-account .woocommerce-orders-table a.ls-sub-admin-delete:focus,
.woocommerce-account .my_account_subscriptions a.ls-sub-admin-delete:hover,
.woocommerce-account .my_account_subscriptions a.ls-sub-admin-delete:focus {
	background: #ef4444;
	border-color: #ef4444;
	color: #ffffff;
}

.woocommerce-account .woocommerce-orders-table--subscriptions .ls-sub-product-name {
	display: inline;
	margin-left: 8px;
	color: var(--ls-brand, #f89b1c);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

.woocommerce-account .woocommerce-orders-table--subscriptions a .ls-sub-product-name {
	color: var(--ls-brand, #f89b1c);
}

/*
 * Numero de suscripcion (#27495) y de pedido (#27494).
 * WooCommerce pinta esos <a> de violeta; se igualan al naranja de marca.
 */
.woocommerce-account .woocommerce-orders-table__cell-order-number a:not(.button),
.woocommerce-account .woocommerce-orders-table__cell-subscription-id a:not(.button),
.woocommerce-account td.order-number a:not(.button),
.woocommerce-account th.woocommerce-orders-table__cell-order-number a:not(.button),
.woocommerce-account .woocommerce-orders-table--subscriptions .order-number > a,
.woocommerce-account mark.order-number {
	color: var(--ls-brand, #f89b1c) !important;
}

.woocommerce-account .woocommerce-orders-table__cell-order-number a:not(.button):hover,
.woocommerce-account .woocommerce-orders-table__cell-order-number a:not(.button):focus-visible,
.woocommerce-account .woocommerce-orders-table__cell-subscription-id a:not(.button):hover,
.woocommerce-account .woocommerce-orders-table__cell-subscription-id a:not(.button):focus-visible,
.woocommerce-account td.order-number a:not(.button):hover,
.woocommerce-account td.order-number a:not(.button):focus-visible,
.woocommerce-account th.woocommerce-orders-table__cell-order-number a:not(.button):hover,
.woocommerce-account th.woocommerce-orders-table__cell-order-number a:not(.button):focus-visible,
.woocommerce-account .woocommerce-orders-table--subscriptions .order-number > a:hover,
.woocommerce-account .woocommerce-orders-table--subscriptions .order-number > a:focus-visible {
	color: var(--ls-brand-hot, #f86511) !important;
}

.woocommerce-account .ls-sub-no-renew {
	color: #ef4444;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.35;
}

/* Dias restantes junto a finalizacion / proximo cobro: (40 días). */
.woocommerce-account .ls-sub-days-left {
	color: #d4d4d4;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	white-space: nowrap;
}

/* Nombre de producto: naranja solo el enlace. La cantidad (x1) queda blanca. */
.woocommerce-account table.shop_table.order_details td.product-name {
	color: #ffffff;
}

.woocommerce-account table.shop_table.order_details td.product-name a,
.woocommerce-account table.shop_table.order_details td.product-name a:visited {
	color: var(--ls-brand, #f89b1c);
}

.woocommerce-account table.shop_table.order_details td.product-name a:hover,
.woocommerce-account table.shop_table.order_details td.product-name a:focus-visible {
	color: var(--ls-brand-hot, #f86511);
}

.woocommerce-account table.shop_table.order_details td.product-name .product-quantity {
	color: #ffffff !important;
	font-weight: 700;
}

/*
 * view-subscription: botones de Acciones (Cancelar, Anadir pago, Resubscribe, etc.).
 * HTML WCS: a.woocommerce-button.button.{cancel|change_payment_method|resubscribe}[.wcs_block_ui_on_click]
 * Pastilla naranja, texto blanco centrado (evita blanco-sobre-blanco del tema).
 */
.woocommerce-account .shop_table.subscription_details a.woocommerce-button.button,
.woocommerce-account .subscription_details a.woocommerce-button.button,
.woocommerce-account .subscription_details a.button.cancel,
.woocommerce-account table.shop_table.subscription_details a.button.cancel,
.woocommerce-account .subscription_details a.button.change_payment_method,
.woocommerce-account .subscription_details a.button.resubscribe,
.woocommerce-account .subscription_details a.button.reactivate,
.woocommerce-account .subscription_details a.button.wcs_block_ui_on_click {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 140px;
	min-height: 36px;
	margin: 4px 6px 4px 0 !important;
	padding: 0.4rem 1.35rem !important;
	border: 0 !important;
	border-radius: 999px !important;
	/* Mismo naranja pastilla que DONAR (--ls-brand), no el hover oscuro. */
	background: var(--ls-brand, #f89b1c) !important;
	background-color: var(--ls-brand, #f89b1c) !important;
	background-image: none !important;
	color: #ffffff !important;
	font-family: var(--ls-font-display, "Barlow Condensed", "Arial Narrow", sans-serif);
	font-size: 0.9rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.06em;
	text-align: center !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.15s ease, filter 0.15s ease;
}

.woocommerce-account .shop_table.subscription_details a.woocommerce-button.button:hover,
.woocommerce-account .shop_table.subscription_details a.woocommerce-button.button:focus,
.woocommerce-account .shop_table.subscription_details a.woocommerce-button.button:focus-visible,
.woocommerce-account .subscription_details a.woocommerce-button.button:hover,
.woocommerce-account .subscription_details a.woocommerce-button.button:focus,
.woocommerce-account .subscription_details a.woocommerce-button.button:focus-visible,
.woocommerce-account .subscription_details a.button.cancel:hover,
.woocommerce-account .subscription_details a.button.cancel:focus,
.woocommerce-account .subscription_details a.button.cancel:focus-visible,
.woocommerce-account table.shop_table.subscription_details a.button.cancel:hover,
.woocommerce-account table.shop_table.subscription_details a.button.cancel:focus,
.woocommerce-account table.shop_table.subscription_details a.button.cancel:focus-visible,
.woocommerce-account .subscription_details a.button.change_payment_method:hover,
.woocommerce-account .subscription_details a.button.change_payment_method:focus,
.woocommerce-account .subscription_details a.button.resubscribe:hover,
.woocommerce-account .subscription_details a.button.resubscribe:focus,
.woocommerce-account .subscription_details a.button.reactivate:hover,
.woocommerce-account .subscription_details a.button.reactivate:focus,
.woocommerce-account .subscription_details a.button.wcs_block_ui_on_click:hover,
.woocommerce-account .subscription_details a.button.wcs_block_ui_on_click:focus {
	background: var(--ls-brand-hot, #f86511) !important;
	background-color: var(--ls-brand-hot, #f86511) !important;
	color: #ffffff !important;
	text-decoration: none !important;
	filter: brightness(1.05);
}

/*
 * Columna Total: codigo de moneda (USD) naranja; $ y el monto en blanco.
 * El HTML de wc_price es: <span class="woocommerce-Price-currencySymbol">USD</span>&nbsp;$7
 */
.woocommerce-account .woocommerce-orders-table--subscriptions .woocommerce-orders-table__cell-subscription-total,
.woocommerce-account .woocommerce-orders-table--subscriptions .woocommerce-orders-table__cell-subscription-total .woocommerce-Price-amount,
.woocommerce-account .woocommerce-orders-table--subscriptions .woocommerce-orders-table__cell-subscription-total .woocommerce-Price-amount bdi {
	color: #ffffff !important;
}

.woocommerce-account .woocommerce-orders-table--subscriptions .woocommerce-orders-table__cell-subscription-total .woocommerce-Price-currencySymbol {
	color: #f86511 !important;
}

.woocommerce-account .woocommerce-orders-table--subscriptions .ls-sub-progress-cell {
	padding-top: 0;
	padding-bottom: 18px;
}

.woocommerce-account .subscription_details .ls-sub-progress {
	min-width: 220px;
}

@media screen and (max-width: 768px) {
	.woocommerce-account .woocommerce-orders-table--subscriptions .ls-sub-progress-cell::before {
		display: none;
	}

	.woocommerce-account .woocommerce-orders-table--subscriptions .ls-sub-progress-cell {
		text-align: left;
		padding-top: 4px;
	}
}

/* Accent Discord cuando no hay banner. */
.woocommerce-account .ls-account-hello.has-accent {
	background: linear-gradient(
		135deg,
		color-mix(in srgb, var(--ls-discord-accent, #5865f2) 35%, #1e1f22) 0%,
		#1e1f22 70%
	);
}

/* Paginas por juego: estado VIP grande + beneficios. */
.woocommerce-account .ls-account-game-vip {
	display: block;
	margin: 0 0 1.25rem;
	padding: 1.35rem 1.25rem 1.2rem;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	text-align: center;
	background: #1a1b1e;
}

.woocommerce-account .ls-account-game-vip.is-active.is-full {
	border-color: rgba(255, 176, 32, 0.55);
	background: linear-gradient(160deg, rgba(255, 176, 32, 0.22) 0%, #1a1b1e 55%);
}

.woocommerce-account .ls-account-game-vip.is-active.is-basico {
	border-color: rgba(88, 166, 255, 0.5);
	background: linear-gradient(160deg, rgba(88, 166, 255, 0.18) 0%, #1a1b1e 55%);
}

.woocommerce-account .ls-account-game-vip.is-active:not(.is-full):not(.is-basico) {
	border-color: rgba(63, 185, 80, 0.45);
	background: linear-gradient(160deg, rgba(63, 185, 80, 0.16) 0%, #1a1b1e 55%);
}

.woocommerce-account .ls-account-game-vip.is-inactive {
	border-color: rgba(255, 255, 255, 0.1);
	opacity: 0.92;
}

.woocommerce-account .ls-account-game-vip__game {
	margin: 0 0 0.35rem;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.woocommerce-account .ls-account-game-vip__label {
	margin: 0;
	font-size: clamp(1.85rem, 4.5vw, 2.75rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: 0.04em;
	color: #fff;
}

.woocommerce-account .ls-account-game-vip.is-active.is-full .ls-account-game-vip__label {
	color: #ffc857;
}

.woocommerce-account .ls-account-game-vip.is-active.is-basico .ls-account-game-vip__label {
	color: #8ec7ff;
}

.woocommerce-account .ls-account-game-vip.is-inactive .ls-account-game-vip__label {
	color: rgba(255, 255, 255, 0.55);
}

.woocommerce-account .ls-account-game-vip__sub {
	margin: 0.45rem 0 0;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.7);
}

.woocommerce-account .ls-account-game-page__intro {
	margin: 0 0 1rem;
	color: rgba(255, 255, 255, 0.78);
	line-height: 1.45;
}

.woocommerce-account .ls-account-game-page__benefits {
	margin: 0 0 1.25rem;
	padding: 0.9rem 1rem;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.03);
}

.woocommerce-account .ls-account-game-page__benefits-title {
	margin: 0 0 0.45rem;
	font-weight: 700;
	color: #fff;
}

.woocommerce-account .ls-account-game-page__benefits-list {
	margin: 0;
	padding-left: 1.15rem;
	color: rgba(255, 255, 255, 0.78);
}

.woocommerce-account .ls-account-game-page__benefits-list li + li {
	margin-top: 0.25rem;
}

.woocommerce-account .ls-account-game-page__warn {
	margin: 0 0 1.1rem;
	padding: 0.85rem 1rem;
	border-radius: 10px;
	border: 1px solid rgba(255, 176, 32, 0.45);
	background: rgba(255, 176, 32, 0.1);
	color: #ffe2a8;
}

.woocommerce-account .ls-account-game-page__warn p {
	margin: 0;
}

.woocommerce-account .ls-account-game-page__warn p + p {
	margin-top: 0.35rem;
}

.woocommerce-account .ls-account-game-page__empty {
	color: rgba(255, 255, 255, 0.65);
}

.woocommerce-account a.ls-account-vip-games__item {
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.woocommerce-account a.ls-account-vip-games__item:hover,
.woocommerce-account a.ls-account-vip-games__item:focus {
	border-color: rgba(255, 255, 255, 0.35);
}

/* Abrir soporte en Discord: pastilla morada, texto blanco. */
.woocommerce-account a.ls-vip-grupal-camaradas__link {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 2.75rem;
	margin: 0.35rem 0 0.15rem;
	padding: 0.65rem 1.35rem !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #5865f2 !important;
	background-color: #5865f2 !important;
	color: #ffffff !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-transform: none !important;
}

.woocommerce-account a.ls-vip-grupal-camaradas__link:hover,
.woocommerce-account a.ls-vip-grupal-camaradas__link:focus {
	background: #4752c4 !important;
	background-color: #4752c4 !important;
	color: #ffffff !important;
}


