/* =======================================================================
   Valley Tavern — Public Ticket Shop
   Light, clean, mobile-first storefront. Shares the amber brand accent with
   the admin app but on a bright, airy background suited to public retail.
   ======================================================================= */

:root {
	--vt-primary: #c6872e;
	--vt-primary-dark: #a06c1f;
	--vt-primary-light: #f6e9d3;
	--vt-ink: #2c2112;
	--vt-success: #2e7d32;
	--vt-danger: #c62828;
	--vt-bg: #fbf9f6;
	--vt-card-border: #eee2cf;
}

body {
	background-color: var(--vt-bg);
	color: var(--vt-ink);
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

a { color: var(--vt-primary-dark); }

/* ---- Top header ---- */
.vt-shop-header {
	background: #fff;
	border-bottom: 1px solid var(--vt-card-border);
	padding: .85rem 1rem;
	display: flex;
	align-items: center;
	gap: .75rem;
	position: sticky;
	top: 0;
	z-index: 1020;
}
.vt-shop-header img.logo { height: 42px; width: auto; }
.vt-shop-header .brandline { font-weight: 700; font-size: 1.05rem; color: var(--vt-ink); }
.vt-shop-header .tagline { font-size: .7rem; color: #9a8a6f; text-transform: uppercase; letter-spacing: .05em; }
.vt-shop-header a.back-link { color: var(--vt-ink); font-size: 1.3rem; line-height: 1; text-decoration: none; }

.vt-shop-page { padding: 1rem; max-width: 720px; margin: 0 auto; padding-bottom: 3rem; }

/* ---- Cards ---- */
.vt-shop-card {
	background: #fff;
	border: 1px solid var(--vt-card-border);
	border-radius: .9rem;
	overflow: hidden;
	margin-bottom: 1.1rem;
	box-shadow: 0 2px 10px rgba(44,33,18,.05);
}
.vt-shop-card .photo { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: var(--vt-primary-light); }
.vt-shop-card .photo-placeholder {
	width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, var(--vt-primary-light), #fff);
	color: var(--vt-primary-dark); font-size: 2.5rem;
}
.vt-shop-card .body { padding: 1rem; }
.vt-shop-card h5 { margin-bottom: .25rem; }
.vt-shop-card .meta { font-size: .85rem; color: #8a7a60; }

.badge-soldout { background: var(--vt-danger); color: #fff; }
.badge-fewleft { background: #e0a800; color: #211a0a; }
.badge-available { background: var(--vt-primary); color: #fff; }

.btn-vt-buy {
	background-color: var(--vt-primary);
	border-color: var(--vt-primary-dark);
	color: #fff;
	font-weight: 600;
}
.btn-vt-buy:hover { background-color: var(--vt-primary-dark); color: #fff; }
.btn-vt-buy:disabled { background-color: #ccc; border-color: #ccc; }

/* ---- Quantity stepper ---- */
.vt-qty-stepper { display: flex; align-items: center; gap: .75rem; }
.vt-qty-stepper button {
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--vt-card-border);
	background: #fff; font-size: 1.3rem; line-height: 1; color: var(--vt-primary-dark);
}
.vt-qty-stepper input { width: 60px; text-align: center; border: none; font-size: 1.3rem; font-weight: 700; }

/* ---- Checkout / payment ---- */
.vt-order-summary { background: var(--vt-primary-light); border-radius: .75rem; padding: 1rem; }
#sumup-card { margin-top: 1rem; }

.vt-hold-timer {
	display: inline-flex; align-items: center; gap: .4rem;
	background: #fff3cd; color: #7a5b00; border-radius: 2rem; padding: .3rem .9rem; font-size: .85rem; font-weight: 600;
}

/* ---- Confirmation ---- */
.vt-confirm-check {
	width: 72px; height: 72px; border-radius: 50%; background: var(--vt-success); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 2.2rem; margin: 0 auto 1rem;
}

@media (min-width: 992px) {
	.vt-shop-page { padding: 2rem; }
}