/* shmormakom eventer — public event pages.
   Set like the landing page's club listing: white page, black type, hard
   edges, rules instead of shadows, Rubik for display, the logo blue for the
   one thing to press. The "Listing pass" block at the end does most of it. */

:root {
  /* The landing's listing palette: white page, near-black type, one blue. */
  --cream: #ffffff;
  --cream-2: #f3f4f6;
  --paper: #ffffff;
  --yellow: #0078d4;
  --bg: #ffffff;
  --ink: #0d0d0f;
  --ink-soft: #3a3a40;
  --muted: #74747c;
  --line: #e6e6e8;
  --card: #ffffff;
  --accent: #0078d4;        /* the CTA is the logo blue */
  --accent-hover: #0d0d0f;  /* and goes black on hover */
  --blue: #0078d4;
  --display: 'Rubik', 'Heebo', 'IBM Plex Sans Arabic', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 'Inter', 'Heebo', 'IBM Plex Sans Arabic', -apple-system, "Segoe UI", Arial, "Noto Sans Hebrew", "Noto Sans Arabic", sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
.site-wrap { max-width: none; margin: 0; padding: 0 clamp(16px, 3vw, 40px); }

/* ── Header (landing-the marketing site style) ───────────────────────── */
.site-head {
  position: static; /* scrolls away with the page, like the marketing site */
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.site-head .site-wrap { display: flex; align-items: center; gap: 32px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 1.35rem; color: var(--ink); }
.brand img { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 3px 10px rgba(20,20,20,.18); }
.brand small { display: block; font-size: .66rem; font-weight: 500; color: var(--muted); line-height: 1.1; }
.head-nav { display: flex; gap: 26px; font-weight: 700; font-size: .98rem; }
.head-nav a:hover { color: var(--muted); }
.head-account { color: inherit; text-decoration: none; font-weight: 700; font-size: .98rem; }
.head-account:hover { color: var(--muted); }
.head-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 14px; }
.lang-wrap { position: relative; }
.head-lang {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: .85rem; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 999px;
  background: transparent; padding: 9px 16px; transition: all .18s;
  cursor: pointer; font-family: inherit;
}
.head-lang:hover { background: var(--ink); color: var(--cream); }
.head-lang svg { width: 17px; height: 17px; }
.lang-menu[hidden] { display: none !important; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 30px rgba(20,20,20,.15);
  padding: 6px; min-width: 130px; z-index: 60; display: grid;
}
.lang-menu a {
  display: block; padding: 9px 14px; border-radius: 9px;
  font-size: .92rem; font-weight: 500;
}
.lang-menu a:hover { background: var(--cream-2); }
.lang-menu a.active { font-weight: 800; }
.pill-btn {
  border: 1.5px solid var(--ink); border-radius: 999px;
  padding: 10px 24px; font-weight: 700; font-size: .95rem;
  background: transparent; color: var(--ink); transition: all .18s;
}
.pill-btn:hover { background: var(--ink); color: var(--cream); }
.search-round {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: transparent;
  display: grid; place-items: center; color: var(--ink); transition: all .18s;
}
.search-round:hover { background: var(--ink); color: var(--cream); }
.search-round svg { width: 18px; height: 18px; }
@media (max-width: 860px) { .head-nav { display: none; } }
@media (max-width: 640px) {
  .site-head .site-wrap { gap: 10px; height: 58px; flex-wrap: nowrap; }
  /* The wordmark shrinks and clips rather than wrapping into the buttons. */
  .brand { gap: 7px; font-size: .95rem; min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .brand-mark { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-mark small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .head-actions { flex: 0 0 auto; min-width: 0; }
  .brand img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
  .brand small { font-size: .55rem; }
  .head-actions { gap: 6px; }
  .head-lang { padding: 5px 9px; font-size: .72rem; gap: 4px; }
  .head-lang svg { width: 12px; height: 12px; }
  .search-round { display: none; }
  .pill-btn { padding: 6px 11px; font-size: .72rem; white-space: nowrap; }
}

.pub-wrap { max-width: 660px; margin: 0 auto; padding: 34px 18px 60px; }
.pub-wrap--wide { max-width: none; padding-inline: clamp(16px, 3vw, 40px); }

/* ── Event page: two-column layout ────────────────────
   Left sidebar: poster, date, venue, organizers, reserve (sticky).
   Right: title, organizers, description, video, tiers. */
.tz-grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}
@media (min-width: 960px) {
  .tz-grid { flex-direction: row; align-items: flex-start; gap: 40px; }
  .tz-col-side {
    width: 340px; flex: none;
    position: sticky; top: 16px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  }
  .tz-col-side .tz-cta { width: 100%; }
  .tz-col-body { flex: 1 1 auto; min-width: 0; max-width: 760px; }
}
.tz-rule { border: 0; border-block-start: 1px solid var(--line); margin: 14px 0 4px; }

/* ── Event head (marketing-site style) ───────────────────────────── */
.tz-hero { display: flex; justify-content: center; margin: 6px 0 22px; }
.tz-hero-link { display: block; cursor: zoom-in; width: 100%; max-width: 350px; }
/* The whole poster, never cropped: full column width, height follows the
   image's own proportions (it used to be forced into a 350×400 box with
   object-fit: cover, which cut the top and bottom off portrait posters).
   max-height guards against an absurdly tall upload; `contain` then keeps
   it whole inside that cap instead of stretching it. */
.tz-hero-img {
  display: block;
  width: 100%; max-width: 350px;
  height: auto; max-height: 620px;
  object-fit: contain;
  border-radius: 18px;
}

.tz-organizers {
  width: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tz-organizers-row { display: grid; gap: 8px; }
.tz-organizers-label { font-size: 13px; font-weight: 900; color: var(--muted); margin: 0; }
.tz-organizers-name { font-weight: 600; color: var(--ink); }
.tz-organizers-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink); text-decoration: none;
  line-height: 1;
}
.tz-organizers-link:hover { text-decoration: underline; }
.tz-org-avatar {
  width: 26px; height: 26px; border-radius: 8px; object-fit: cover;
  border: 1px solid var(--line, #e5e7eb); background: #fff;
}

/* Organizer profile page (marketing-site style) */
.tz-org-page { padding-block-start: 28px; }
.tz-org-cover {
  border-radius: 24px; overflow: hidden; aspect-ratio: 1200 / 380;
  background: #e9e7de;
  box-shadow: 0 14px 40px rgba(20, 20, 20, .10);
  position: relative;
}
.tz-org-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,20,20,.18), transparent 45%);
  pointer-events: none;
}
/* Cover = the whole uploaded image, fitted inside the banner (never cropped,
   whatever its shape). A blurred, dimmed copy fills the leftover sides so a
   square or tall cover still reads as a full-width banner. */
.tz-org-cover img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.tz-org-cover-img { object-fit: contain; }
.tz-org-cover-bg {
  object-fit: cover;
  filter: blur(34px) brightness(.42) saturate(1.2);
  transform: scale(1.15); /* hides the blur's soft edge at the rim */
}
.tz-org-head { display: flex; align-items: center; gap: 20px; padding: 22px 0 4px; position: relative; z-index: 1; }
.tz-org-head--overlap { margin-top: -34px; align-items: flex-end; }
.tz-org-head--overlap .tz-org-id { padding-bottom: 4px; }
.tz-org-head--overlap .tz-org-logo {
  width: 116px; height: 116px; border-radius: 28px;
  border: 5px solid var(--paper, #FAF9F0);
  box-shadow: 0 12px 30px rgba(20, 20, 20, .20);
}
.tz-org-logo {
  width: 96px; height: 96px; border-radius: 22px; object-fit: cover; flex: none;
  border: 1px solid var(--line, #e5e7eb); background: #fff;
  box-shadow: 0 6px 18px rgba(20, 20, 20, .10);
}
.tz-org-logo--empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; color: var(--muted);
}
.tz-org-id { display: grid; gap: 3px; }
.tz-organizers-label {
  text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 900;
}
.tz-org-name { font-size: clamp(26px, 3vw, 36px); font-weight: 900; margin: 0; letter-spacing: -.01em; }
.tz-org-social { display: flex; align-items: center; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.tz-org-social a {
  width: 34px; height: 34px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e0ddd2; color: var(--ink); background: #fff;
  box-shadow: 0 1px 4px rgba(20, 20, 20, .06);
  transition: background .15s, transform .15s;
}
.tz-org-social a:hover { background: #f1efe6; transform: translateY(-2px); text-decoration: none; }
.tz-org-social svg { width: 18px; height: 18px; }
.tz-org-count {
  font-size: 13px; font-weight: 600; color: var(--muted);
  background: var(--cream-2); border-radius: 999px; padding: 5px 13px;
}
.tz-org-about-card {
  margin: 18px 0 6px; max-width: 860px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 22px;
}
.tz-org-about {
  margin: 0; white-space: pre-line;
  color: var(--ink); line-height: 1.7; font-size: 15px;
}
.tz-org-empty { color: var(--muted); padding: 30px 0 60px; }
.tz-sim-card--past .tz-sim-img { filter: grayscale(.75) brightness(.92); }
.tz-sim-card--past .tz-sim-name { color: var(--muted); }
.tz-sim-past-tag {
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px;
  background: rgba(20, 20, 20, .78); color: #fff;
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px;
}

.tz-divider {
  text-align: center;
  color: var(--muted);
  opacity: .5;
  margin: 26px 0;
  font-size: 18px;
}

.tz-desc {
  white-space: pre-line;
  max-width: 60ch;
  margin: 0 0 18px;
  line-height: 1.7;
}

.tz-logistics {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  gap: 6px;
  color: var(--ink);
}
.tz-title {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 8px;
}
.tz-organizer { color: var(--muted); margin: 0 0 22px; }
.tz-organizer strong { color: var(--ink); }

/* Date / doors / venue as hairline-separated cells */
.tz-when {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.tz-when-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 18px;
}
.tz-when-cell:first-child { padding-inline-start: 0; }
.tz-when-cell + .tz-when-cell { border-inline-start: 1px solid var(--line); }
.tz-when-big { font-size: 26px; font-weight: 700; line-height: 1.1; display: flex; align-items: baseline; }
.tz-when-day { font-size: 16px; font-weight: 500; color: var(--muted); margin-inline-start: 6px; }
.tz-when-small { font-size: 13px; color: var(--muted); }
.tz-when-label { color: var(--muted); font-weight: 900; }
.tz-where { display: grid; gap: 8px; justify-items: start; }
.tz-where-line { font-size: 15px; }
.tz-where-line .tz-at { color: var(--muted); font-weight: 900; }
.tz-city-pill {
  display: inline-block;
  background: var(--yellow);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.tz-side-block { display: grid; gap: 4px; text-align: start; width: 100%; }
.tz-strong { color: var(--ink); font-weight: 600; }

.tz-status { margin-bottom: 26px; }
.tz-tag {
  display: inline-block;
  font-size: 13px;
  padding: 4px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--card);
}
.tz-tag--open { color: #1E7A46; border-color: #BFE6D0; background: #EEF9F2; }

/* ── Tiers ───────────────────────────────────────────────── */
.tz-tiers { display: grid; gap: 12px; }
.tz-tier {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.tz-tier-info { display: grid; gap: 2px; }
.tz-tier-quota { font-size: 12px; color: var(--muted); }
.tz-tier-price {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

/* The black pill CTA (turns green on hover, like the original) */
.tz-cta {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  padding: 16px 30px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  margin-top: 8px;
  text-align: center;
}
.tz-cta:hover { background: var(--accent-hover); color: #fff; border-color: var(--accent-hover); }
.tz-cta-main { font-weight: 700; }
.tz-cta-from { font-weight: 400; font-size: 15px; opacity: .85; }
.tz-cta--submit { width: 100%; }
.tz-cta--inline { display: inline-flex; font-size: 15px; padding: 10px 24px; }
.tz-cta-wrap { margin-top: 18px; }

/* YouTube embed, 16:9 like the reference */
.tz-video {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  margin: 6px 0 22px;
}
.tz-video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; border-radius: 14px;
}

/* ── Forms ───────────────────────────────────────────────── */
.pub-title { font-size: 26px; font-weight: 800; margin: 0 0 4px; }
.pub-subtitle { color: var(--muted); margin: 0 0 18px; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
}
.pub-form label { display: grid; gap: 5px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.pub-form input {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  padding: 11px 13px;
  width: 100%;
}
.pub-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin: 0 0 14px; }
legend { padding: 0 8px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.field-err { color: #C0392B; font-size: 12px; }
.pub-pay-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.pub-price {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.pub-note { font-size: 12px; color: var(--muted); }
code { background: var(--bg); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; font-size: 13px; }

/* ── Done / 404 ──────────────────────────────────────────── */
.pub-done { text-align: center; padding: 44px 26px; }
.pub-done h1 { font-size: 26px; font-weight: 800; }
.pub-done .tz-cta { margin-top: 18px; }

/* ── Similar events (marketing-site style card carousel) ─────────── */
.tz-similar { border-block-start: 1px solid var(--line); margin-top: 40px; padding: 18px 0 8px; }
.tz-similar-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.tz-similar-title { display: flex; align-items: center; gap: 9px; font-size: 22px; font-weight: 800; margin: 0; }
.tz-similar-title svg { width: 20px; height: 20px; }
.tz-similar-nav { display: flex; gap: 8px; }
.tz-sim-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  display: grid; place-items: center; transition: all .16s;
}
.tz-sim-arrow:hover { background: var(--ink); color: var(--cream); }
.tz-sim-arrow svg { width: 16px; height: 16px; }
.tz-similar-row {
  display: flex; gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.tz-similar-row::-webkit-scrollbar { display: none; }
/* Static grid variant (organizer profile) */
.tz-similar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 20px;
}
.tz-sim-card {
  flex: none;
  width: 270px;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  color: var(--ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.tz-similar-grid .tz-sim-card { width: auto; }
.tz-sim-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(20, 20, 20, .10);
}
.tz-sim-imgwrap { position: relative; overflow: hidden; }
.tz-sim-img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  display: block;
  transition: transform .25s ease;
}
.tz-sim-card:hover .tz-sim-img { transform: scale(1.04); }
.tz-sim-img--empty {
  display: flex; align-items: center; justify-content: center;
  background: var(--cream-2); color: var(--muted); font-size: 26px;
}
.tz-sim-date {
  display: inline-flex; align-items: center;
  border: 1px solid var(--ink); border-radius: 999px;
  background: var(--paper);
  padding: 3px 12px;
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.tz-sim-body { display: grid; gap: 8px; padding: 12px 14px 14px; }
.tz-sim-tags { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tz-sim-cat {
  background: var(--ink); color: var(--cream);
  border-radius: 8px; padding: 3px 10px;
  font-size: 12px; font-weight: 600;
  max-width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tz-city-pill--sm { padding: 3px 11px; font-size: 12px; }
.tz-sim-info { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tz-sim-price { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 15px; font-weight: 700; }
.tz-sim-date--overlay {
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px;
  box-shadow: 0 2px 8px rgba(20, 20, 20, .14);
}
.tz-sim-name { font-size: 15px; font-weight: 700; margin: 0; line-height: 1.3; }
.tz-sim-venue {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--muted);
}
.tz-sim-venue svg { width: 14px; height: 14px; flex: none; }

/* ── Footer (landing-the marketing site style) ───────────────────────── */
.site-foot { background: var(--cream); border-top: 1px solid var(--line); padding: 56px 0 34px; margin-top: 46px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.foot-brand .brand { font-size: 1.5rem; }
.foot-social { display: flex; gap: 12px; margin-top: 22px; }
.soc {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: var(--cream);
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 700;
  transition: transform .18s;
}
.soc svg { width: 18px; height: 18px; }
.soc:hover { transform: scale(1.12); }
.foot-col h4 { font-size: .95rem; font-weight: 800; margin: 0 0 16px; }
.foot-col a { display: block; padding: 6px 0; font-weight: 500; color: var(--ink-soft, #3d3d3a); }
.foot-col a:hover { color: var(--ink); }
.foot-bottom {
  margin-top: 44px; padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  color: var(--muted); font-size: .88rem;
}
@media (max-width: 760px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
  .tz-when { gap: 4px; }
  .tz-when-cell { padding: 6px 12px; }
}
/* ── Checkout: summary + form two-column layout ─────────── */
.co-wrap { max-width: 1060px; margin: 0 auto; padding-block: 34px 60px; }
.co-grid { display: grid; grid-template-columns: 340px 1fr; gap: 22px; align-items: start; }
@media (max-width: 860px) { .co-grid { grid-template-columns: 1fr; } }

.co-summary { position: sticky; top: 18px; padding: 20px; }
@media (max-width: 860px) {
  /* Sticky only makes sense beside the form in the two-column layout —
     stacked single-column on mobile, it pins the poster to the top of the
     screen while the form scrolls underneath it. */
  .co-summary { position: static; }
}
.co-img { width: 100%; height: 220px; object-fit: cover; border-radius: 12px; margin-bottom: 14px; }
.co-event-name { font-size: 18px; font-weight: 800; margin: 0 0 10px; }
.co-facts { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; font-size: 13.5px; color: var(--muted); }
.co-facts li { display: flex; gap: 8px; align-items: baseline; }
.co-tier { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 8px; margin-bottom: 12px; }
.co-tier-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.co-total { font-weight: 800; font-size: 16px; border-top: 1px dashed var(--line); padding-top: 10px; }
.co-summary .pub-note { margin: 10px 0 0; }

.co-form { padding: 26px 28px; }
.co-section {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin: 0 0 14px; font-weight: 700;
}
.co-section:not(.co-section--first) { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.co-cardnum { margin-bottom: 14px; }
.co-pay { margin-top: 24px; }
.co-form .pub-form input { background: #fff; }
.co-form .pub-form input:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }

/* Checkout summary facts: inline icons instead of emoji */
.co-facts svg { width: 16px; height: 16px; flex: none; transform: translateY(2px); color: var(--muted); }

/* Checkout: qty + coupon row; selects match inputs */
.co-qty-row { margin-bottom: 14px; }
.pub-form select {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  padding: 11px 13px;
  width: 100%;
}
.pub-form select:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }

/* Checkout: attendee blocks (one payer, several people) */
.person { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; background: var(--bg); }
.person-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.person-num { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.person-remove {
  background: none; border: none; color: #C0392B; font-size: 13px;
  cursor: pointer; padding: 2px 6px; font-family: inherit;
}
.person-remove:hover { text-decoration: underline; }
.btn-person-add {
  display: inline-block; margin-block: 4px 14px;
  background: none; border: 1.5px dashed var(--line); border-radius: 999px;
  color: var(--ink); font: inherit; font-weight: 700; font-size: 14px;
  padding: 9px 20px; cursor: pointer; transition: all .15s;
}
.btn-person-add:hover { border-color: var(--ink); background: var(--cream-2); }
.co-people-note { margin: -4px 0 12px; font-size: 13px; }

/* ── Wallet buttons (Apple Pay / Google Pay) ── */
.wallet-row { display: flex; gap: 10px; margin-bottom: 8px; }
.wallet-btn {
  flex: 1; min-height: 44px; border-radius: 8px; border: 1px solid var(--ink);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font: inherit; transition: opacity .15s, transform .15s;
}
.wallet-btn--apple { background: #000; color: #fff; }
.wallet-btn--gpay { background: #fff; color: #3c4043; }
.wallet-btn:not(:disabled):hover { transform: translateY(-1px); opacity: .92; }
.wallet-btn:disabled { cursor: not-allowed; opacity: .35; filter: grayscale(1); }
.wallet-btn__label { font-size: 15px; font-weight: 600; white-space: nowrap; }
.wallet-tags { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px; }
.wallet-tag { font-size: 12px; color: #8a8378; }
.wallet-tag::before { content: 'ⓘ '; }
.co-or { text-align: center; font-size: 12px; margin: 2px 0 10px; }
.co-or::before, .co-or::after { content: '— '; color: #c8c2b6; }
.co-or::after { content: ' —'; color: #c8c2b6; }

/* ── Buyer auth (login / signup / OTP) + checkout gate ── */
.auth-card { max-width: 460px; margin: 0 auto; }
.auth-swap { margin-top: 14px; text-align: center; }
.auth-swap a { color: var(--accent, #FF5A1F); text-decoration: underline; }
.auth-btn--google { width: 100%; margin-top: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; }
/* ── OTP screens (standalone /otp and the checkout gate pane) ── */
/* Every auth page (login/signup/otp/phone/…) renders a centered 460px card —
   its heading must centre too, or desktop shows a left-leaning title over a
   centred card. Contact keeps its own alignment (different card). */
.pub-wrap:has(.auth-card) .co-head { text-align: center; }
.otp-dest {
  display: inline-block; padding: 4px 14px; margin-top: 6px;
  background: var(--cream); border: 1px solid var(--line); border-radius: 999px;
  font-weight: 700; color: var(--ink);
}
.otp-input {
  display: block; margin-inline: auto;
  letter-spacing: 10px; font-size: 26px; font-weight: 700;
  text-align: center; padding: 13px 12px 11px;
  background: var(--cream); border-radius: 12px;
}
.otp-label { text-align: center; }
.otp-label input { max-width: 300px; }
.auth-otp-card { text-align: center; }
.auth-otp-card .field-err { text-align: center; }
.auth-otp-card .otp-dest { max-width: 100%; overflow-wrap: anywhere; }
.auth-otp-card .tz-cta--submit { margin-top: 14px; }
.link-btn { background: none; border: none; color: var(--accent, #FF5A1F); cursor: pointer; text-decoration: underline; font: inherit; padding: 0; }
.link-btn[hidden] { display: none; }
.logout-form { display: inline; margin: 0; }
.logout-form .pill-btn { cursor: pointer; }
.gate-box { padding: 8px 0; }
.gate-box .tz-cta { display: flex; justify-content: center; width: 100%; margin-top: 10px; }
.gate-box .gate-secondary.tz-cta { background: transparent; border: 1px solid rgba(255,255,255,.25); }

/* ── Checkout gate: blurred page underneath, login card centered ── */
.co-veiled { filter: blur(7px); pointer-events: none; user-select: none; }
.auth-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 10, 14, 0.45); padding: 18px;
  animation: auth-fade .18s ease;
}
@keyframes auth-fade { from { opacity: 0; } to { opacity: 1; } }
.auth-overlay-card {
  width: 100%; max-width: 400px; max-height: 92vh; overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  border-radius: 16px; padding: 20px 20px 18px;
  position: relative;
  animation: auth-pop .22s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes auth-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.auth-overlay-card form { display: flex; flex-direction: column; gap: 10px; }

/* Header: title left, ghost × right, one quiet line of subtext */
.auth-gate-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.auth-gate-title { font-size: 17px; font-weight: 700; margin: 2px 0 0; line-height: 1.35; }
.auth-overlay-close {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: transparent; border: none; color: var(--muted); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.auth-overlay-close:hover { background: var(--cream); color: var(--ink); }
.auth-gate-sub { color: var(--muted); font-size: 13.5px; margin: 3px 0 14px; }

/* Guest first: the black pill CTA */
.auth-guest-btn { width: 100%; margin-top: 0; font-size: 15px; padding: 11px 18px; border-radius: 10px; }
.auth-guest-btn .tz-cta-main { color: #fff; }

/* Google: official sign-in button style (white, #747775 border, G logo) */
.auth-btn--google {
  width: 100%; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; border: 1px solid #747775; border-radius: 10px;
  padding: 10px 18px; text-decoration: none; color: #1f1f1f;
  font-size: 15px; font-weight: 500; font-family: Roboto, 'Inter', 'Heebo', -apple-system, Arial, sans-serif;
  transition: background .15s ease, box-shadow .15s ease;
}
.auth-btn--google:hover { background: #f8f8f8; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.auth-btn--google:active { background: #f0f0f0; }
.auth-btn--google .auth-google-logo { flex: none; }

/* "OR" divider */
.auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 12px; font-size: 12px; color: var(--muted);
}
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); color: inherit; }

/* Sign in / Create account tabs */
.auth-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--cream); border: 1px solid var(--line);
  border-radius: 10px; padding: 3px; margin-bottom: 12px;
}
.auth-tab {
  border: none; background: transparent; color: var(--muted);
  font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 7px 10px; border-radius: 8px; cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.auth-tab:hover { color: var(--ink); }
.auth-tab.is-active { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(20,20,20,.14); }

/* Inline forms: filled inputs, one black submit */
.auth-inline-form { display: flex; flex-direction: column; gap: 10px; }
.auth-inline-form label { margin-bottom: 0; }
.auth-inline-form .form-row { gap: 10px; }
.auth-inline-label { display: block; font-size: 12.5px; color: var(--muted); }
.auth-inline-label input {
  width: 100%; margin-top: 3px; padding: 8px 11px;
  background: var(--cream); border: 1px solid var(--line); border-radius: 9px;
  /* Below 16px, iOS Safari zooms the whole page in on focus — keep every
     field in this popup (email/password/phone/OTP) at 16px to avoid that. */
  font-size: 16px;
}
.auth-inline-label input:focus {
  outline: none; border-color: var(--ink); background: var(--card);
  box-shadow: 0 0 0 3px rgba(20,20,20,.08);
}
.auth-overlay-submit {
  width: 100%; margin-top: 2px; font-size: 15px; padding: 11px 18px;
  background: var(--ink); border-color: var(--ink); border-radius: 10px;
}
.auth-overlay-submit:hover { background: #000; border-color: #000; }
.auth-overlay-submit .tz-cta-main { color: #fff; }
.auth-forgot { margin: 2px 0 0; text-align: center; font-size: 12.5px; }
.auth-forgot a { color: var(--muted); text-decoration: underline; }
.auth-forgot a:hover { color: var(--ink); }
.auth-signup-hint { margin: 2px 0 0; text-align: center; font-size: 11.5px; color: var(--muted); }
.auth-inline-form .form-row label { margin-bottom: 0; }
.auth-otp-lead { margin: 0 0 4px; text-align: center; }
.auth-otp-resend { margin-top: 2px; align-self: center; font-size: 13px; }
.auth-otp-resend:disabled { color: var(--muted); opacity: .6; cursor: default; }
.co-qty-stepper { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stepper {
  display: inline-flex; align-items: center;
  background: #f6f4ef;
  border: 1px solid #e5e1d8;
  border-radius: 999px;
  padding: 3px;
}
.stepper button {
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: transparent;
  color: #3d3a33; font-size: 18px; font-weight: 600; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.stepper button:hover:not(:disabled) { background: #e9e5dc; color: #111; }
.stepper button:active:not(:disabled) { background: #ddd8cc; }
.stepper button:disabled { opacity: .3; cursor: default; }
.stepper b {
  min-width: 34px; text-align: center; font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The hidden attribute must beat any explicit display value (overlay, form…). */
[hidden] { display: none !important; }

/* ── Cart stage: the summary is the only visible column — center it instead
      of leaving a hole where the (still hidden) payment form will be. ── */
.co-grid.co-cart-only { grid-template-columns: 1fr; justify-items: center; }
.co-grid.co-cart-only .co-summary {
  position: static;
  width: 100%;
  max-width: 460px;
}

/* ── Tier picker rows in the summary ── */
.co-tier-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; padding: 6px 8px; margin-inline: -8px; border-radius: 8px; }
.co-tier-pick input { accent-color: var(--blue, #2563eb); margin: 0; }
.co-tier-pick.is-selected { background: rgba(37, 99, 235, 0.08); }
.co-tier-pick .co-tier-price { font-weight: 600; }

/* Cart stage: center the page heading over the centered summary card. */
.co-wrap:has(.co-cart-only) .pub-title,
.co-wrap:has(.co-cart-only) .pub-subtitle { text-align: center; }

/* Cart stage: center the pay CTA and the note under it inside the summary. */
.co-wrap:has(.co-cart-only) .co-pay { width: fit-content; margin-inline: auto; }
.co-wrap:has(.co-cart-only) .co-summary .pub-note { text-align: center; }

/* ── Tier block: simple ticket hint — dashed separator only. ── */
.co-total { border-top: 1px dashed var(--line); }

/* Phones zoom in on any field under 16px when it's tapped; keep them at 16px. */
@media (max-width: 900px) {
  input:not(.code-input):not(.otp-input), select, textarea { font-size: 16px !important; }
}


/* ── Phone header ──────────────────────────────────────────────────────
   The account links collapse into a burger, so the row is always: name ·
   language · burger. The tagline goes below 460px; the name always stays. */
.burger-wrap { position: relative; display: none; }
.head-burger {
  display: grid; align-content: center; gap: 4px;
  width: 38px; height: 38px; padding: 0 9px; cursor: pointer;
  background: transparent; border: 1.5px solid var(--ink); border-radius: 999px;
}
.head-burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .18s, opacity .18s; }
.head-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.head-burger.is-open span:nth-child(2) { opacity: 0; }
.head-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.burger-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 30px rgba(20,20,20,.15); padding: 6px; min-width: 190px; display: grid;
}
.burger-menu[hidden] { display: none !important; }
.burger-menu a, .burger-menu button {
  display: block; width: 100%; text-align: start; font: inherit; font-size: .95rem; font-weight: 600;
  color: var(--ink); text-decoration: none; background: transparent; border: 0;
  padding: 11px 14px; border-radius: 10px; cursor: pointer;
}
.burger-menu a:hover, .burger-menu button:hover { background: var(--cream-2, rgba(0,0,0,.05)); }
.burger-menu form { margin: 0; }

@media (max-width: 640px) {
  .burger-wrap { display: block; }
  .site-head .head-account, .site-head .logout-form, .site-head .head-actions > .pill-btn { display: none; }
}
@media (max-width: 460px) {
  .site-head .brand small { display: none; }
}

/* ── A brand with a drawn mark (tazkara now) ───────────────────────────────
   Its own ticket-stub tile and a two-tone lockup, so nothing is borrowed
   from another brand's artwork and the mark stays crisp at any size. */
.brand--drawn { gap: 11px; }
.brand-tile {
  flex: none; width: 40px; height: 40px; border-radius: 13px;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--brand-accent, #E4572E), color-mix(in srgb, var(--brand-accent, #E4572E) 62%, #111 38%));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-accent, #E4572E) 35%, transparent);
}
.brand-tile svg { width: 25px; height: 25px; }
.brand-word {
  display: block; font-weight: 800; letter-spacing: -.02em; line-height: 1.05;
  font-size: 1.28rem;
}
.brand-word b {
  font-weight: 800; color: var(--brand-word-accent, var(--brand-accent, #E4572E));
  letter-spacing: .01em;
}
/* Latin parts read as one word (TazkaraNow); Arabic keeps a thin gap so the
   script does not collide with the Latin tail. */
.brand-word:not([lang="ar"]) b { margin-inline-start: 0; }
[dir="rtl"] .brand-word b { margin-inline-start: .12em; }
.brand--drawn small { letter-spacing: .04em; }
@media (max-width: 640px) {
  .brand-tile { width: 32px; height: 32px; border-radius: 10px; }
  .brand-tile svg { width: 20px; height: 20px; }
  .brand-word { font-size: 1.02rem; }
}

/* The support address, written out rather than hidden behind an icon. */
.foot-support { color: var(--muted); text-decoration: none; font-size: .86rem; }
.foot-support:hover { color: var(--ink); text-decoration: underline; }

/* Street address and navigation links under the venue (from the map pin). */
.tz-address { margin-top: 6px; color: var(--muted); font-size: 14px; }
.tz-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 14px; }
.tz-nav a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Listing pass — the same language as the landing page.
   Hard 4px corners, rules instead of cards and shadows, Rubik
   for anything set big, the logo blue only where you act.
   ============================================================ */

/* Header and footer match the landing exactly. */
.site-head { position: sticky; top: 0; z-index: 80; background: #fff; border-bottom: 1px solid var(--line); }
.brand { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
.brand img { border-radius: 8px; box-shadow: none; }
.head-nav a { font-weight: 600; }
.head-nav a:hover, .head-account:hover { color: var(--accent); }
.pill-btn, .head-lang, .search-round, .head-burger { border-radius: 4px; border: 1.5px solid var(--ink); }
.pill-btn:hover, .head-lang:hover, .search-round:hover { background: var(--ink); color: #fff; }
.lang-menu, .burger-menu { border-radius: 6px; box-shadow: 0 10px 24px rgba(13,13,15,.12); }
.lang-menu a, .burger-menu a, .burger-menu button { border-radius: 4px; }
.site-foot { background: #fff; border-top: 2px solid var(--ink); }
.foot-col h4 { font-family: var(--display); font-weight: 700; }
.soc { border-radius: 4px; background: transparent; border: 1.5px solid var(--ink); color: var(--ink); }
.soc:hover { background: var(--ink); color: #fff; transform: none; }

/* ── The event page ── */
.tz-event { padding-top: clamp(4px, 2vh, 20px); }
@media (min-width: 960px) {
  .tz-grid { gap: clamp(40px, 5vw, 72px); }
  .tz-col-side { width: 340px; top: 92px; gap: 0; }
  .tz-col-body { max-width: 820px; }
}
@media (max-width: 959px) {
  .tz-col-side { width: 100%; max-width: 520px; }
  .tz-col-body { width: 100%; }
}
.tz-hero { display: block; margin: 0 0 22px; }
.tz-hero-link { max-width: none; }
.tz-hero-img { max-width: 100%; border-radius: 4px; background: var(--cream-2); }
@media (max-width: 959px) { .tz-hero-link, .tz-hero-img { max-width: 420px; } }

/* Date: the day big, the month in blue, the weekday beside it. */
.tz-when {
  display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;
  margin: 0; padding: 0 0 16px; border-bottom: 2px solid var(--ink);
}
.tz-date { flex: none; min-width: 58px; padding-inline-end: 16px; border-inline-end: 1px solid var(--line); text-align: center; line-height: 1; }
.tz-date b { display: block; font-family: var(--display); font-size: 3rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tz-date span { display: block; margin-top: 6px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.tz-date-meta { display: grid; gap: 2px; min-width: 0; }
.tz-date-meta strong { font-family: var(--display); font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.tz-date-meta span { color: var(--muted); font-size: .9rem; }

/* The facts as a ruled table: label on one side, value on the other. */
.tz-facts { margin: 0 0 20px; padding: 0; }
.tz-fact {
  display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.tz-fact dt { color: var(--muted); font-size: .82rem; font-weight: 600; }
.tz-fact dd { margin: 0; min-width: 0; display: grid; gap: 3px; justify-items: start; }
.tz-fact dd strong { font-weight: 700; }
.tz-num { font-family: var(--display); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.tz-address { margin: 0; color: var(--muted); font-size: .88rem; }
.tz-nav { margin: 4px 0 0; gap: 4px 14px; font-size: .88rem; }
.tz-nav a { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.tz-nav a:hover { color: var(--ink); }

/* The one button: square, solid blue, black on hover. */
.tz-cta {
  justify-content: space-between; align-items: center;
  border-radius: 4px; padding: 17px 22px; margin-top: 0;
  font-size: 1.05rem; background: var(--accent); border-color: var(--accent);
  transition: background .15s, border-color .15s;
}
.tz-cta:hover { background: var(--ink); border-color: var(--ink); }
.tz-cta-main { font-family: var(--display); font-weight: 700; }
.tz-cta-from { font-size: .92rem; opacity: .9; font-variant-numeric: tabular-nums; }
.tz-cta--inline, .tz-cta--submit, .pub-done .tz-cta, .gate-box .tz-cta { justify-content: center; }
.tz-status { margin: 0; display: grid; gap: 12px; justify-items: start; }
.tz-tag { border-radius: 3px; background: var(--cream-2); border-color: transparent; color: var(--ink-soft); font-weight: 600; padding: 7px 12px; }

/* Main column. */
.tz-kicker {
  margin: 0 0 10px; font-size: .8rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
}
.tz-title {
  font-family: var(--display); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: 1.04; margin: 0 0 18px;
  overflow-wrap: anywhere;
}
html[lang=ar] .tz-title { line-height: 1.25; }
/* Organiser copy mixes scripts ("HALLOWEEN: هالو وين؟"): each line takes
   its direction from its own first letter rather than the page's. */
.tz-title, .tz-desc { unicode-bidi: plaintext; }
.tz-organizers { gap: 12px; padding: 0 0 22px; border-bottom: 2px solid var(--ink); flex-wrap: wrap; }
.tz-organizers-label { font-size: .72rem; letter-spacing: .08em; color: var(--muted); }
.tz-organizers-link { font-weight: 700; }
.tz-organizers-link:hover { color: var(--accent); text-decoration: none; }
.tz-org-avatar { border-radius: 4px; }
.tz-sec-title {
  font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -.01em;
  margin: 30px 0 14px;
}
.tz-desc { max-width: 66ch; margin: 0 0 8px; font-size: 1.02rem; line-height: 1.75; color: var(--ink-soft); }
.tz-video { margin: 30px 0 8px; }
.tz-video iframe { border-radius: 4px; }

/* Tickets: a ruled price list, not a stack of cards. */
.tz-tiers { gap: 0; border-top: 2px solid var(--ink); }
.tz-tier { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 16px 0; }
.tz-tier-info strong { font-weight: 700; }
.tz-tier-price, .tz-sim-price, .pub-price {
  font-family: var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.tz-tier-price { font-size: 1.25rem; }

/* Similar events: the landing's rail head and its card-less cards. */
.tz-similar { border-top: 0; margin-top: clamp(48px, 8vh, 88px); padding: 0; }
.tz-similar-head { align-items: flex-end; padding-bottom: 14px; margin-bottom: 24px; border-bottom: 2px solid var(--ink); }
.tz-similar-title { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1; }
.tz-sim-arrow { width: 40px; height: 40px; border-radius: 4px; }
.tz-sim-arrow:hover { background: var(--ink); color: #fff; }
.tz-similar-row { gap: 24px; }
.tz-similar-grid { gap: 28px 24px; }
.tz-sim-card { width: 250px; min-width: 0; background: none; border: 0; border-radius: 0; overflow: visible; }
.tz-sim-card:hover { transform: none; box-shadow: none; }
.tz-sim-imgwrap { border-radius: 4px; background: var(--cream-2); }
.tz-sim-img { aspect-ratio: 4 / 5; transition: transform .5s; }
.tz-sim-card:hover .tz-sim-img { transform: scale(1.035); }
.tz-sim-body { gap: 6px; padding: 14px 0 0; }
.tz-sim-tags { order: 3; justify-content: flex-start; gap: 8px; min-width: 0; }
.tz-sim-cat { background: none; color: var(--muted); padding: 0; border-radius: 0; font-size: .78rem; font-weight: 500; max-width: none; }
.tz-city-pill { background: none; padding: 0; border-radius: 0; color: var(--muted); font-size: .78rem; font-weight: 500; }
.tz-city-pill::before { content: "· "; }
.tz-sim-info { order: 1; }
.tz-sim-name { order: 2; font-size: 1rem; line-height: 1.3; unicode-bidi: plaintext; }
.tz-sim-card:hover .tz-sim-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.tz-sim-venue { order: 4; font-size: .78rem; }
.tz-sim-venue span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tz-sim-date { border: 0; background: none; padding: 0; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.tz-sim-date--overlay { background: #fff; color: var(--ink); padding: 5px 8px; border-radius: 3px; box-shadow: none; }
.tz-sim-past-tag { border-radius: 3px; }
.tz-sim-price { font-size: 1rem; }
@media (max-width: 640px) { .tz-sim-card { width: 220px; } }

/* ── Organizer profile ── */
.tz-org-cover { border-radius: 4px; box-shadow: none; }
.tz-org-cover::after { display: none; }
.tz-org-logo { border-radius: 6px; box-shadow: none; }
.tz-org-head--overlap .tz-org-logo { border-radius: 8px; border-color: #fff; box-shadow: none; }
.tz-org-name { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
.tz-org-social a { border-radius: 4px; border: 1.5px solid var(--ink); box-shadow: none; }
.tz-org-social a:hover { background: var(--ink); color: #fff; transform: none; }
.tz-org-count { border-radius: 3px; }
.tz-org-about-card { border-radius: 0; border: 0; border-top: 2px solid var(--ink); padding: 18px 0 0; }

/* ── Checkout, sign-in and the rest: same corners and rules ── */
.pub-title, .pub-done h1, .co-event-name, .auth-gate-title { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; }
.pub-title { font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1.1; }
.card { border-radius: 6px; border: 1px solid var(--line); }
.co-img { border-radius: 4px; }
.pub-form input, .pub-form select, .auth-inline-label input { border-radius: 4px; background: #fff; border: 1.5px solid var(--line); }
.pub-form input:focus, .pub-form select:focus, .co-form .pub-form input:focus, .co-form .pub-form select:focus, .auth-inline-label input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,120,212,.18); background: #fff;
}
fieldset, .person { border-radius: 6px; }
.person { background: var(--cream-2); border-color: transparent; }
.btn-person-add { border-radius: 4px; }
.stepper { background: #fff; border: 1.5px solid var(--ink); border-radius: 4px; }
.stepper button { border-radius: 2px; color: var(--ink); }
.stepper button:hover:not(:disabled) { background: var(--cream-2); }
.co-tier-pick { border-radius: 4px; }
.co-tier-pick.is-selected { background: rgba(0,120,212,.08); }
.wallet-btn, .auth-btn--google, .auth-guest-btn, .auth-overlay-submit { border-radius: 4px; }
.auth-overlay-card { border-radius: 8px; box-shadow: 0 24px 60px rgba(13,13,15,.22); }
.auth-tabs { border-radius: 4px; background: var(--cream-2); }
.auth-tab { border-radius: 3px; }
.auth-tab.is-active { box-shadow: none; }
.otp-dest, .otp-input { border-radius: 4px; background: var(--cream-2); }
.auth-swap a, .link-btn { color: var(--accent); }
.tz-sim-img--empty { font-size: 22px; }

/* The side column's children span its full width (the older rule shrank
   them to their content), and organiser copy keeps the page's edge: each
   line still runs in its own direction, but sits on the page's side. */
@media (min-width: 960px) { .tz-col-side { align-items: stretch; } }
.tz-title, .tz-desc, .tz-sim-name { text-align: left; }
[dir=rtl] .tz-title, [dir=rtl] .tz-desc, [dir=rtl] .tz-sim-name { text-align: right; }
.tz-desc { max-width: none; }
/* City after the organiser, separated by a dot that stays put in RTL. */
.tz-city-pill { display: inline-flex; gap: 6px; }
.tz-city-pill::before { content: "·"; }