/* css/events-shared.css — design tokens, buttons, status chips, guest dialog and toasts shared by the events listing and the event page. */

.ev-page {
  --ev-ink: #0a2342;
  --ev-ink-2: #1c4a7e;
  --ev-text: #1f2937;
  --ev-muted: #4b5563;                     /* 7.5:1 on white, 6.9:1 on paper */
  --ev-gold: var(--accent-gold, #c9a46b);
  --ev-gold-deep: #7a5c24;                 /* gold used as text: 5.6:1 on paper */
  --ev-paper: #fbf8f2;
  --ev-card: #fff;
  --ev-line: rgba(10, 35, 66, .12);
  --ev-ok: #14532d;   --ev-ok-bg: #dcfce7;
  --ev-warn: #7c2d12; --ev-warn-bg: #ffedd5;
  --ev-bad: #7f1d1d;  --ev-bad-bg: #fee2e2;
  --ev-past: #1e293b; --ev-past-bg: #e2e8f0;
  --ev-shade: 0 1px 2px rgba(10, 35, 66, .06), 0 14px 30px -16px rgba(10, 35, 66, .34);
  --ev-shade-hi: 0 2px 4px rgba(10, 35, 66, .08), 0 26px 44px -20px rgba(10, 35, 66, .42);
  --ev-r: 16px;
  --ev-ease: cubic-bezier(.16, 1, .3, 1);
  background: var(--ev-paper);
  color: var(--ev-text);
  padding-bottom: 3.5rem;
}
.ev-page *, .ev-page *::before, .ev-page *::after { box-sizing: border-box; }
.ev-page [hidden] { display: none !important; }

.ev-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ev-page :where(a, button, input, select):focus-visible {
  outline: 3px solid var(--ev-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(201, 164, 107, .75);
}

/* ---------- Buttons ---------- */
.ev-btn {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .5rem 1.1rem;
  border: 1.5px solid transparent; border-radius: 999px;
  font: 700 .92rem/1.1 var(--body-font, Lato, sans-serif);
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .15s;
}
.ev-btn:active:not(.ev-btn--static) { transform: scale(.97); }
.ev-btn--primary { background: var(--ev-gold); color: var(--ev-ink); }
.ev-btn--primary:hover { background: #dcc08f; }
.ev-btn--outline { background: #fff; border-color: var(--ev-ink); color: var(--ev-ink); }
.ev-btn--outline:hover { background: var(--ev-ink); color: #fff; }
.ev-btn--success { background: var(--ev-ok-bg); border-color: #86efac; color: var(--ev-ok); }
button.ev-btn--success:hover { background: #bbf7d0; }
.ev-btn--warn { background: var(--ev-warn-bg); border-color: #fdba74; color: var(--ev-warn); }
.ev-btn--warn:hover { background: #fed7aa; }
.ev-btn--wait { background: #f1f5f9; border-color: #cbd5e1; color: var(--ev-past); }
.ev-btn--heart { background: transparent; color: var(--ev-ink); padding-inline: .8rem; }
.ev-btn--heart:hover { background: rgba(10, 35, 66, .06); }
.ev-btn--heart[aria-pressed="true"] { color: #9f1239; background: #ffe4e6; border-color: #fda4af; }
.ev-btn--static { cursor: default; }
.ev-btn--confirm { background: var(--ev-bad-bg) !important; border-color: #fca5a5 !important; color: var(--ev-bad) !important; }
.ev-btn[disabled], .ev-btn[aria-busy="true"] { opacity: .65; cursor: progress; }
.ev-count { font-variant-numeric: tabular-nums; }
.ev-btn--block { display: flex; width: 100%; }
.ev-btn--quiet { background: transparent; color: var(--ev-muted); border-color: var(--ev-line); }
.ev-btn--quiet:hover { background: #f1f5f9; color: var(--ev-bad); border-color: #fca5a5; }

@keyframes ev-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Status chips ---------- */
.ev-status {
  position: absolute; top: .85rem; left: .85rem; z-index: 1;
  padding: .32rem .7rem .32rem .6rem; border-radius: 999px;
  font: 700 .72rem/1 var(--body-font, Lato, sans-serif); letter-spacing: .08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .4rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.ev-status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.ev-status--open { background: var(--ev-ok-bg); color: var(--ev-ok); }
.ev-status--full { background: var(--ev-warn-bg); color: var(--ev-warn); }
.ev-status--closed { background: var(--ev-bad-bg); color: var(--ev-bad); }
.ev-status--past { background: var(--ev-past-bg); color: var(--ev-past); }

/* ---------- Guest registration dialog ---------- */
.ev-modal {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 1rem;
  background: rgba(8, 19, 31, .62); backdrop-filter: blur(4px);
  animation: ev-fade .25s ease-out;
}
.ev-modal__panel {
  position: relative; width: 100%; max-width: 27rem; max-height: calc(100dvh - 2rem); overflow: auto;
  padding: 1.75rem 1.5rem 1.4rem; background: #fff; border-radius: 22px; border-top: 5px solid var(--ev-gold);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .55); animation: ev-rise .4s var(--ev-ease);
}
.ev-modal__close { position: absolute; top: .6rem; right: .6rem; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ev-muted); font-size: 1.1rem; cursor: pointer; }
.ev-modal__close:hover { background: #f1f5f9; color: var(--ev-ink); }
.ev-modal h2 { margin: 0 2rem .3rem 0; color: var(--ev-ink); font-size: 1.5rem; }
.ev-modal__for { margin: 0 0 1.1rem; color: var(--ev-muted); font-size: .95rem; }
.ev-modal__for strong { color: var(--ev-ink); }
.ev-modal__or { display: flex; align-items: center; gap: .8rem; margin: 1.1rem 0; color: var(--ev-muted); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ev-modal__or::before, .ev-modal__or::after { content: ""; flex: 1; border-bottom: 1px solid var(--ev-line); }
.ev-field { display: grid; gap: .35rem; margin-bottom: .95rem; }
.ev-field label { color: var(--ev-ink); font-size: .88rem; font-weight: 700; }
.ev-field input { width: 100%; min-height: 46px; padding: .6rem .85rem; border: 1.5px solid #cbd5e1; border-radius: 12px; font: 400 1rem/1.2 var(--body-font, Lato, sans-serif); color: var(--ev-text); background: #fff; }
.ev-field input:hover { border-color: #94a3b8; }
.ev-field input:focus-visible { border-color: var(--ev-ink); }
.ev-field small { color: var(--ev-muted); }
.ev-modal__msg { min-height: 1.3rem; margin: 0 0 .6rem; font-size: .92rem; font-weight: 700; }
.ev-modal__msg.is-ok { color: var(--ev-ok); }
.ev-modal__msg.is-err { color: var(--ev-bad); }
.ev-modal .ev-btn { width: 100%; }
.ev-modal__cancel { margin-top: .4rem; background: transparent; color: var(--ev-muted); }
.ev-modal__cancel:hover { background: #f1f5f9; color: var(--ev-ink); }
body.ev-lock { overflow: hidden; }
@keyframes ev-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Toasts ---------- */
.ev-toasts { position: fixed; z-index: 10000; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom)); translate: -50% 0; display: grid; gap: .5rem; width: min(26rem, calc(100vw - 2rem)); pointer-events: none; }
.ev-toast {
  display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 14px; pointer-events: auto;
  background: var(--ev-ink); color: #fff; font-size: .95rem; line-height: 1.4; box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .6);
  animation: ev-rise .35s var(--ev-ease);
}
.ev-toast i { margin-top: .15rem; color: #e7cf9f; }
.ev-toast--err { background: #7f1d1d; }
.ev-toast--err i { color: #fecaca; }


/* ---------- Poster placeholder, date plate, spots meter (card and event page) ---------- */
.ev-blank {
  position: absolute; inset: 0; display: grid; place-content: center; gap: .35rem; text-align: center; color: #fff;
  background: radial-gradient(30rem 14rem at 80% 0, rgba(201, 164, 107, .32), transparent 60%), linear-gradient(160deg, #0f2f57, var(--ev-ink) 70%);
}
.ev-blank::before { content: ""; position: absolute; inset: .7rem; border: 1px solid rgba(201, 164, 107, .45); border-radius: calc(var(--ev-r) - 8px); }
.ev-blank__mark { font-family: var(--heading-font, Georgia, serif); font-style: italic; font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); color: #e7cf9f; }
.ev-blank__type { font: 700 .74rem/1 var(--body-font, Lato, sans-serif); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
.ev-plate {
  position: absolute; left: 1.1rem; bottom: -1.9rem; z-index: 1;
  display: grid; justify-items: center; width: 3.9rem; padding: .3rem 0 .4rem;
  background: #fff; border: 1px solid var(--ev-line); border-top: 4px solid var(--ev-gold); border-radius: 10px;
  box-shadow: 0 8px 18px -8px rgba(10, 35, 66, .45);
  line-height: 1; color: var(--ev-ink); text-align: center;
}
.ev-plate__mon { font: 700 .68rem/1 var(--body-font, Lato, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--ev-gold-deep); }
.ev-plate__day { margin: .12rem 0; font: 700 1.65rem/1 var(--heading-font, Georgia, serif); }
.ev-plate__yr { font: 700 .66rem/1 var(--body-font, Lato, sans-serif); color: var(--ev-muted); }
.ev-meter { margin-top: 1rem; }
.ev-meter__track { height: 6px; border-radius: 6px; background: #e8e2d4; overflow: hidden; }
.ev-meter__fill { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--ev-ink-2), var(--ev-ink)); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .6s var(--ev-ease); }
.ev-meter__text { margin: .4rem 0 0; color: var(--ev-muted); font-size: .84rem; font-variant-numeric: tabular-nums; }

/* ---------- Guest dialog: fields, hints, errors, success ---------- */
.ev-modal__head { display: flex; align-items: center; gap: .8rem; margin: 0 2.2rem .35rem 0; }
.ev-modal__head h2 { margin: 0; }
.ev-modal__badge { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: #f3e9d6; color: var(--ev-gold-deep); font-size: 1.1rem; }
.ev-modal__perk { margin: .55rem 0 0; color: var(--ev-muted); font-size: .86rem; text-align: center; }
.ev-field__hint { margin: 0; color: var(--ev-muted); font-size: .82rem; line-height: 1.4; }
.ev-field__err { margin: 0; color: var(--ev-bad); font-size: .86rem; font-weight: 700; }
.ev-field__err::before { content: "\f06a"; font: 900 .8rem/1 "Font Awesome 6 Free"; margin-right: .4rem; }   /* exclamation-circle: not colour alone */
.ev-field input[aria-invalid="true"] { border-color: #dc2626; background: #fff7f7; }
.ev-group { display: flex; }
.ev-group__addon { display: grid; place-items: center; padding-inline: .85rem; border: 1.5px solid #cbd5e1; border-right: 0; border-radius: 12px 0 0 12px; background: #f1f5f9; color: var(--ev-muted); font-weight: 700; }
.ev-group input { border-radius: 0 12px 12px 0; }
.ev-check { display: flex; align-items: center; gap: .65rem; min-height: 44px; margin: 0 0 .5rem; color: var(--ev-muted); font-size: .88rem; cursor: pointer; }
.ev-check small { display: block; color: var(--ev-muted); font-size: .78rem; }
.ev-forget { margin: 0 0 .4rem; }
.ev-forget .ev-link-btn { min-height: 44px; padding: .25rem .8rem; border: 0; border-radius: 8px; background: transparent; color: var(--ev-muted); font: 700 .84rem/1 var(--body-font, Lato, sans-serif); cursor: pointer; }
.ev-forget .ev-link-btn:hover { background: #f1f5f9; color: var(--ev-bad); }
.ev-forget [hidden] { display: none; }
.ev-check input { width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--ev-ink); }
.ev-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }   /* honeypot: off-screen, not display:none, so bots still fill it */
.ev-done { display: grid; justify-items: center; gap: .5rem; text-align: center; }
.ev-done__icon { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--ev-ok-bg); color: var(--ev-ok); font-size: 1.5rem; animation: ev-rise .5s var(--ev-ease); }
.ev-done h2 { margin: .2rem 0 0; }
.ev-done p { margin: 0; color: var(--ev-muted); }
.ev-done__ticket { width: 100%; margin: .8rem 0 .2rem; padding: .9rem 1rem; display: grid; gap: .55rem; text-align: left; background: var(--ev-paper); border: 1px dashed rgba(10, 35, 66, .25); border-radius: 14px; }
.ev-done__ticket div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ev-done__ticket dt { color: var(--ev-muted); font-size: .85rem; }
.ev-done__ticket dd { margin: 0; color: var(--ev-ink); font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.ev-done__note { font-size: .88rem; }
.ev-done__actions { display: grid; gap: .5rem; width: 100%; margin-top: .7rem; }

@media (prefers-reduced-motion: reduce) {
  .ev-page *, .ev-page *::before, .ev-page *::after, .ev-modal, .ev-modal *, .ev-toast { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Guest sign-up: optional mobile number + the two agreement boxes (privacy policy, age) ---------- */
.ev-opt { font-weight: 400; color: var(--ev-muted); font-size: .85em; }
.ev-agree { display: grid; gap: .1rem; margin: .2rem 0 .7rem; }
.ev-agree__row { display: grid; grid-template-columns: 2.75rem 1fr; align-items: start; }
.ev-agree__row label { padding: .6rem 0; font-size: .88rem; line-height: 1.5; color: var(--ev-muted); cursor: pointer; }
.ev-agree__row a { color: var(--ev-ink); text-decoration: underline; text-underline-offset: 2px; }
.ev-agree .ev-field__err { margin: 0 0 .3rem 2.75rem; }
/* the input is the 44 x 44 target; the visible box is drawn in its middle */
.ev-agree__box {
  appearance: none; -webkit-appearance: none;
  width: 2.75rem; height: 2.75rem; margin: 0; border: 0; border-radius: 8px;
  background: transparent no-repeat center / 1.3rem 1.3rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='4' fill='%23fff' stroke='%23566179' stroke-width='2'/%3E%3C/svg%3E");
}
.ev-agree__box:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='4' fill='%230a2342' stroke='%230a2342' stroke-width='2'/%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ev-agree__box[aria-invalid="true"]:not(:checked) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='2' width='20' height='20' rx='4' fill='%23fff7f7' stroke='%23dc2626' stroke-width='2.4'/%3E%3C/svg%3E");
}
.ev-agree__box:focus-visible { outline: 3px solid var(--ev-ink); outline-offset: -3px; }
@media (forced-colors: active) { .ev-agree__box { appearance: auto; -webkit-appearance: auto; background-image: none; } }

/* ---------- Cancelled: a solid red chip and a rubber stamp laid over the poster (listing cards and the event page share both) ---------- */
.ev-status--cancelled { background: #7f1d1d; color: #fff; }
.ev-stamp {
  position: absolute; left: 50%; top: 50%; z-index: 3; width: max-content; max-width: 94%; translate: -50% -50%; rotate: -13deg; pointer-events: none;
}
.ev-stamp__word {
  display: block; padding: .3em .62em .24em; border: .16em double #b91c1c; border-radius: .3em;
  background: rgba(255, 255, 255, .88); color: #b91c1c; text-align: center;
  font: 900 1.7rem/1 var(--body-font, Lato, sans-serif); letter-spacing: .16em; text-indent: .16em; text-transform: uppercase;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .55), inset 0 0 0 .08em rgba(185, 28, 28, .25);
}
@media (prefers-reduced-motion: no-preference) {
  .ev-stamp { animation: ev-stamp-in .55s .15s var(--ev-ease) both; }
}
@keyframes ev-stamp-in { from { opacity: 0; scale: 1.5; } to { opacity: 1; scale: 1; } }
@media (max-width: 420px) { .ev-stamp__word { font-size: 1.3rem; } }