/* ============================================================================
   vcard-qr-generator.css
   ============================================================================
   Loaded by:  generator-tools/vcard-qr-code-generator.php
   Purpose:    The live "contact card" mockup shown above the QR preview, so the
               user can see how the saved contact will read before scanning.
   Load order: Loaded AFTER tool-input.css; every selector is namespaced .vq-*
               so nothing leaks into other tool pages.
   ============================================================================ */

.vq-card {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 150px;
	background: linear-gradient(135deg, #6f42c1 0%, #4b2a86 100%);
	color: #fff;
	border-radius: 14px;
	padding: 22px 20px;
	box-shadow: 0 6px 16px rgba(75, 42, 134, .25);
}

.vq-card-avatar {
	flex: 0 0 auto;
	width: 74px;
	height: 74px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .22);
	border: 2px solid rgba(255, 255, 255, .45);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: .03em;
}

.vq-card-body {
	min-width: 0;
	flex: 1 1 auto;
}

.vq-card-name {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vq-card-title {
	font-size: .95rem;
	opacity: .88;
	margin: 3px 0 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vq-card-line {
	font-size: .86rem;
	line-height: 1.55;
	opacity: .92;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vq-card-line i {
	width: 1.15em;
	text-align: center;
}

.vq-card-line-empty {
	opacity: .6;
	font-style: italic;
}

.vq-preview-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #5a6b82;
	margin: 14px 0 6px;
}

.config-panel-title + .vq-preview-label {
	margin-top: 0;
}

/* Inline preview of the card produced by the "Print card" button. Mirrors the
   printed markup (violet border, centred kicker, name, QR image and details)
   but scaled to fit the preview column. */
.vq-print-card {
	background-color: #fff;
	border: 2px solid #6f42c1;
	border-radius: 16px;
	padding: 22px 24px;
	text-align: center;
	max-width: 360px;
	margin: 0 auto;
	min-height: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.vq-print-kicker {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6f42c1;
	font-weight: 700;
}

.vq-print-name {
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
	margin: 6px 0 2px;
	color: #1f2d3d;
	word-break: break-word;
}

.vq-print-title {
	font-size: .85rem;
	color: #5a6b82;
	margin-bottom: 12px;
	word-break: break-word;
}

.vq-print-qr {
	width: 150px;
	height: 150px;
	image-rendering: pixelated;
	background-color: #fff;
}

.vq-print-details {
	margin-top: 12px;
}

.vq-print-details p {
	margin: 2px 0;
	font-size: .82rem;
	color: #5a6b82;
	word-break: break-word;
}