/* LaTism: styles for the shop, checkout and the expanded panels, plus
 * focus/accessibility rules. Loaded AFTER assets/style.css and only adds;
 * it reuses style.css colour variables (with safe fallbacks). */
:root {
  --lt-gold: var(--gold, #BF9A69);
  --lt-gold-soft: var(--gold-soft, #BF9A69);
  --lt-bg: var(--void-deep, #04140c);
  --lt-card: var(--aubergine, #0b2318);
  --lt-line: var(--hairline, rgba(255, 255, 255, 0.12));
  --lt-text: var(--parchment, #ffffff);
  --lt-muted: var(--ash, #c9d3cd);
  --lt-dim: var(--ash-dim, #9fb0a6);
  --lt-ok: #bfe8d8;
  --lt-err: #ffb4a8;
}

/* ---------- accessibility ---------- */
:focus-visible { outline: 2px solid var(--lt-gold); outline-offset: 2px; border-radius: 6px; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 1000; background: var(--lt-gold); color: var(--lt-bg); padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* ---------- generic pieces ---------- */
.lt-shell { min-height: 100vh; padding: 32px 16px 64px; }
.lt-wrap { max-width: 1040px; margin: 0 auto; width: 100%; }
.lt-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.lt-head-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.lt-title { font-family:inherit; font-size: clamp(22px, 4vw, 30px); margin: 0 0 8px; }
.lt-sub { color: var(--lt-muted); margin: 0 0 24px; font-size: 14.5px; }
.lt-btn-sm { padding: 8px 16px !important; font-size: 12.5px !important; }
.lt-more { width: 100%; justify-content: center; margin-top: 6px; }
.lt-link { color: var(--lt-gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.lt-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.lt-spread { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.lt-muted { color: var(--lt-dim); font-size: 12.5px; }
.lt-mono { font-family:inherit; direction: ltr; unicode-bidi: isolate; }
.lt-card { background: var(--lt-card); border: 1px solid var(--lt-line); border-radius: 16px; padding: 20px; margin-bottom: 14px; min-width: 0; }
.lt-card h3, .lt-card h4 { margin: 0 0 8px; font-family:inherit; overflow-wrap: anywhere; }
.status-chip.muted { background: rgba(255, 255, 255, 0.08); color: var(--lt-muted); }
.status-chip.bad { background: rgba(255, 120, 100, 0.15); color: var(--lt-err); }
.lt-pre { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--lt-muted); font-size: 14px; }

/* tabs (also used by member/admin) */
.lt-tabs { display: flex; gap: 6px; background: rgba(255, 255, 255, 0.04); border-radius: 14px; padding: 5px; margin-bottom: 24px; overflow-x: auto; scrollbar-width: thin; }
.lt-tabs [role="tab"] { white-space: nowrap; padding: 10px 16px; border-radius: 10px; font-size: 13.5px; cursor: pointer; color: var(--lt-muted); border: none; background: none; font-family: inherit; }
.lt-tabs [role="tab"].active, .lt-tabs [role="tab"][aria-selected="true"] { background: var(--lt-gold); color: var(--lt-bg); font-weight: 600; }
.lt-badge { display: inline-block; min-width: 18px; padding: 0 6px; margin-inline-start: 6px; border-radius: 9px; background: var(--lt-err); color: #2a0a05; font-size: 11px; line-height: 18px; text-align: center; }

/* forms */
.lt-form .field { margin-bottom: 14px; }
.lt-form label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--lt-muted); }
.lt-form input[type=text], .lt-form input[type=tel], .lt-form input[type=password], .lt-form input[type=number], .lt-form input[type=url], .lt-form input[type=datetime-local], .lt-form select, .lt-form textarea {
  width: 100%; max-width: 100%; box-sizing: border-box; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--lt-line);
  border-radius: 10px; padding: 12px 14px; color: var(--lt-text); font-size: 14.5px; font-family: inherit;
}
.lt-form select option { color: #111; }
.lt-form input:focus, .lt-form select:focus, .lt-form textarea:focus { border-color: var(--lt-gold); outline: none; }
.lt-grid-2 { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
@media (min-width: 640px) { .lt-grid-2 { grid-template-columns: 1fr 1fr; } }
.lt-check { display: flex !important; gap: 8px; align-items: center; color: var(--lt-text) !important; font-size: 14px !important; }
.lt-hint { font-size: 12px; color: var(--lt-dim); margin-top: 4px; }

/* ---------- shop / catalog ---------- */
.lt-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.lt-product { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.lt-product .lt-type { font-size: 11px; letter-spacing: .04em; color: var(--lt-gold-soft); font-family:inherit; }
.lt-product img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.lt-product .lt-desc { color: var(--lt-muted); font-size: 14px; flex: 1; overflow-wrap: anywhere; }
.lt-price { font-weight: 600; color: var(--lt-text); }
.lt-prices { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; }
.lt-seats { font-size: 12.5px; color: var(--lt-gold-soft); }
.lt-seats.full { color: var(--lt-err); }

/* ---------- checkout ---------- */
.lt-steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--lt-dim); }
.lt-steps li[aria-current="step"] { color: var(--lt-gold-soft); font-weight: 600; }
.lt-options { display: grid; gap: 10px; border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.lt-options legend { font-size: 13.5px; color: var(--lt-muted); margin-bottom: 8px; padding: 0; }
.lt-option { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--lt-line); border-radius: 12px; cursor: pointer; min-width: 0; }
.lt-option:has(input:checked) { border-color: var(--lt-gold); background: rgba(191,154,105, 0.08); }
.lt-option input { accent-color: var(--lt-gold); flex: none; }
.lt-option .lt-option-body { min-width: 0; overflow-wrap: anywhere; }
.lt-group-title { font-size: 12.5px; color: var(--lt-gold-soft); margin: 10px 0 2px; }
.lt-instructions { background: rgba(255, 255, 255, 0.04); border-inline-start: 3px solid var(--lt-gold); border-radius: 10px; padding: 14px; margin: 12px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.lt-copy { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lt-copy code { overflow-wrap: anywhere; word-break: break-all; }

/* ---------- dashboards ---------- */
.lt-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px; margin-bottom: 20px; }
.lt-stat { background: var(--lt-card); border: 1px solid var(--lt-line); border-radius: 14px; padding: 14px 16px; }
.lt-stat .n { font-size: 24px; font-weight: 700; color: var(--lt-text); }
.lt-stat .l { font-size: 12.5px; color: var(--lt-muted); }
.lt-stat.alert { border-color: var(--lt-gold); }
.lt-table-wrap { overflow-x: auto; max-width: 100%; position: relative; } /* keeps .sr-only labels inside the scroll box */
.lt-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.lt-table th, .lt-table td { padding: 10px 8px; border-bottom: 1px solid var(--lt-line); text-align: start; vertical-align: top; }
.lt-table th { color: var(--lt-muted); font-weight: 500; white-space: nowrap; }
.lt-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13.5px; margin: 8px 0; }
.lt-kv dt { color: var(--lt-dim); }
.lt-kv dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.lt-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.lt-filter button[aria-pressed="true"] { border-color: var(--lt-gold); color: var(--lt-gold-soft); }
.lt-h { font-family:inherit; font-size: 18px; margin: 0 0 10px; overflow-wrap: anywhere; }
section > .lt-h { margin-top: 18px; }
a.logo { text-decoration: none; color: inherit; }
.newsletter + .form-msg { margin-top: 8px; }
/* style.css gives every English element a serif font; keep codes/ids monospace */
body[data-lang="en"] .lt-mono, body[data-lang="en"] .lt-mono * { font-family:inherit; }
/* closed drawer / login window: hidden from keyboard and screen readers too */
#drawer:not(.open) { visibility: hidden; transition: transform .5s cubic-bezier(.7, 0, .3, 1), visibility 0s .5s; }
.modal-overlay:not(.open) { visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
/* small phones: the home header was wider than the screen and pushed the menu
   and login buttons off it. Social icons stay available in the menu and footer. */
@media (max-width: 560px) {
  header.site-nav { padding-inline: 14px; gap: 8px; }
  header.site-nav .nav-right { gap: 8px; }
  header.site-nav .nav-right > .social-icons { display: none; }
  header.site-nav .logo { font-size: 18px; gap: 6px; }
  header.site-nav .logo img { width: 32px; height: 32px; }
  header.site-nav #openLoginBtn { padding: 8px 12px !important; font-size: 12px !important; }
  header.site-nav .lang-toggle button { padding: 6px 10px; }
}
/* mid-width screens: tighten the desktop nav so it fits with the shop link */
@media (min-width: 921px) and (max-width: 1240px) {
  nav.links { gap: 18px; }
  nav.links a { font-size: 13px; }
  header.site-nav .nav-right { gap: 12px; }
}
@media (min-width: 921px) and (max-width: 1080px) {
  header.site-nav .nav-right > .social-icons { display: none; }
}
/* <button class="btn btn-ghost"> got the browser's white button background,
   which made white text unreadable (e.g. the home "Member Login" button) */
button.btn { font-family: inherit; }
button.btn-ghost { background: transparent; }