:root {
	--qr-navy: #061d2f;
	--qr-navy-soft: #0a3554;
	--qr-blue: #08a9dc;
	--qr-blue-dark: #0797c8;
	--qr-green: #58b947;
	--qr-green-dark: #469f38;
	--qr-text: #f6fbfe;
	--qr-muted: #a9bdc9;
	--qr-border: rgba(255, 255, 255, 0.12);
}

* {
	box-sizing: border-box;
}

html {
	min-height: 100%;
	background: #020a10;
}

body.qr-menu-page {
	min-height: 100vh;
	margin: 0;
	color: var(--qr-text);
	font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background:
		radial-gradient(circle at 50% -10%, rgba(8, 169, 220, 0.28), transparent 38%),
		radial-gradient(circle at 100% 80%, rgba(88, 185, 71, 0.12), transparent 35%),
		linear-gradient(155deg, #02070b 0%, #061722 56%, #031016 100%);
}

.qr-shell {
	display: grid;
	min-height: 100vh;
	place-items: center;
	padding: 22px 14px;
}

.admin-bar .qr-shell {
	min-height: calc(100vh - 32px);
}

.qr-card {
	width: min(100%, 440px);
	padding: 28px 20px 22px;
	border: 1px solid var(--qr-border);
	border-radius: 28px;
	background: rgba(6, 29, 47, 0.9);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
	backdrop-filter: blur(18px);
}

.qr-brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.qr-brand__mark {
	position: relative;
	display: grid;
	width: 84px;
	height: 84px;
	place-items: center;
	overflow: hidden;
	border-radius: 25px;
	background: linear-gradient(145deg, var(--qr-blue), var(--qr-blue-dark));
	box-shadow: 0 15px 36px rgba(8, 169, 220, 0.28);
}

.qr-brand__ring {
	position: absolute;
	inset: 11px;
	border: 7px solid rgba(255, 255, 255, 0.97);
	border-right-color: var(--qr-green);
	border-radius: 50%;
	transform: rotate(-28deg);
}

.qr-brand__letters {
	position: relative;
	z-index: 1;
	color: #fff;
	font-size: 1.58rem;
	font-weight: 900;
	letter-spacing: -0.1em;
	line-height: 1;
	transform: translateX(-0.04em);
}

.qr-brand__name {
	margin-top: 16px;
	color: var(--qr-text);
	font-size: clamp(1.72rem, 8vw, 2.05rem);
	font-weight: 900;
	letter-spacing: -0.055em;
	line-height: 1;
}

.qr-brand__name span {
	color: var(--qr-green);
}

.qr-tagline,
.qr-location {
	margin: 7px 0 0;
	text-align: center;
	color: var(--qr-muted);
	font-size: 0.81rem;
	line-height: 1.45;
}

.qr-location {
	margin: 5px auto 0;
	max-width: 340px;
	font-size: 0.73rem;
}

.qr-status {
	width: fit-content;
	margin: 15px auto 21px;
	padding: 7px 13px;
	border: 1px solid rgba(88, 185, 71, 0.2);
	border-radius: 999px;
	color: #c5f1b9;
	background: rgba(88, 185, 71, 0.11);
	font-size: 0.79rem;
	font-weight: 800;
}

.qr-status span {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 7px;
	border-radius: 50%;
	background: var(--qr-green);
	box-shadow: 0 0 0 5px rgba(88, 185, 71, 0.12);
}

.qr-links {
	display: grid;
	gap: 11px;
}

.qr-link {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) 18px;
	min-height: 64px;
	align-items: center;
	gap: 11px;
	padding: 10px 14px;
	border: 1px solid var(--qr-border);
	border-radius: 17px;
	color: var(--qr-text);
	background: rgba(255, 255, 255, 0.045);
	text-decoration: none;
	transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.qr-link:hover,
.qr-link:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.22);
	background: rgba(255, 255, 255, 0.08);
}

.qr-link:focus-visible,
.qr-socials a:focus-visible,
.qr-brand:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.qr-link--phone {
	border-color: transparent;
	background: linear-gradient(135deg, #087fb2, var(--qr-blue));
}

.qr-link--whatsapp {
	border-color: transparent;
	background: linear-gradient(135deg, #348f2d, var(--qr-green));
}

.qr-link__icon {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.18);
	font-size: 1.14rem;
}

.qr-link__icon--text {
	font-size: 0.7rem;
	font-weight: 900;
	letter-spacing: -0.03em;
}

.qr-link strong,
.qr-link small {
	display: block;
}

.qr-link strong {
	font-size: 0.93rem;
	line-height: 1.25;
}

.qr-link small {
	margin-top: 3px;
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.7rem;
	font-weight: 500;
}

.qr-link__arrow {
	font-size: 1.8rem;
	line-height: 1;
	opacity: 0.8;
}

.qr-socials {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 11px;
}

.qr-socials a {
	display: flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid var(--qr-border);
	border-radius: 15px;
	color: var(--qr-text);
	background: rgba(255, 255, 255, 0.045);
	font-size: 0.8rem;
	font-weight: 750;
	text-decoration: none;
}

.qr-socials span {
	font-size: 1.05rem;
	font-weight: 900;
}

.qr-services {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--qr-border);
}

.qr-services h2 {
	margin: 0 0 12px;
	text-align: center;
	font-size: 0.84rem;
}

.qr-services > div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 7px;
}

.qr-services span {
	padding: 7px 9px;
	border: 1px solid var(--qr-border);
	border-radius: 999px;
	color: var(--qr-muted);
	background: rgba(255, 255, 255, 0.04);
	font-size: 0.68rem;
}

.qr-footer {
	margin-top: 19px;
	text-align: center;
	color: #78909d;
	font-size: 0.69rem;
}

.qr-footer p {
	margin: 0;
}

@media (max-width: 380px) {
	.qr-card {
		padding-inline: 15px;
		border-radius: 23px;
	}

	.qr-brand__name {
		font-size: 1.62rem;
	}

	.qr-link {
		padding-inline: 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.qr-link {
		transition: none;
	}
}