/**
 *
 * Virtual Shop extension for the phpBB Forum Software package.
 *
 * @copyright (c) phpBB Limited <https://www.phpbb.com>, phpBB.nl <https://www.phpbbextnl.be>, SpIdErPiGgY
 * @license GNU General Public License, version 2 (GPL-2.0)
 *
 */

.virtualshop-page {
	margin: 12px 0 28px;
}

.virtualshop-surface {
	padding: 18px;
	border-radius: 22px;
	background:
		radial-gradient(circle at 8% 0, rgba(255, 222, 125, .20), transparent 26%),
		radial-gradient(circle at 92% 5%, rgba(180, 90, 255, .18), transparent 30%),
		linear-gradient(180deg, #f6f0ff 0%, #f2f5fb 54%, #faf7ff 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 14px 36px rgba(35, 32, 60, .08);
}

/* Hero */

.virtualshop-hero,
.virtualshop-inventory-hero {
	position: relative;
	overflow: hidden;
	margin-bottom: 18px;
	padding: 26px 28px;
	border-radius: 24px;
	background:
		radial-gradient(circle at top left, rgba(255, 216, 102, .42), transparent 32%),
		radial-gradient(circle at 90% 0, rgba(255, 129, 199, .35), transparent 34%),
		linear-gradient(135deg, #1f2740, #5b2d82 55%, #9b3f79);
	color: #fff;
	box-shadow: 0 18px 45px rgba(56, 34, 93, .28);
}

.virtualshop-hero {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: stretch;
}

.virtualshop-hero:after,
.virtualshop-inventory-hero:after {
	content: '';
	position: absolute;
	right: -30px;
	bottom: -80px;
	width: 210px;
	height: 210px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .10);
}

.virtualshop-hero-main,
.virtualshop-wallet,
.virtualshop-inventory-hero > * {
	position: relative;
	z-index: 1;
}

.virtualshop-kicker {
	display: inline-block;
	margin-bottom: 8px;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.virtualshop-hero h2,
.virtualshop-inventory-hero h2 {
	margin: 0 0 8px;
	color: #fff;
	font-size: 34px;
	line-height: 1.05;
}

.virtualshop-hero p,
.virtualshop-inventory-hero p {
	max-width: 720px;
	margin: 0;
	color: rgba(255, 255, 255, .88);
	font-size: 14px;
}

/* Wallet */

.virtualshop-wallet {
	display: grid;
	grid-template-columns: repeat(2, minmax(180px, 1fr));
	gap: 12px;
	min-width: 420px;
}

.virtualshop-wallet-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 76px;
	padding: 18px 20px;
	border-radius: 18px;
	background: rgba(255, 255, 255, .16);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
	backdrop-filter: blur(7px);
	color: #fff;
	text-align: left;
	text-decoration: none;
}

.virtualshop-wallet-card.inventory-link {
	background: rgba(255, 255, 255, .22);
	border: 1px solid rgba(255, 255, 255, .22);
}

.virtualshop-wallet-card span {
	display: block;
	margin-bottom: 8px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	opacity: .88;
}

.virtualshop-wallet-line {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.virtualshop-wallet-card strong {
	display: inline;
	margin: 0;
	font-size: clamp(22px, 1.9vw, 30px);
	line-height: 1.05;
	white-space: nowrap;
	color: #fff;
}

.virtualshop-wallet-card em {
	color: rgba(255, 255, 255, .9);
	opacity: 1;
	display: inline;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.1;
	font-style: normal;
	opacity: .88;
}

.virtualshop-wallet-card.link:hover {
	background: linear-gradient(135deg, #653295, #a34483);
	color: #fff;
	box-shadow: 0 12px 28px rgba(101, 50, 149, .35);
	transform: translateY(-2px);
	text-decoration: none;
}

/* Toolbar */

.virtualshop-toolbar,
.virtualshop-section-title {
	margin-bottom: 18px;
	padding: 14px;
	border-radius: 18px;
	background: rgba(255, 255, 255, .68);
	box-shadow: 0 8px 22px rgba(35, 32, 60, .06);
}

.virtualshop-section-title {
	padding: 16px 18px;
}

.virtualshop-section-title h2,
.virtualshop-section-title p {
	margin: 0;
}

.virtualshop-section-title p {
	margin-top: 4px;
	color: #5f6578;
}

.virtualshop-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.virtualshop-types {
	margin-top: 10px;
}

.virtualshop-chip {
	display: inline-block;
	padding: 8px 13px;
	border-radius: 999px;
	background: #fff;
	color: #48395f;
	text-decoration: none;
	font-weight: 700;
	box-shadow: 0 3px 10px rgba(35, 32, 60, .07);
}

.virtualshop-chip.active,
.virtualshop-chip:hover {
	background: linear-gradient(135deg, #5b2d82, #9b3f79);
	color: #fff;
	text-decoration: none;
}

/* Grid + cards */

.virtualshop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	max-width: 1180px;
	margin: 0 auto;
	align-items: stretch;
}

.virtualshop-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	overflow: hidden;
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 250, 255, .92));
	border: 1px solid rgba(137, 101, 174, .16);
	box-shadow: 0 14px 28px rgba(43, 34, 70, .11);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.virtualshop-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 22px 48px rgba(91, 45, 145, .20);
	border-color: rgba(132, 72, 185, .34);
}

.virtualshop-card.is-soldout {
	opacity: .72;
}

.virtualshop-card.rarity-common {
	border-color: rgba(120, 120, 120, .25);
}

.virtualshop-card.rarity-rare {
	border-color: rgba(45, 132, 255, .55);
	box-shadow: 0 14px 34px rgba(45, 132, 255, .13);
}

.virtualshop-card.rarity-epic {
	border-color: rgba(150, 76, 255, .65);
	box-shadow: 0 14px 36px rgba(150, 76, 255, .16);
}

.virtualshop-card.rarity-legendary {
	border-color: rgba(255, 181, 43, .78);
	box-shadow: 0 14px 38px rgba(255, 181, 43, .22);
}

.virtualshop-card.equipped:before {
	content: '★';
	position: absolute;
	right: 12px;
	top: 10px;
	z-index: 2;
	font-size: 21px;
	color: #ffb52b;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.virtualshop-image-wrap {
	display: block;
	height: 145px;
	margin: 10px 10px 0;
	border-radius: 14px;
	background:
		radial-gradient(circle at 32% 18%, rgba(255, 255, 255, .92), transparent 30%),
		linear-gradient(135deg, #eceff8, #e7dcf3);
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75);
}

.virtualshop-image-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .2s ease;
}

.virtualshop-card:hover .virtualshop-image-wrap img {
	transform: scale(1.045);
}

.virtualshop-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 13px 14px 14px;
}

.virtualshop-card-top {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	min-height: 28px;
}

.virtualshop-badge {
	display: inline-block;
	padding: 5px 8px;
	border-radius: 999px;
	font-size: 10px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: .01em;
	background: #efe4fb;
	color: #63308e;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .04);
}

.virtualshop-badge.rarity {
	background: rgba(104, 55, 166, .14);
	color: #6837a6;
}

.virtualshop-badge.type {
	background: rgba(30, 144, 255, .12);
	color: #1e6eb8;
}

.virtualshop-badge.sold {
	background: #ffe7e7;
	color: #9c2727;
}

.virtualshop-badge.equipped {
	background: rgba(255, 181, 43, .22);
	color: #8b5a00;
}

.virtualshop-card h3 {
	margin: 10px 0 6px;
	font-size: 17px;
	line-height: 1.12;
	letter-spacing: .01em;
	text-transform: uppercase;
}

.virtualshop-card h3 a {
	color: #0b5489;
	text-decoration: none;
}

.virtualshop-card h3 a:hover {
	color: #6d369d;
	text-decoration: none;
}

.virtualshop-card p {
	min-height: 46px;
	margin: 0 0 12px;
	color: #5c6478;
	font-size: 12px;
	line-height: 1.35;
}

/* Price + meta */

.virtualshop-price-line {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	max-width: 100%;
	padding: 9px 10px;
	margin: auto 0 12px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(255, 241, 189, .95), rgba(244, 225, 255, .96));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .70), 0 8px 18px rgba(91, 45, 145, .07);
	white-space: nowrap;
	overflow: hidden;
}

.virtualshop-price-line:before {
	content: '💰';
	flex: 0 0 auto;
	font-size: 15px;
	line-height: 1;
}

.virtualshop-price-line strong {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: clamp(15px, 1.1vw, 18px);
	line-height: 1.1;
	color: #623191;
	letter-spacing: .01em;
	white-space: nowrap;
}

.virtualshop-price-line span {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 800;
	color: #6a6376;
}

.virtualshop-meta {
	display: grid;
	grid-template-columns: 1fr;
	gap: 7px;
	margin: 0 0 14px;
}

.virtualshop-meta span {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #5f586d;
	font-size: 12px;
	font-weight: 800;
}

.virtualshop-meta span:first-child:before {
	content: '🏷️';
}

.virtualshop-meta span:last-child:before {
	content: '📦';
}

.virtualshop-passive {
	align-self: flex-start;
	margin: 0 0 12px;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(21, 170, 112, .12);
	color: #08784a;
	font-size: 12px;
	font-weight: 800;
}

/* Buttons */

.virtualshop-button,
.virtualshop-card .virtualshop-button,
.virtualshop-card a.virtualshop-button,
.virtualshop-card .button.virtualshop-button,
.virtualshop-detail-info .virtualshop-buy,
.virtualshop-actions .button,
.virtualshop-gift-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 34px;
	padding: 9px 14px !important;
	border: 0 !important;
	border-radius: 12px !important;
	box-sizing: border-box;
	background: linear-gradient(135deg, #653295, #a34483) !important;
	color: #fff !important;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .01em;
	text-shadow: none !important;
	box-shadow: 0 10px 22px rgba(101, 50, 149, .24);
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
}

.virtualshop-card .virtualshop-button:after,
.virtualshop-card a.virtualshop-button:after {
	content: '›';
	margin-left: 8px;
	font-size: 18px;
	line-height: 1;
}

.virtualshop-button:hover,
.virtualshop-card .virtualshop-button:hover,
.virtualshop-detail-info .virtualshop-buy:hover,
.virtualshop-actions .button:hover,
.virtualshop-gift-button:hover {
	background: linear-gradient(135deg, #7a3bb0, #bb4c95) !important;
	color: #fff !important;
	box-shadow: 0 14px 28px rgba(101, 50, 149, .32);
	text-decoration: none !important;
}

.virtualshop-buy {
	font-size: 15px;
	animation: virtualshopPulse 2.4s infinite;
}

/* Detail page */

.virtualshop-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 16px;
	padding: 8px 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .12);
	color: #ffffff;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
	backdrop-filter: blur(6px);
	transition: all .18s ease;
}

.virtualshop-back:hover {
	background: linear-gradient(135deg, #653295, #a34483);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(101, 50, 149, .28);
	text-decoration: none;
}

.virtualshop-detail {
	display: grid;
	grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
	gap: 22px;
	padding: 22px;
	border-radius: 24px;
	background: rgba(255, 255, 255, .86);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: 0 18px 48px rgba(30, 36, 52, .12);
}

.virtualshop-detail.rarity-legendary,
.virtualshop-detail.rarity-epic,
.virtualshop-detail.rarity-rare {
	box-shadow: 0 18px 60px rgba(91, 45, 145, .16);
}

.virtualshop-detail-image {
	min-height: 260px;
	max-height: 360px;
	border-radius: 20px;
	overflow: hidden;
	background: linear-gradient(135deg, #eef2f8, #e4dff1);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85);
}

.virtualshop-detail-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.virtualshop-detail-info h2 {
	margin: 14px 0 10px;
	font-size: 30px;
	line-height: 1.05;
	color: #252d3f;
}

.virtualshop-detail-desc {
	font-size: 15px;
	color: #586277;
}

.virtualshop-pricebox {
	display: inline-block;
	min-width: 220px;
	max-width: 100%;
	padding: 15px 18px;
	border-radius: 18px;
	background: linear-gradient(135deg, #fff7d7, #f4e9ff);
	margin: 14px 0;
	box-shadow: 0 8px 24px rgba(91, 45, 145, .10);
}

.virtualshop-pricebox span,
.virtualshop-pricebox em {
	display: block;
	font-size: 14px;
	color: #6b6377;
	font-style: normal;
	font-weight: 700;
}

.virtualshop-pricebox strong {
	display: block;
	font-size: 22px;
	line-height: 1;
	color: #5b2d82;
}

.virtualshop-stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 800;
	background: rgba(255, 255, 255, .08);
	color: #e6dcff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

/* Actions + gift */

.virtualshop-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.virtualshop-actions form {
	flex: 1 1 130px;
}

.virtualshop-gift-form {
	display: grid;
	gap: 7px;
	margin-top: 12px;
	padding: 10px;
	border: 1px solid rgba(91, 45, 130, .12);
	border-radius: 14px;
	background:
		radial-gradient(circle at 0 0, rgba(255, 213, 95, .18), transparent 45%),
		linear-gradient(135deg, rgba(255, 255, 255, .86), rgba(244, 233, 255, .86));
}

.virtualshop-gift-form:before {
	content: '🎁';
	font-size: 18px;
	line-height: 1;
}

.virtualshop-gift-form textarea,
.virtualshop-gift-form input[type="text"] {
	width: 100%;
	min-height: 34px;
	padding: 7px 9px;
	border: 1px solid rgba(91, 45, 130, .18);
	border-radius: 10px;
	box-sizing: border-box;
}

/* Profile showcase */

.virtualshop-profile-showcase {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.virtualshop-profile-showcase img,
.profile-virtualshop-equipped img {
	width: 34px;
	height: 34px;
	object-fit: cover;
	border-radius: 8px;
	padding: 2px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .12);
}

.virtualshop-profile-showcase img.equipped {
	box-shadow: 0 0 0 2px #ffb52b;
}

.profile-virtualshop-equipped {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.profile-virtualshop-equipped img {
	width: 24px;
	height: 24px;
	border-radius: 6px;
}

/* Misc */

.virtualshop-surface > .panel {
	border-radius: 18px;
}

.virtualshop-inventory-grid .virtualshop-card {
	background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 250, 255, .86));
}

.virtualshop-inventory-grid .virtualshop-card .virtualshop-meta {
	margin-top: auto;
}

@keyframes virtualshopPulse {
	0%, 100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.03);
	}
}

.dropdown,
.dropdown-container,
#notification_list,
#notification_list .dropdown {
	z-index: 9999 !important;
}

.virtualshop-page,
.virtualshop-surface,
.virtualshop-card,
.virtualshop-hero {
	z-index: 1;
	position: relative;
}

/* Responsive */

@media (min-width: 1400px) {
	.virtualshop-grid {
		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
		max-width: 1220px;
	}
}

@media (max-width: 900px) {
	.virtualshop-hero,
	.virtualshop-detail {
		display: block;
	}

	.virtualshop-wallet {
		grid-template-columns: 1fr 1fr;
		min-width: 0;
		margin-top: 16px;
	}

	.virtualshop-wallet-card {
		min-height: auto;
	}

	.virtualshop-detail-image {
		margin-bottom: 16px;
	}

	.virtualshop-grid {
		grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
		gap: 14px;
	}

	.virtualshop-image-wrap {
		height: 160px;
	}

	.virtualshop-card-body {
		padding: 14px;
	}
}

@media (max-width: 520px) {
	.virtualshop-surface {
		padding: 10px;
	}

	.virtualshop-hero,
	.virtualshop-inventory-hero {
		padding: 20px;
	}

	.virtualshop-hero h2,
	.virtualshop-inventory-hero h2 {
		font-size: 28px;
	}

	.virtualshop-wallet {
		grid-template-columns: 1fr;
	}

	.virtualshop-grid {
		grid-template-columns: 1fr;
	}

	.virtualshop-detail {
		padding: 14px;
	}

	.virtualshop-detail-info h2 {
		font-size: 26px;
	}
}

/* Dark mode
-------------------*/

@media (prefers-color-scheme: dark) {
	.virtualshop-surface {
		background:
			radial-gradient(circle at 8% 0, rgba(255, 190, 90, .12), transparent 28%),
			radial-gradient(circle at 92% 5%, rgba(176, 91, 255, .18), transparent 32%),
			linear-gradient(180deg, #151526 0%, #1d1b32 55%, #171827 100%);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 14px 36px rgba(0, 0, 0, .28);
	}

	.virtualshop-toolbar,
	.virtualshop-section-title,
	.virtualshop-detail {
		background: rgba(28, 28, 45, .88);
		border-color: rgba(255, 255, 255, .08);
		box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
	}

	.virtualshop-section-title h2,
	.virtualshop-detail-info h2 {
		color: #f5f2ff;
	}

	.virtualshop-section-title p,
	.virtualshop-detail-desc,
	.virtualshop-card p {
		color: #c7c2d8;
	}

	.virtualshop-chip {
		background: rgba(255, 255, 255, .08);
		color: #e8ddff;
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
	}

	.virtualshop-chip.active,
	.virtualshop-chip:hover {
		background: linear-gradient(135deg, #7d45b0, #bd4b96);
		color: #fff;
	}

	.virtualshop-card,
	.virtualshop-inventory-grid .virtualshop-card {
		background: linear-gradient(180deg, rgba(38, 37, 58, .98), rgba(28, 27, 45, .96));
		border-color: rgba(187, 139, 255, .22);
		box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
	}

	.virtualshop-card:hover {
		box-shadow: 0 22px 52px rgba(127, 68, 180, .28);
		border-color: rgba(201, 146, 255, .34);
	}

	.virtualshop-image-wrap,
	.virtualshop-detail-image {
		background:
			radial-gradient(circle at 30% 12%, rgba(255, 255, 255, .08), transparent 30%),
			linear-gradient(135deg, #272a3d, #332745);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
	}

	.virtualshop-card h3,
	.virtualshop-card h3 a,
	.virtualshop-inventory-grid .virtualshop-card h3,
	.virtualshop-inventory-grid .virtualshop-card h3 a {
		color: #9fd7ff;
	}

	.virtualshop-card h3 a:hover {
		color: #e0b7ff;
	}

	.virtualshop-card p,
	.virtualshop-inventory-grid .virtualshop-card p,
	.virtualshop-meta span,
	.virtualshop-inventory-grid .virtualshop-meta span {
		color: #cfc8df;
	}

	.virtualshop-badge,
	.virtualshop-inventory-grid .virtualshop-badge {
		background: rgba(190, 139, 255, .18);
		color: #ead8ff;
	}

	.virtualshop-badge.rarity {
		background: rgba(193, 139, 255, .18);
		color: #e0c2ff;
	}

	.virtualshop-badge.type {
		background: rgba(92, 173, 255, .16);
		color: #b7ddff;
	}

	.virtualshop-badge.sold {
		background: rgba(255, 92, 92, .16);
		color: #ffb7b7;
	}

	.virtualshop-badge.equipped,
	.virtualshop-inventory-grid .virtualshop-badge.equipped {
		background: rgba(255, 181, 43, .22);
		color: #ffd98a;
	}

	.virtualshop-price-line,
	.virtualshop-pricebox {
		background: linear-gradient(135deg, rgba(255, 213, 95, .14), rgba(170, 91, 255, .18));
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 20px rgba(0, 0, 0, .18);
	}

	.virtualshop-price-line strong,
	.virtualshop-pricebox strong {
		color: #e5b7ff;
	}

	.virtualshop-price-line span,
	.virtualshop-pricebox span,
	.virtualshop-pricebox em {
		color: #c9c1d6;
	}

	.virtualshop-passive {
		background: rgba(21, 170, 112, .16);
		color: #7df0bc;
	}

	.virtualshop-gift-form,
	.virtualshop-inventory-grid .virtualshop-gift-form {
		border-color: rgba(201, 146, 255, .16);
		background:
			radial-gradient(circle at 0 0, rgba(255, 213, 95, .10), transparent 45%),
			linear-gradient(135deg, rgba(35, 34, 55, .94), rgba(48, 38, 66, .94));
	}

	.virtualshop-gift-form textarea,
.virtualshop-gift-form input[type="text"] {
		background: rgba(255, 255, 255, .08);
		border-color: rgba(255, 255, 255, .14);
		color: #f5f2ff;
	}

	.virtualshop-gift-form textarea::placeholder,
.virtualshop-gift-form input[type="text"]::placeholder {
		color: rgba(245, 242, 255, .58);
	}

	.virtualshop-profile-item,
	.profile-virtualshop-equipped-item,
	.virtualshop-profile-showcase img,
	.profile-virtualshop-equipped img {
		background: rgba(255, 255, 255, .08);
		border-color: rgba(255, 255, 255, .16);
	}
}

/* Optional manual dark mode class.
   Add class="virtualshop-dark" on a parent element if needed.
-------------------*/

.virtualshop-dark .virtualshop-surface {
	background:
		radial-gradient(circle at 8% 0, rgba(255, 190, 90, .12), transparent 28%),
		radial-gradient(circle at 92% 5%, rgba(176, 91, 255, .18), transparent 32%),
		linear-gradient(180deg, #151526 0%, #1d1b32 55%, #171827 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 14px 36px rgba(0, 0, 0, .28);
}

.virtualshop-dark .virtualshop-toolbar,
.virtualshop-dark .virtualshop-section-title,
.virtualshop-dark .virtualshop-detail,
.virtualshop-dark .virtualshop-card,
.virtualshop-dark .virtualshop-inventory-grid .virtualshop-card {
	background: linear-gradient(180deg, rgba(38, 37, 58, .98), rgba(28, 27, 45, .96));
	border-color: rgba(187, 139, 255, .22);
	color: #f5f2ff;
}

.virtualshop-dark .virtualshop-card p,
.virtualshop-dark .virtualshop-section-title p,
.virtualshop-dark .virtualshop-detail-desc,
.virtualshop-dark .virtualshop-meta span {
	color: #cfc8df;
}

.virtualshop-dark .virtualshop-card h3,
.virtualshop-dark .virtualshop-card h3 a {
	color: #9fd7ff;
}

.virtualshop-dark .virtualshop-price-line,
.virtualshop-dark .virtualshop-pricebox {
	background: linear-gradient(135deg, rgba(255, 213, 95, .14), rgba(170, 91, 255, .18));
}

.virtualshop-dark .virtualshop-price-line strong,
.virtualshop-dark .virtualshop-pricebox strong {
	color: #e5b7ff;
}

.virtualshop-dark .virtualshop-gift-form {
	border-color: rgba(201, 146, 255, .16);
	background:
		radial-gradient(circle at 0 0, rgba(255, 213, 95, .10), transparent 45%),
		linear-gradient(135deg, rgba(35, 34, 55, .94), rgba(48, 38, 66, .94));
}

/* v0.3.5: compact profile + viewtopic item badges
--------------------------------------------------*/

.virtualshop-profile-row dd {
	line-height: 1.4;
	text-align: left !important;
}

.virtualshop-profile-showcase {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	flex-wrap: wrap;
	margin: 7px 0 0 !important;
	max-width: none;
	text-align: left;
}

.virtualshop-profile-item,
.profile-virtualshop-equipped-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background: rgba(255, 255, 255, .82);
	border: 1px solid rgba(91, 45, 130, .16);
	box-shadow: 0 2px 7px rgba(30, 36, 52, .08);
	text-decoration: none !important;
	overflow: hidden;
}

.virtualshop-profile-item {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	padding: 3px;
}

.virtualshop-profile-item img,
.virtualshop-profile-showcase img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	border: 0 !important;
	border-radius: 7px;
	padding: 0 !important;
	background: transparent !important;
}

.virtualshop-profile-item.equipped {
	border-color: rgba(255, 181, 43, .82);
	box-shadow: 0 0 0 2px rgba(255, 181, 43, .25), 0 2px 7px rgba(30, 36, 52, .08);
}

.virtualshop-profile-item.rarity-rare,
.profile-virtualshop-equipped-item.rarity-rare {
	border-color: rgba(45, 132, 255, .55);
}

.virtualshop-profile-item.rarity-epic,
.profile-virtualshop-equipped-item.rarity-epic {
	border-color: rgba(150, 76, 255, .65);
}

.virtualshop-profile-item.rarity-legendary,
.profile-virtualshop-equipped-item.rarity-legendary {
	border-color: rgba(255, 181, 43, .78);
}

.profile-virtualshop {
	margin-top: 4px;
}

.profile-virtualshop-equipped {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.profile-virtualshop-equipped-item {
	width: 24px;
	height: 24px;
	border-radius: 7px;
	padding: 2px;
}

.profile-virtualshop-equipped-item img,
.profile-virtualshop-equipped img {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	border: 0 !important;
	border-radius: 5px;
	padding: 0 !important;
	background: transparent !important;
}

.postprofile .profile-virtualshop-equipped {
	max-width: 96px;
}

/* compact desktop shop cards + safe price bubble */
@media (min-width: 901px) {
	.virtualshop-grid {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 16px;
		max-width: 1180px;
		margin: 0 auto;
	}

	.virtualshop-image-wrap {
		height: 145px;
	}

	.virtualshop-card h3 {
		font-size: 17px;
	}

	.virtualshop-price-line {
		white-space: nowrap;
		overflow: hidden;
	}

	.virtualshop-price-line strong {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: clamp(15px, 1.1vw, 18px);
	}

	.virtualshop-price-line span {
		flex: 0 0 auto;
		font-size: 11px;
	}
}

@media (max-width: 700px) {
	.virtualshop-profile-showcase {
		justify-content: flex-start;
		max-width: none;
	}

	.virtualshop-profile-item {
		width: 34px;
		height: 34px;
	}
}

/* v0.3.6: emoji gift message textarea */
.virtualshop-gift-form textarea {
 resize: vertical;
 min-height: 48px;
 line-height: 1.35;
 font-family: inherit;
}

.virtualshop-dark .virtualshop-gift-form textarea {
 background: rgba(255, 255, 255, .08);
 border-color: rgba(255, 255, 255, .14);
 color: #f5f2ff;
}

.virtualshop-dark .virtualshop-gift-form textarea::placeholder {
 color: rgba(245, 242, 255, .58);
}

/* v0.3.7: sell button */
.virtualshop-actions .virtualshop-sell-button {
	background: linear-gradient(135deg, #8a3a3a, #b44772) !important;
	box-shadow: 0 10px 22px rgba(138, 58, 58, .22);
}

.virtualshop-actions .virtualshop-sell-button:hover {
	background: linear-gradient(135deg, #a44444, #ca5284) !important;
	box-shadow: 0 14px 28px rgba(138, 58, 58, .30);
}

/* v0.4.0: compact explanation panel */
.virtualshop-guide {
	margin: 20px auto 0;
	padding: 14px;
	max-width: 1180px;
	border-radius: 18px;
	background: rgba(255, 255, 255, .70);
	border: 1px solid rgba(137, 101, 174, .16);
	box-shadow: 0 10px 26px rgba(43, 34, 70, .08);
}

.virtualshop-guide-head {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
}

.virtualshop-guide-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(255, 241, 189, .95), rgba(244, 225, 255, .96));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65);
}

.virtualshop-guide h3 {
	margin: 0 0 3px;
	font-size: 15px;
	line-height: 1.2;
	color: #283044;
}

.virtualshop-guide p {
	margin: 0;
	color: #5f6578;
	font-size: 12px;
	line-height: 1.35;
}

.virtualshop-guide-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(240px, .8fr);
	gap: 12px;
}

.virtualshop-guide-box {
	padding: 12px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .58);
	border: 1px solid rgba(137, 101, 174, .12);
}

.virtualshop-guide-box > strong {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	color: #48395f;
}

.virtualshop-guide ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.virtualshop-guide li {
	position: relative;
	padding-left: 12px;
	color: #5f6578;
	font-size: 12px;
	line-height: 1.35;
}

.virtualshop-guide li:before {
	content: '';
	position: absolute;
	left: 0;
	top: .55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #9b3f79;
}

.virtualshop-guide li span {
	font-weight: 800;
	color: #4c3b62;
}

.virtualshop-guide-rarities {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.virtualshop-guide-rarities span {
	display: inline-flex;
	align-items: center;
	padding: 5px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	background: rgba(120, 120, 120, .12);
	color: #5f6578;
}

.virtualshop-guide-rarities .rare { background: rgba(45, 132, 255, .13); color: #1e6eb8; }
.virtualshop-guide-rarities .epic { background: rgba(150, 76, 255, .14); color: #6837a6; }
.virtualshop-guide-rarities .legendary { background: rgba(255, 181, 43, .22); color: #8b5a00; }

@media (max-width: 800px) {
	.virtualshop-guide-grid,
	.virtualshop-guide ul {
		grid-template-columns: 1fr;
	}
}

@media (prefers-color-scheme: dark) {
	.virtualshop-guide {
		background: rgba(28, 28, 45, .78);
		border-color: rgba(187, 139, 255, .18);
		box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
	}

	.virtualshop-guide-icon {
		background: linear-gradient(135deg, rgba(255, 213, 95, .14), rgba(170, 91, 255, .18));
	}

	.virtualshop-guide h3,
	.virtualshop-guide-box > strong,
	.virtualshop-guide li span {
		color: #f5f2ff;
	}

	.virtualshop-guide p,
	.virtualshop-guide li {
		color: #cfc8df;
	}

	.virtualshop-guide-box {
		background: rgba(255, 255, 255, .05);
		border-color: rgba(255, 255, 255, .08);
	}

	.virtualshop-guide-rarities .common { background: rgba(255, 255, 255, .08); color: #d8d4e4; }
	.virtualshop-guide-rarities .rare { background: rgba(45, 132, 255, .16); color: #b7ddff; }
	.virtualshop-guide-rarities .epic { background: rgba(193, 139, 255, .18); color: #e0c2ff; }
	.virtualshop-guide-rarities .legendary { background: rgba(255, 181, 43, .18); color: #ffd78a; }
}

.virtualshop-dark .virtualshop-guide {
	background: rgba(28, 28, 45, .78);
	border-color: rgba(187, 139, 255, .18);
}

.virtualshop-dark .virtualshop-guide h3,
.virtualshop-dark .virtualshop-guide-box > strong,
.virtualshop-dark .virtualshop-guide li span {
	color: #f5f2ff;
}

.virtualshop-dark .virtualshop-guide p,
.virtualshop-dark .virtualshop-guide li {
	color: #cfc8df;
}

.virtualshop-dark .virtualshop-guide-box {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .08);
}