/*
  Shared styles for the restaurant QR-coupon demo flow:
  restaurants.html -> restaurant-options.html -> restaurant-coupon.html
  / restaurant-menu.html / restaurant-location.html.
  Rebuilt from the old WordPress pages 22027, 22121, 22285, 22515 and
  22540 (July 2023). Those used Elementor's blank "canvas" template --
  no site header or footer -- and were laid out for a phone, so these
  are standalone pages with a single 500px column, same as the originals.
*/
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
	min-height: 100vh;
	min-height: 100dvh;
	font-family: 'Lato', Arial, sans-serif;
	color: #000;
	background: #fff url("doodle-bg.png") top center / 260px auto repeat;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.qr-col { max-width: 500px; margin: 0 auto; padding: 24px 20px 40px; }

/* 01 -- restaurant list */
.qr-top { position: sticky; top: 0; z-index: 2; background: #fff; padding: 18px 16px; text-align: center; }
.qr-top h1 { margin: 0; font-size: 26px; font-weight: 800; line-height: 1; }
.qr-top h1 span { color: red; }
.qr-list { background: rgba(240, 243, 244, 0.7); min-height: calc(100vh - 88px); }
.qr-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; list-style: none; margin: 0; padding: 0; }
.qr-logos a { display: block; border-radius: 20px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); transition: transform 0.3s; }
.qr-logos a:hover, .qr-logos a:focus-visible { transform: scale(1.06); }

/* 02 -- options */
.qr-brand { width: 57%; margin: 0 auto 20px; border-radius: 50%; }
.qr-tile {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
	background: #fbc304; color: #49220a; text-decoration: none; text-transform: uppercase;
	font-weight: 800; line-height: 0.9; text-align: center; padding: 26px 16px; transition: background 0.3s;
}
.qr-tile:hover, .qr-tile:focus-visible { background: #ebe8d6; }
.qr-tile img { width: 48%; max-width: 150px; }
.qr-tile-lg { font-size: 38px; }
.qr-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.qr-tiles .qr-tile { font-size: 20px; }
.qr-tiles .qr-tile img { max-width: 72px; }
.qr-reserve {
	position: sticky; bottom: 12px; display: block; margin-top: 20px; padding: 20px; border-radius: 8px;
	background: #db1a4b; color: #fff; text-align: center; text-decoration: none; text-transform: uppercase;
	font-weight: 700; font-size: 18px; letter-spacing: 0.02em;
}

/* 03 / 04 / 05 -- dashed "ticket" card */
.qr-ticket-page { background-color: #fff; background-blend-mode: normal; }
.qr-ticket-page::before { content: ""; position: fixed; inset: 0; background: rgba(255, 255, 255, 0.66); z-index: 0; }
.qr-ticket-page .qr-col { position: relative; z-index: 1; padding: 40px; }
.qr-ticket { background: #f6f6f6; border: 5px dashed #000; border-radius: 8px; overflow: hidden; }
.qr-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10px; padding: 14px; }
.qr-row img.qr-round { border-radius: 50%; }
.qr-row h1, .qr-row h2 { margin: 0; font-size: 28px; font-weight: 800; line-height: 0.95; text-transform: uppercase; }
.qr-row h1.qr-brown { color: #461f09; }
.qr-sub { margin: 8px 0 0; font-size: 14px; font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.qr-sub.qr-gold { color: #a7781e; font-weight: 600; }
.qr-center { text-align: center; }
.qr-code { display: block; margin-top: 12px; padding: 12px; background: #b3b3b3; border-radius: 3px; font-size: 15px; font-weight: 500; text-align: center; }
.qr-code strong { display: block; font-size: 22px; font-weight: 800; }
.qr-map { display: block; width: 100%; height: 356px; border: 0; }
.qr-back { display: inline-block; margin-bottom: 16px; font-size: 14px; font-weight: 800; text-transform: uppercase; text-decoration: none; }
.qr-back:hover { text-decoration: underline; }

@media (min-width: 600px) {
	.qr-top h1 { font-size: 34px; }
	.qr-row h1, .qr-row h2 { font-size: 40px; }
	.qr-map { height: 443px; }
}