@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

.gcm-wrap {
	--gcm-red: #8B3A2E;
	--gcm-red-dark: #6E2E24;
	--gcm-cream: #EDE8DC;
	--gcm-black: #1A1512;
	--gcm-green: #2E7D5B;
	--gcm-white: #ffffff;
	font-family: 'Inter', Arial, sans-serif;
	max-width: 480px;
	margin: 0 auto;
	padding: 28px 18px 64px 18px;
	color: var(--gcm-black);
	box-sizing: border-box;
	background: linear-gradient(180deg, var(--gcm-cream) 0%, #f7f4ec 220px, transparent 220px);
}
.gcm-wrap * { box-sizing: border-box; }

.gcm-greeting h1 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 27px;
	font-weight: 700;
	margin: 0 0 4px 0;
	color: var(--gcm-black);
	letter-spacing: 0.2px;
}
.gcm-greeting p {
	margin: 0 0 22px 0;
	color: #7a7264;
	font-size: 14px;
}

.gcm-card {
	background: var(--gcm-white);
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 18px;
	box-shadow: 0 4px 24px rgba(26,21,18,0.08), 0 1px 2px rgba(26,21,18,0.04);
	border: 1px solid rgba(26,21,18,0.04);
}

.gcm-brand-card {
	background: linear-gradient(135deg, var(--gcm-red) 0%, var(--gcm-red-dark) 100%);
	color: var(--gcm-white);
	position: relative;
	overflow: hidden;
	min-height: 170px;
	box-shadow: 0 10px 30px rgba(139,58,46,0.28), 0 2px 8px rgba(26,21,18,0.1);
}
.gcm-brand-card-pattern {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 88% 8%, rgba(255,255,255,0.10) 0%, transparent 42%),
		radial-gradient(circle at 100% 100%, rgba(255,255,255,0.06) 0%, transparent 55%);
	pointer-events: none;
}
.gcm-brand-card-top { position: relative; z-index: 1; }
.gcm-brand-logo {
	display: block;
	max-height: 34px;
	max-width: 160px;
	margin-bottom: 14px;
	object-fit: contain;
	object-position: left center;
}
.gcm-eyebrow {
	font-size: 11px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	opacity: 0.8;
	font-weight: 600;
}
.gcm-brand-card h2 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 27px;
	font-weight: 700;
	margin: 6px 0 20px 0;
	line-height: 1.15;
}
.gcm-id-label {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	opacity: 0.7;
	margin: 0 0 3px 0;
	font-weight: 600;
}
.gcm-id-value {
	font-size: 15px;
	letter-spacing: 1.5px;
	margin: 0;
	font-variant-numeric: tabular-nums;
}
.gcm-gift-icon {
	position: absolute;
	right: 20px;
	bottom: 16px;
	font-size: 56px;
	opacity: 0.28;
	z-index: 1;
	filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

.gcm-status-banner {
	text-align: center;
	font-weight: 600;
	padding: 26px 20px;
	font-size: 14.5px;
}
.gcm-status-esaurita { color: #8a8378; background: #faf8f4; }
.gcm-status-scaduta,
.gcm-status-annullata { color: var(--gcm-red); background: #fbf2ef; }

.gcm-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: #a39c8f;
	text-align: center;
	margin: 0 0 8px 0;
	font-weight: 600;
}
.gcm-balance-card { text-align: center; }
.gcm-balance {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 42px;
	font-weight: 700;
	color: var(--gcm-red);
	margin: 0 0 6px 0;
	letter-spacing: -0.5px;
}
.gcm-initial {
	font-size: 13px;
	color: #a39c8f;
	margin: 0 0 16px 0;
}
.gcm-progress-track {
	height: 7px;
	border-radius: 4px;
	background: #f1e9e0;
	overflow: hidden;
	margin-bottom: 6px;
}
.gcm-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--gcm-red-dark), var(--gcm-red));
	border-radius: 4px;
	transition: width 0.4s ease;
}
.gcm-progress-label {
	text-align: right;
	font-size: 12px;
	color: #a39c8f;
	margin: 0;
	font-weight: 600;
}
.gcm-expiry {
	text-align: center;
	font-size: 12px;
	color: #a05a4a;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed #eee1d6;
}

.gcm-qr-card { text-align: center; }
.gcm-qr-card h3 {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	margin: 0 0 4px 0;
	font-size: 19px;
}
.gcm-qr-sub {
	font-size: 13px;
	color: #a39c8f;
	margin: 0 0 20px 0;
}
.gcm-qr-container {
	display: inline-block;
	padding: 16px;
	background: var(--gcm-white);
	border: 1px solid #f0ebe2;
	border-radius: 14px;
	box-shadow: inset 0 0 0 1px rgba(26,21,18,0.02);
}
.gcm-qr-refresh {
	font-size: 12px;
	color: #a39c8f;
	margin-top: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.gcm-refresh-icon {
	display: inline-block;
	animation: gcm-spin 2s linear infinite;
}
@keyframes gcm-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

.gcm-error-card { text-align: center; padding: 44px 24px; }
.gcm-error-icon { font-size: 36px; margin: 0 0 10px 0; }
.gcm-error-card h2 { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; margin: 0 0 8px 0; }
.gcm-error-card p { color: #a39c8f; font-size: 14px; line-height: 1.5; }