/* ============================================================
   Clocked! Diner — theme styles
   Pixel-for-pixel port of the Clocked-Diner React design.
   ============================================================ */

:root {
	--clk-white: #ffffff;
	--clk-fg: hsl(0, 0%, 12%);
	--clk-red: #bf381b;
	--clk-red-dark: #992d16;
	--clk-red-deeper: #a02c13;
	--clk-navy: #0c3f68;
	--clk-navy-hover: #1a5b92;
	--clk-overlay: #c1645c;
	--clk-pink: #ff5a5f;
	--clk-cream: #f2e6d6;
	--clk-border: hsl(45, 20%, 85%);
	--clk-gray-100: #f3f4f6;
	--clk-muted-dotted: rgba(31, 31, 31, 0.2);

	--clk-font-body: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--clk-font-display: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }
body {
	font-family: var(--clk-font-body);
	background: var(--clk-white);
	color: var(--clk-fg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.5;
}
body.clk-menu-open { overflow: hidden; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--clk-font-display);
	letter-spacing: -0.01em;
	margin: 0;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, picture, svg, video { display: block; max-width: 100%; }
button { font-family: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

/* ------------------------------------------------------------ Layout */
.clk-site {
	min-height: 100vh;
	background: var(--clk-white);
	display: flex;
	flex-direction: column;
	position: relative;
}
.clk-main { flex: 1 1 auto; }

/* ------------------------------------------------------------ Hamburger */
.clk-hamburger {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 50;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--clk-navy);
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
	transition: opacity .2s;
}
.clk-hamburger span {
	display: block;
	width: 36px;
	height: 5px;
	background: currentColor;
}
.clk-hamburger:hover { opacity: .7; }
@media (min-width: 768px) {
	.clk-hamburger { padding: 2rem; }
}

/* ------------------------------------------------------------ Menu overlay */
.clk-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: var(--clk-overlay);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow-y: auto;
	min-height: 100dvh;
	opacity: 0;
	transform: translateY(-20px);
	transition: opacity .3s ease-in-out, transform .3s ease-in-out;
	visibility: hidden;
}
.clk-menu-overlay.is-open {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
}
.clk-menu-close {
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	color: #fff;
	padding: .5rem;
	transition: opacity .2s;
}
.clk-menu-close:hover { opacity: .7; }
@media (min-width: 768px) {
	.clk-menu-close { top: 2rem; left: 3rem; }
}
.clk-menu-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	width: 100%;
	max-width: 24rem;
	padding: 4rem 1.5rem;
}
.clk-menu-link {
	color: #fff;
	font-family: var(--clk-font-display);
	font-weight: 900;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	text-align: center;
	transition: opacity .2s;
}
.clk-menu-link:hover { opacity: .7; }
@media (min-width: 768px) {
	.clk-menu-link { font-size: 1.5rem; }
}
.clk-menu-order {
	margin-top: 1rem;
	background: #fff;
	color: var(--clk-overlay);
	padding: .625rem 1.5rem;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	transition: background-color .2s;
}
.clk-menu-order:hover { background: #f3f4f6; }
.clk-menu-social {
	display: flex;
	gap: 1.5rem;
	margin-top: 2rem;
	color: #fff;
}
.clk-menu-social a { transition: opacity .2s; }
.clk-menu-social a:hover { opacity: .7; }

/* ------------------------------------------------------------ Top Header (non-home) */
.clk-header {
	width: 100%;
	background: #fff;
	position: relative;
	z-index: 40;
	border-bottom: 1px solid var(--clk-gray-100);
}
.clk-header-row {
	display: flex;
	align-items: center;
	position: relative;
	height: 6rem;
}
@media (min-width: 768px) {
	.clk-header-row { height: 8rem; }
}
.clk-header-logo {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	padding: 1rem 0;
	pointer-events: none;
}
.clk-header-logo img {
	width: auto;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	pointer-events: auto;
}

/* ------------------------------------------------------------ Footer */
.clk-footer {
	background: #fff;
	margin-top: auto;
	border-top: 1px solid rgba(229, 220, 200, 0.4);
	padding: 3rem 1.5rem;
}
@media (min-width: 768px) {
	.clk-footer { padding: 4rem 1.5rem; }
}
.clk-footer-inner {
	max-width: 72rem;
	margin: 0 auto;
}
.clk-footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	text-align: center;
	margin-bottom: 3rem;
}
@media (min-width: 768px) {
	.clk-footer-grid { grid-template-columns: repeat(3, 1fr); text-align: left; }
}
.clk-footer-col h3 {
	font-family: var(--clk-font-display);
	font-weight: 900;
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--clk-red);
	margin-bottom: 1rem;
}
.clk-footer-col p {
	color: var(--clk-red-dark);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.625;
}
.clk-footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	column-gap: 2rem;
	row-gap: 1.5rem;
	border-top: 1px solid rgba(229, 220, 200, 0.4);
	padding-top: 2rem;
}
@media (min-width: 768px) {
	.clk-footer-links { row-gap: 1rem; }
}
.clk-footer-links a {
	color: var(--clk-red);
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	transition: opacity .2s;
}
@media (min-width: 768px) {
	.clk-footer-links a { font-size: 0.875rem; }
}
.clk-footer-links a:hover { opacity: .7; }

/* ------------------------------------------------------------ Generic page helpers */
.clk-container {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 1rem;
}
.clk-page-simple {
	padding: 4rem 1.5rem;
	max-width: 48rem;
	margin: 0 auto;
}
.clk-post-title { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; color: var(--clk-red); margin-bottom: 1.5rem; }
.clk-post-content p { margin-bottom: 1rem; font-size: 1.125rem; line-height: 1.7; color: var(--clk-red-dark); }
.clk-404-title { font-size: 6rem; font-weight: 900; text-align: center; color: var(--clk-red); }
.clk-404-text { text-align: center; font-size: 1.25rem; color: var(--clk-red-dark); }
.clk-404-text a { color: var(--clk-navy); text-decoration: underline; }

/* ============================================================
   HOME PAGE
   ============================================================ */
.clk-home {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	background: #fff;
	display: flex;
	flex-direction: column;
	padding-bottom: 6rem;
}

.clk-home-logo {
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 1.5rem 0;
	background: #fff;
}
.clk-home-logo img { height: 5rem; width: auto; object-fit: contain; }
@media (min-width: 768px) {
	.clk-home-logo { padding: 2.5rem 0; }
	.clk-home-logo img { height: 8rem; }
}

/* Full-width hero with Order Online button */
.clk-home-hero {
	width: 100%;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--clk-cream);
}
.clk-home-hero picture {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.clk-home-hero img {
	width: 100%;
	height: auto;
	object-fit: contain;
	padding: 0.5rem;
}
@media (min-width: 768px) {
	.clk-home-hero {
		height: 80vh;
		background: #fff;
	}
	.clk-home-hero picture { height: 100%; }
	.clk-home-hero img {
		height: 100%;
		object-fit: cover;
		padding: 0;
	}
}
.clk-home-hero-cta {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.clk-home-hero-cta a {
	pointer-events: auto;
	background: var(--clk-red);
	color: #fff;
	font-family: var(--clk-font-display);
	font-weight: 900;
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 1rem 2.5rem;
	border-radius: 9999px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
	transition: transform .2s, background-color .2s;
}
.clk-home-hero-cta a:hover {
	background: var(--clk-red-deeper);
	transform: scale(1.05);
}
@media (min-width: 768px) {
	.clk-home-hero-cta a {
		font-size: 2.25rem;
		padding: 1.5rem 3rem;
	}
}

/* Tile grid wrapper */
.clk-home-grids {
	width: 100%;
	padding: 0 0.5rem;
	display: flex;
	flex-direction: column;
}
@media (min-width: 768px) {
	.clk-home-grids { padding: 0 1rem; }
}

/* Two-column tile row */
.clk-tile-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.5rem;
	margin-top: 0.5rem;
}
@media (min-width: 768px) {
	.clk-tile-row { grid-template-columns: repeat(2, 1fr); }
}
.clk-tile {
	position: relative;
	aspect-ratio: 3 / 4;
	background: var(--clk-white);
	overflow: hidden;
}
@media (min-width: 768px) {
	.clk-tile { aspect-ratio: 1 / 1; }
}
.clk-tile--bg-white { background: #fff; border: 1px solid #f3f4f6; display: flex; align-items: center; justify-content: center; }
.clk-tile--bg-gray { background: var(--clk-gray-100); }
.clk-tile--bg-cream { background: var(--clk-cream); display: flex; flex-direction: column; justify-content: center; padding: 3rem 2rem; color: var(--clk-red-dark); }
.clk-tile--bg-pink { background: var(--clk-pink); padding: 2rem; display: flex; align-items: center; justify-content: center; }
.clk-tile-image-contain { width: 100%; height: 100%; object-fit: contain; }
.clk-tile-image-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: transform .7s ease; }
.clk-tile:hover .clk-tile-image-cover { transform: scale(1.05); }
.clk-tile-image-multiply { mix-blend-mode: multiply; opacity: 0.6; }

@media (min-width: 768px) {
	.clk-tile--bg-cream { padding: 3rem 4rem; }
}

/* The Diner (cream tile) */
.clk-diner-title {
	font-family: var(--clk-font-display);
	font-weight: 900;
	font-size: 2.25rem;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	color: var(--clk-red);
	border-bottom: 4px solid var(--clk-red);
	padding-bottom: 1rem;
	margin-bottom: 2rem;
	display: inline-block;
	width: fit-content;
}
@media (min-width: 768px) {
	.clk-diner-title { font-size: 3rem; }
}
.clk-diner-text p {
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.7;
	margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
	.clk-diner-text p { font-size: 1.25rem; }
}
.clk-diner-link {
	margin-top: 2rem;
	background: var(--clk-navy);
	color: #fff;
	padding: 0.75rem 1.5rem;
	border-radius: 9999px;
	font-family: var(--clk-font-display);
	font-weight: 900;
	font-size: 0.875rem;
	text-transform: uppercase;
	width: max-content;
	transition: background-color .2s;
}
.clk-diner-link:hover { background: var(--clk-navy-hover); }

/* Cloud sticker (VIEW FULL MENU) */
.clk-cloud-button {
	position: absolute;
	top: 25%;
	left: 25%;
	z-index: 30;
	display: inline-block;
	transform-origin: center;
	transition: transform .2s;
}
.clk-cloud-button:hover { transform: scale(1.05); }
.clk-cloud-button svg {
	width: 6rem;
	height: auto;
	color: var(--clk-navy);
	filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
}
.clk-cloud-button .clk-cloud-label {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: var(--clk-font-display);
	font-weight: 900;
	text-transform: uppercase;
	font-size: 10px;
	line-height: 1;
	text-align: center;
}
@media (min-width: 768px) {
	.clk-cloud-button svg { width: 8rem; }
	.clk-cloud-button .clk-cloud-label { font-size: 0.875rem; }
}

/* Circle sticker (SIGN UP FOR REWARDS) */
.clk-circle-button {
	position: absolute;
	top: 25%;
	right: 25%;
	z-index: 30;
	transform: scale(1.25);
	transform-origin: center;
	transition: transform .2s;
}
.clk-tile:hover .clk-circle-button { transform: scale(1.45); }
@media (min-width: 768px) {
	.clk-circle-button { transform: scale(1.5); }
	.clk-tile:hover .clk-circle-button { transform: scale(1.6); }
}
.clk-circle-button-inner {
	width: 5rem;
	height: 5rem;
	background: var(--clk-navy);
	border-radius: 9999px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: var(--clk-font-display);
	font-weight: 900;
	text-transform: uppercase;
	font-size: 10px;
	line-height: 1.1;
	text-align: center;
	padding: 0.5rem;
	filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
}
@media (min-width: 768px) {
	.clk-circle-button-inner { width: 7rem; height: 7rem; font-size: 0.75rem; padding: 1rem; }
}
.clk-tile-pink-link {
	position: absolute;
	inset: 0;
	z-index: 20;
}
.clk-tile-pink .clk-circle-button { pointer-events: none; }

/* ============================================================
   MENU PAGE
   ============================================================ */
.clk-menu-hero {
	width: 100%;
	height: 40vh;
	position: relative;
}
@media (min-width: 768px) {
	.clk-menu-hero { height: 50vh; }
}
.clk-menu-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.clk-menu-hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.3);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1rem;
}
.clk-menu-hero-title {
	font-family: var(--clk-font-display);
	font-weight: 900;
	font-size: 3rem;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 0.5rem;
	text-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
@media (min-width: 768px) {
	.clk-menu-hero-title { font-size: 6rem; }
}
.clk-menu-hero-subtitle {
	font-size: 1.125rem;
	color: #fff;
	font-weight: 700;
	max-width: 42rem;
	margin: 0 auto;
	text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
@media (min-width: 768px) {
	.clk-menu-hero-subtitle { font-size: 1.5rem; }
}

.clk-menu-nav {
	background: #fff;
	border-bottom: 1px solid rgba(229, 220, 200, 0.4);
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.clk-menu-nav-inner {
	max-width: 72rem;
	margin: 0 auto;
	padding: 1rem;
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	justify-content: flex-start;
}
.clk-menu-nav-inner::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
	.clk-menu-nav-inner { justify-content: center; }
}
.clk-menu-nav-pill {
	padding: 0.5rem 1.5rem;
	border-radius: 9999px;
	background: rgba(246, 193, 57, 0.2);
	color: var(--clk-red);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.875rem;
	white-space: nowrap;
	transition: background-color .2s, color .2s;
}
.clk-menu-nav-pill:hover {
	background: var(--clk-red);
	color: #fff;
}

.clk-menu-body {
	max-width: 64rem;
	margin: 0 auto;
	padding: 5rem 1rem;
}
@media (min-width: 640px) {
	.clk-menu-body { padding: 5rem 2rem; }
}
.clk-menu-categories {
	display: flex;
	flex-direction: column;
	gap: 10rem;
}
@media (min-width: 768px) {
	.clk-menu-categories { gap: 12rem; }
}
.clk-menu-category {
	scroll-margin-top: 10rem;
}
.clk-menu-category-image {
	width: 100%;
	height: 20rem;
	border-radius: 1rem;
	overflow: hidden;
	margin-bottom: 4rem;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	border: 4px solid var(--clk-red);
}
@media (min-width: 768px) {
	.clk-menu-category-image { height: 32rem; }
}
.clk-menu-category-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s ease;
}
.clk-menu-category-image img:hover { transform: scale(1.05); }
.clk-menu-category-header {
	display: flex;
	flex-direction: column;
	margin-bottom: 3rem;
	border-bottom: 4px solid var(--clk-red);
	padding-bottom: 1.5rem;
}
@media (min-width: 768px) {
	.clk-menu-category-header {
		margin-bottom: 5rem;
		padding-bottom: 2rem;
	}
}
.clk-menu-category-title {
	font-family: var(--clk-font-display);
	font-weight: 900;
	font-size: 3.75rem;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	color: var(--clk-red);
	text-shadow: 0 4px 8px rgba(0,0,0,0.1);
	line-height: 0.95;
}
@media (min-width: 768px) {
	.clk-menu-category-title { font-size: 6rem; }
}
.clk-menu-category-desc {
	color: var(--clk-red-dark);
	font-weight: 700;
	margin-top: 1rem;
	font-size: 1.125rem;
	white-space: pre-line;
	line-height: 1.4;
}
@media (min-width: 768px) {
	.clk-menu-category-desc { font-size: 1.5rem; margin-top: 1.5rem; }
}

.clk-menu-items {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
@media (min-width: 768px) {
	.clk-menu-items { gap: 3rem; }
}
.clk-menu-item {
	cursor: pointer;
}
.clk-menu-item-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 0.25rem;
}
@media (min-width: 768px) {
	.clk-menu-item-row { margin-bottom: 0.5rem; }
}
.clk-menu-item-name {
	font-family: var(--clk-font-display);
	font-weight: 900;
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--clk-fg);
	transition: color .2s;
}
@media (min-width: 768px) {
	.clk-menu-item-name { font-size: 1.875rem; }
}
.clk-menu-item:hover .clk-menu-item-name { color: var(--clk-red); }
.clk-menu-item-dots {
	flex: 1;
	border-bottom: 2px dotted var(--clk-muted-dotted);
	margin: 0 0.5rem;
	position: relative;
	top: -4px;
}
@media (min-width: 768px) {
	.clk-menu-item-dots { margin: 0 1.5rem; top: -8px; }
}
.clk-menu-item-price {
	font-weight: 900;
	font-size: 1.25rem;
	color: var(--clk-fg);
	white-space: nowrap;
}
@media (min-width: 768px) {
	.clk-menu-item-price { font-size: 1.875rem; }
}
.clk-menu-item-desc {
	color: var(--clk-red);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.4;
}
@media (min-width: 768px) {
	.clk-menu-item-desc { font-size: 1.25rem; }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.clk-about {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	background: #fff;
	display: flex;
	flex-direction: column;
	padding: 1rem 0.5rem 6rem;
}
@media (min-width: 768px) {
	.clk-about { padding: 4rem 1rem 6rem; }
}
.clk-about-hero {
	width: 100%;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--clk-cream);
	padding: 4rem 1.5rem;
	color: var(--clk-red-dark);
	text-align: center;
}
@media (min-width: 768px) {
	.clk-about-hero { padding: 4rem 3rem; }
}
.clk-about-title {
	font-family: var(--clk-font-display);
	font-weight: 900;
	font-size: 3rem;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	color: var(--clk-red);
	border-bottom: 4px solid var(--clk-red);
	padding-bottom: 1rem;
	margin-bottom: 2rem;
	display: inline-block;
}
@media (min-width: 768px) {
	.clk-about-title { font-size: 4.5rem; }
}
.clk-about-text {
	width: 100%;
	max-width: 56rem;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.7;
	text-align: left;
}
@media (min-width: 768px) {
	.clk-about-text { font-size: 1.25rem; }
}

/* ============================================================
   REWARDS PAGE
   ============================================================ */
.clk-rewards {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	background: #fff;
	display: flex;
	flex-direction: column;
	padding: 4rem 1rem 6rem;
}
@media (min-width: 768px) {
	.clk-rewards { padding: 6rem 2rem 6rem; }
}
.clk-rewards-inner {
	max-width: 56rem;
	margin: 0 auto;
	width: 100%;
}
.clk-rewards-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	background: var(--clk-pink);
	padding: 2rem;
	border-radius: 1.5rem;
	color: #fff;
	box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
	overflow: hidden;
	position: relative;
}
@media (min-width: 768px) {
	.clk-rewards-card { flex-direction: row; padding: 3rem; }
}
.clk-rewards-content {
	z-index: 10;
	flex: 1;
	position: relative;
}
.clk-rewards-title {
	font-family: var(--clk-font-display);
	font-weight: 900;
	font-size: 3rem;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	line-height: 1;
	margin-bottom: 1rem;
}
@media (min-width: 768px) {
	.clk-rewards-title { font-size: 4.5rem; }
}
.clk-rewards-subtitle {
	font-size: 1.25rem;
	font-weight: 500;
	margin-bottom: 2rem;
}
@media (min-width: 768px) {
	.clk-rewards-subtitle { font-size: 1.5rem; }
}
.clk-rewards-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 24rem;
}
.clk-rewards-form label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	font-size: 0.875rem;
}
.clk-rewards-form input {
	width: 100%;
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	border: 0;
	color: #000;
	font-weight: 500;
}
.clk-rewards-form button {
	margin-top: 1rem;
	background: var(--clk-navy);
	color: #fff;
	font-family: var(--clk-font-display);
	font-weight: 900;
	text-transform: uppercase;
	font-size: 1.25rem;
	padding: 1rem;
	border-radius: 0.75rem;
	box-shadow: 0 10px 15px rgba(0,0,0,0.15);
	transition: background-color .2s, transform .2s;
}
.clk-rewards-form button:hover {
	background: var(--clk-navy-hover);
	transform: scale(1.05);
}
.clk-rewards-form .clk-hp {
	position: absolute !important;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.clk-rewards-banner {
	max-width: 24rem;
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
	font-size: 1rem;
}
.clk-rewards-banner--ok {
	background: #ffffff;
	color: var(--clk-red-dark);
	border: 2px solid #fff;
}
.clk-rewards-banner--err {
	background: rgba(12, 63, 104, 0.1);
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.6);
}
.clk-rewards-banner strong {
	font-weight: 800;
}
.clk-rewards-image {
	flex: 1;
	width: 100%;
	position: relative;
	z-index: 10;
	display: none;
}
@media (min-width: 768px) {
	.clk-rewards-image { display: block; }
}
.clk-rewards-image img {
	width: 100%;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 25px 25px rgba(0,0,0,0.15));
	border-radius: 1rem;
	transform: rotate(3deg);
	transition: transform .5s;
}
.clk-rewards-image img:hover { transform: rotate(0deg); }

.clk-rewards-benefits {
	margin-top: 4rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}
@media (min-width: 768px) {
	.clk-rewards-benefits { grid-template-columns: repeat(3, 1fr); }
}
.clk-rewards-benefit {
	background: var(--clk-cream);
	padding: 2rem;
	border-radius: 1rem;
	text-align: center;
}
.clk-rewards-benefit-icon { font-size: 3rem; margin-bottom: 1rem; line-height: 1; }
.clk-rewards-benefit h3 {
	font-family: var(--clk-font-display);
	font-weight: 900;
	font-size: 1.5rem;
	text-transform: uppercase;
	color: var(--clk-red);
	margin-bottom: 0.5rem;
}
.clk-rewards-benefit p {
	font-weight: 500;
	color: var(--clk-red-dark);
}

/* ============================================================
   ACF admin tweaks — cleaner client UI
   ============================================================ */

/* (applied via admin CSS, not here — see inc/setup.php) */