/* Apér's shop: the UserView pages restyled like aper-munich.com (dark ground,
   bold uppercase Arial headings, rounded photos, ivory buttons). Loaded after
   UserView's CSS, so mostly its variables change: --ink is the text colour
   (ivory), and where UserView paints with --ink or --accent the text on it
   turns dark here. */

:root {
  color-scheme: dark;
  --accent:       #f5f2eb;
  --accent-light: #f5f2eb;
  --paper:        #292929;
  --card:         #323232;
  --line:         #575757;
  --ink:          #f5f2eb;
  --ink-soft:     #b9b6b1;
  --sand:         #baa990;
  --on-light:     #252525;
  --radius-lg:    14px;
  --radius-md:    10px;
  --radius-sm:    5px;
  --shadow-card:  none;
  --font:         Arial, Helvetica, sans-serif;
  --ease:         cubic-bezier(.2, .75, .3, 1);
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
}

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.03em; }

/* Small uppercase labels, like the website's eyebrows. */
.event-section-title,
.modal-total-label,
.directions-label {
  color: var(--sand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* Ivory buttons with dark text (UserView paints them with --accent). */
.btn-primary,
.directions-button,
.promo-code-btn,
.card-cta,
.chip.active,
.success-icon,
.pr-ticket-head,
.pr-mail-icon,
.res-step.active .res-step-num,
.res-step.done .res-step-num {
  color: var(--on-light);
}
.btn-primary {
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: none;
  transition: transform .25s var(--ease), opacity .15s;
}
.btn-primary:hover { opacity: 1; transform: translateY(-2px); }

/* Fallback header, only seen when the website's partials fail to load. */
.site-header { background: var(--paper); border: 0; }
.site-header .brand img { height: 53px; width: auto; }

/* Nextik's note under the website's footer, in its container. */
.club-shop-note {
  width: min(1380px, 100% - 64px);
  margin: -24px auto 0;
  padding: 0 0 28px;
  color: var(--ink-soft);
  font-size: 11px;
  line-height: 1.5;
  text-align: left;
}
.club-shop-note a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 760px) { .club-shop-note { width: calc(100% - 32px); } }

/* ── Event list (index.html, shop/event-list.js) ──
   The cards of the website's /event-list/. */
.aper-wrap {
  width: min(1380px, 100% - 64px);
  margin: 0 auto;
  padding: clamp(30px, 5vw, 64px) 0 58px;
}

.aper-title {
  font-size: clamp(31px, 4.4vw, 64px);
  line-height: 1.03;
  letter-spacing: -.053em;
  text-transform: uppercase;
  margin-bottom: clamp(28px, 3.5vw, 43px);
}

.aper-list { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 19px; }
.aper-card { min-width: 0; }
.aper-card-media { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius-lg); background: #222; }
.aper-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s var(--ease); }
.aper-card:hover .aper-card-img { transform: scale(1.045); }
.aper-card-body { padding-top: 14px; }
.aper-card-title { margin-bottom: 5px; font-size: 15px; letter-spacing: -.025em; line-height: 1.2; text-transform: uppercase; }
.aper-card-meta { color: var(--ink-soft); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; line-height: 1.5; }
.aper-card-price { margin-top: 8px; font-size: 14px; font-weight: 700; }
.aper-card-fee { color: var(--ink-soft); font-size: 12px; font-weight: 400; }
.aper-card-actions { margin-top: 16px; }

.aper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  font: 700 11px/1 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid #94908b;
  border-radius: var(--radius-sm);
  transition: transform .25s var(--ease);
}
.aper-btn::after {
  content: ""; width: 1.1em; height: 1.1em; margin-left: .4em; flex: none;
  background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
}
.aper-btn:hover { transform: translateY(-2px); }
.aper-btn--solid { background: var(--ink); border-color: var(--ink); color: var(--on-light); }
.aper-btn:has([aria-disabled="true"]) { opacity: .45; }

.aper-empty { color: var(--ink-soft); }
.aper-empty a { color: var(--ink); border-bottom: 1px solid #8d8985; }

@media (max-width: 760px) {
  .aper-wrap { width: calc(100% - 32px); }
  .aper-list { grid-template-columns: 1fr; }
  .aper-card-media { border-radius: 12px; }
}

/* ── Event page and checkout (event.html) ── */
.event-hero { background: #1d1d1d; }
.event-hero-title { font-weight: 700; letter-spacing: -.05em; text-transform: uppercase; }
.badge { border-radius: var(--radius-sm); font-weight: 700; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.badge--upcoming { color: var(--on-light); }

.ticket-card,
.res-card,
.directions-card { border: 1px solid #565656; border-radius: 13px; background: linear-gradient(125deg, #393939, #2d2d2d); }
.ticket-card-title,
.res-card-title { text-transform: uppercase; }
.directions-icon { background: var(--sand); color: var(--on-light); }
.directions-button,
.directions-button:hover {
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ticket-type-block { border-width: 1px; border-radius: var(--radius-md); background: var(--card); }
.ticket-type-block.has-qty { border-color: var(--sand); background: #38352f; }
.qty-btn:hover:not(:disabled) { background: #3d3d3d; }
.btn-primary.event-ticket-button { border-radius: var(--radius-md); }
.event-ticket-stub { border-left-color: #2525254d; }
.event-ticket-button:focus-visible { box-shadow: inset 0 0 0 3px var(--sand), inset 0 0 0 5px var(--on-light); }
.ticket-card.is-unavail .ticket-card-footer .btn-primary { background: var(--line); color: var(--ink-soft); }

.ticket-modal { background: var(--card); }
.checkout-hero { background: #1d1d1d; }
.checkout-lines,
.checkout-group { border-color: var(--line); border-radius: var(--radius-md); }
.checkout-group-field + .checkout-group-field { border-top-color: var(--line); }
.checkout-group-field i { color: var(--ink-soft); }
.checkout-group-field:focus-within { background: #38352f; box-shadow: inset 3px 0 0 var(--sand); }
.checkout-line--discount { color: #8fd3a8; }
.checkout-fine { color: var(--ink-soft); }
.btn-primary.checkout-buy,
.checkout-applepay,
.checkout-paypal { border-radius: var(--radius-sm); box-shadow: none; }
.btn-primary.checkout-buy { font-size: 12px; }
.checkout-input { border-radius: var(--radius-sm); }
.checkout-input:focus { border-color: var(--sand); box-shadow: none; }

/* ── Table reservation (reserve.html) ──
   The floorplan keeps its own colours; the controls around it go dark. */
.tr-zoom-controls { background: var(--card); }
.tr-input:focus { background: var(--card); border-color: var(--sand); }

/* ── Payment result and newsletter pages ── */
.success-icon { box-shadow: none; }
.booking-code { background: var(--card); }