/* ==========================================================================
   TIKI — PUBLIC WEBSITE
   Hero, category cards, event cards, listing, event detail.
   The public site is the emotional surface of the product: bigger type,
   more air, imagery doing the work. The dashboards are the opposite.
   ========================================================================== */

/* ==========================================================================
   HERO
   Editorial rather than decorative: one headline, one promise, one input.
   ========================================================================== */
.tiki-hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem);
  background: var(--tiki-white);
  overflow: hidden;
  isolation: isolate;
}

/* Two very soft brand-tinted washes. Kept at low opacity and blurred so
   they read as light in the room, not as a gradient background. */
.tiki-hero::before,
.tiki-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.tiki-hero::before {
  width: 38rem; height: 38rem;
  top: -16rem; inset-inline-end: -10rem;
  background: radial-gradient(circle, rgba(255,90,95,.16), transparent 68%);
}
.tiki-hero::after {
  width: 30rem; height: 30rem;
  bottom: -14rem; inset-inline-start: -8rem;
  background: radial-gradient(circle, rgba(124,92,255,.14), transparent 68%);
}

.tiki-hero__inner { max-width: 46rem; }

/* ==========================================================================
   HERO SHOWCASE
   --------------------------------------------------------------------------
   A ticketing homepage that opens on a headline and a search box asks the
   visitor to imagine what is on sale. Three real covers answer it.

   The layout is asymmetric on purpose — one lead image and two supporting
   ones, rather than a row of equals. A grid of three identical tiles reads
   as a catalogue; this reads as a front page.
   ========================================================================== */
.tiki-hero__grid { display: block; }

@media (min-width: 992px) {
  .tiki-hero--split .tiki-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
  }
  /* The copy no longer needs its own max-width once a column constrains it. */
  .tiki-hero--split .tiki-hero__inner { max-width: none; }
}

.tiki-hero__showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  gap: var(--tiki-space-3);
  /* Tall enough for the lead image to read as an image rather than a strip. */
  height: 26rem;
}

/* Below the large breakpoint the search field is the page's one primary
   action, and three covers above it would push it under the fold on the
   device most people arrive on. */
@media (max-width: 991.98px) { .tiki-hero__showcase { display: none; } }

.tiki-showcase {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--tiki-radius-lg);
  background: var(--tiki-bg-sunken);
  text-decoration: none;
  box-shadow: var(--tiki-shadow-md);
  transition: transform var(--tiki-duration-base) var(--tiki-ease-out),
              box-shadow var(--tiki-duration-base) var(--tiki-ease-out);
}
.tiki-showcase--lead { grid-row: span 2; }

.tiki-showcase:hover {
  transform: translateY(-3px);
  box-shadow: var(--tiki-shadow-lg);
}

.tiki-showcase__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--tiki-duration-slow) var(--tiki-ease-out);
}
.tiki-showcase:hover .tiki-showcase__img { transform: scale(1.04); }

/* A scrim rather than a flat overlay: the text sits at the bottom, so only
   the bottom needs darkening and the image keeps its colour up top. */
.tiki-showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(7, 13, 24, 0.82) 0%,
              rgba(7, 13, 24, 0.34) 38%,
              rgba(7, 13, 24, 0) 68%);
  pointer-events: none;
}

/* Placement only; the block itself is .tiki-datechip in the component layer,
   so the showcase and the cards below it show the same object. */
.tiki-showcase__date {
  position: absolute;
  top: var(--tiki-space-3);
  inset-inline-start: var(--tiki-space-3);
  z-index: 1;
}

.tiki-showcase__body {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--tiki-space-4);
  color: var(--tiki-white);
}
.tiki-showcase__category {
  font-size: 10px;
  font-weight: var(--tiki-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tiki-tracking-caps);
  opacity: 0.82;
}
.tiki-showcase__title {
  font-weight: var(--tiki-weight-bold);
  letter-spacing: var(--tiki-tracking-tight);
  line-height: 1.25;
  /* Two lines, then ellipsis — a long title must not grow the tile and
     break the grid's proportions. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tiki-showcase--lead .tiki-showcase__title { font-size: var(--tiki-text-xl); }
.tiki-showcase--side .tiki-showcase__title { font-size: var(--tiki-text-sm); }

.tiki-hero__title {
  font-size: var(--tiki-display-lg);
  font-weight: var(--tiki-weight-extra);
  line-height: 0.98;
  letter-spacing: var(--tiki-tracking-display);
  color: var(--tiki-navy-900);
  margin: 0 0 var(--tiki-space-5);
  text-wrap: balance;
}
/* Arabic is written with a script whose letterforms already carry the
   weight tight tracking is meant to supply in Latin; pulling them together
   collides the joins. Line height has to open up for the same reason. */
[lang="ar"] .tiki-hero__title { letter-spacing: 0; line-height: 1.22; }
.tiki-hero__title em {
  font-style: normal;
  color: var(--tiki-accent);
}

.tiki-hero__sub {
  font-size: clamp(var(--tiki-text-md), 1.6vw, var(--tiki-text-lg));
  line-height: var(--tiki-leading-relaxed);
  color: var(--tiki-text-muted);
  max-width: 48ch;
  margin: 0 0 var(--tiki-space-8);
}

/* Search — the single primary action of the homepage --------------------- */
.tiki-hero__search {
  display: flex;
  align-items: center;
  gap: var(--tiki-space-2);
  padding: var(--tiki-space-2);
  background: var(--tiki-surface);
  border: 1px solid var(--tiki-border);
  border-radius: var(--tiki-radius-pill);
  box-shadow: var(--tiki-shadow-lg);
  transition: box-shadow var(--tiki-duration-base) var(--tiki-ease),
              border-color var(--tiki-duration-base) var(--tiki-ease);
}
.tiki-hero__search:focus-within {
  border-color: var(--tiki-coral-300);
  box-shadow: var(--tiki-shadow-xl), 0 0 0 4px var(--tiki-focus-ring);
}
.tiki-hero__search .tiki-icon { color: var(--tiki-text-subtle); margin-inline-start: var(--tiki-space-4); }
.tiki-hero__search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  padding: var(--tiki-space-3) var(--tiki-space-2);
  font-family: inherit;
  font-size: var(--tiki-text-md);
  color: var(--tiki-text);
}
.tiki-hero__search input:focus { outline: none; }
.tiki-hero__search input::placeholder { color: var(--tiki-text-subtle); }
.tiki-hero__search .tiki-btn { flex: none; }

@media (max-width: 575.98px) {
  .tiki-hero__search { border-radius: var(--tiki-radius-lg); flex-wrap: wrap; }
  .tiki-hero__search input { font-size: 16px; }
  .tiki-hero__search .tiki-btn { width: 100%; }
}

/* ==========================================================================
   HERO SEARCH BAR — what / where / when
   --------------------------------------------------------------------------
   One object, three fields, one action. The fields are divided by hairlines
   rather than by gaps, so the bar reads as a single control rather than as
   three inputs that happen to be adjacent — which is what tells a visitor
   they will be used together.

   It stacks on phones. A three-up row squeezed into 360px gives every field
   a width where neither its label nor its value fits.
   ========================================================================== */
.tiki-searchbar {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: var(--tiki-space-6);
  padding: var(--tiki-space-2);
  background: var(--tiki-surface);
  border-radius: var(--tiki-radius-xl);
  box-shadow: var(--tiki-ring), var(--tiki-shadow-lg);
  transition: box-shadow var(--tiki-duration-base) var(--tiki-ease);
}
.tiki-searchbar:focus-within {
  box-shadow: var(--tiki-ring-accent), var(--tiki-shadow-xl),
              0 0 0 4px var(--tiki-focus-ring);
}

.tiki-searchbar__field {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: var(--tiki-space-2) var(--tiki-space-4);
}
/* The query deserves more room than the city or the date: it is the field
   that carries a title, and titles are long. */
.tiki-searchbar__field--grow { flex: 2 1 0; }

/* Hairline between fields, drawn on the inline-start edge of every field but
   the first. `inset-inline-start` rather than `left`, so RTL puts the rules
   between the same pairs of fields. */
.tiki-searchbar__field + .tiki-searchbar__field::before {
  content: "";
  position: absolute;
  inset-block: var(--tiki-space-2);
  inset-inline-start: 0;
  width: 1px;
  background: var(--tiki-border);
}

.tiki-searchbar__label {
  display: block;
  margin-bottom: 2px;
  font-size: var(--tiki-text-2xs);
  font-weight: var(--tiki-weight-bold);
  letter-spacing: var(--tiki-tracking-caps);
  text-transform: uppercase;
  color: var(--tiki-text-subtle);
  cursor: pointer;
}
[lang="ar"] .tiki-searchbar__label { text-transform: none; letter-spacing: 0; }

.tiki-searchbar__control {
  display: flex;
  align-items: center;
  gap: var(--tiki-space-2);
}
.tiki-searchbar__control .tiki-icon { flex: none; color: var(--tiki-text-subtle); }

.tiki-searchbar__control input,
.tiki-searchbar__control select {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0;
  background: none;
  font-family: inherit;
  font-size: var(--tiki-text-md);
  font-weight: var(--tiki-weight-medium);
  color: var(--tiki-text-strong);
  appearance: none;
}
.tiki-searchbar__control input:focus,
.tiki-searchbar__control select:focus { outline: none; }
.tiki-searchbar__control input::placeholder { color: var(--tiki-text-subtle); font-weight: var(--tiki-weight-regular); }

/* An empty date input renders as the locale's own placeholder (jj/mm/aaaa),
   which is louder than the fields beside it. Mute it until it holds a value. */
.tiki-searchbar__control input[type="date"]:not(:focus):invalid,
.tiki-searchbar__control input[type="date"]:placeholder-shown { color: var(--tiki-text-subtle); }

.tiki-searchbar__submit { flex: none; align-self: center; margin-inline-start: var(--tiki-space-2); }

.tiki-searchbar__suggestions {
  position: absolute;
  inset-inline-start: var(--tiki-space-2);
  top: calc(100% + var(--tiki-space-2));
  min-width: 22rem;
  max-width: min(28rem, 90vw);
}

@media (max-width: 767.98px) {
  .tiki-searchbar {
    flex-direction: column;
    border-radius: var(--tiki-radius-lg);
    padding: var(--tiki-space-2) var(--tiki-space-2) var(--tiki-space-3);
  }
  /* Stacked, the divider belongs above each field, not beside it. */
  .tiki-searchbar__field + .tiki-searchbar__field::before {
    inset-block: auto;
    inset-inline: var(--tiki-space-2);
    top: 0;
    width: auto;
    height: 1px;
  }
  /* 16px keeps iOS from zooming the viewport when the field takes focus. */
  .tiki-searchbar__control input,
  .tiki-searchbar__control select { font-size: 16px; }

  .tiki-searchbar__submit {
    width: 100%;
    margin: var(--tiki-space-2) 0 0;
  }
  .tiki-searchbar__suggestions { min-width: 0; inset-inline: var(--tiki-space-2); }
}

/* Quick category chips under the search */
.tiki-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tiki-space-2);
  margin-top: var(--tiki-space-5);
}
.tiki-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--tiki-space-2);
  padding: 0.4375rem var(--tiki-space-4);
  border: 1px solid var(--tiki-border);
  border-radius: var(--tiki-radius-pill);
  background: var(--tiki-surface);
  color: var(--tiki-text-muted);
  font-size: var(--tiki-text-sm);
  font-weight: var(--tiki-weight-semibold);
  transition: var(--tiki-transition);
}
.tiki-chip:hover {
  border-color: var(--tiki-navy-300);
  color: var(--tiki-text-strong);
  transform: translateY(-1px);
}
.tiki-chip.is-active {
  background: var(--tiki-navy-700);
  border-color: var(--tiki-navy-700);
  color: var(--tiki-white);
}

/* Trust line under the hero */
.tiki-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tiki-space-6);
  margin-top: var(--tiki-space-10);
  font-size: var(--tiki-text-sm);
  color: var(--tiki-text-muted);
}
.tiki-hero__trust-item { display: inline-flex; align-items: center; gap: var(--tiki-space-2); }
.tiki-hero__trust-item .tiki-icon { color: var(--tiki-success); }

/* ==========================================================================
   CATEGORY CARD
   A real card with its own colour identity — not a Bootstrap button.
   ========================================================================== */
.tiki-category {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 8.5rem;
  padding: var(--tiki-space-5);
  border-radius: var(--tiki-radius-lg);
  background: var(--tiki-bg-subtle);
  border: 1px solid var(--tiki-border);
  color: var(--tiki-text-strong);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--tiki-duration-base) var(--tiki-ease),
              box-shadow var(--tiki-duration-base) var(--tiki-ease);
}
.tiki-category:hover {
  transform: translateY(-3px);
  box-shadow: var(--tiki-shadow-lg);
  color: var(--tiki-text-strong);
}

/* Category hue is injected per-card as --cat-color from the database. */
.tiki-category::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(150deg,
              color-mix(in srgb, var(--cat-color, var(--tiki-navy-700)) 14%, transparent),
              transparent 62%);
  transition: opacity var(--tiki-duration-base) var(--tiki-ease);
}
.tiki-category:hover::before { opacity: .7; }

.tiki-category__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  margin-bottom: auto;
  border-radius: var(--tiki-radius-md);
  background: var(--tiki-surface);
  color: var(--cat-color, var(--tiki-navy-700));
  box-shadow: var(--tiki-shadow-xs);
}
.tiki-category__name {
  font-size: var(--tiki-text-md);
  font-weight: var(--tiki-weight-bold);
  margin-top: var(--tiki-space-4);
}
.tiki-category__count { font-size: var(--tiki-text-xs); color: var(--tiki-text-muted); }

/* ==========================================================================
   EVENT CARD
   The most reused component on the site. Variants share this base.
   ========================================================================== */
.tiki-event {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--tiki-surface);
  border-radius: var(--tiki-radius-lg);
  overflow: hidden;
  /* Ring instead of border: a 1px border participates in layout and makes a
     row of cards drift by a pixel wherever one is missing. A ring is drawn
     inside the box, so geometry never depends on whether it is there. */
  box-shadow: var(--tiki-ring);
  transition: transform var(--tiki-duration-base) var(--tiki-ease),
              box-shadow var(--tiki-duration-base) var(--tiki-ease);
}
.tiki-event:hover {
  transform: translateY(-4px);
  box-shadow: var(--tiki-ring-strong), var(--tiki-shadow-lg);
}
.tiki-event:focus-within {
  box-shadow: var(--tiki-ring-accent), var(--tiki-shadow-lg);
}

/* Media ----------------------------------------------------------------- */
.tiki-event__media {
  position: relative;
  aspect-ratio: var(--tiki-cover-ratio);
  background: var(--tiki-slate-100);
  overflow: hidden;
}
.tiki-event__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--tiki-duration-slow) var(--tiki-ease-out);
}
/* Restrained zoom — 1.04, not 1.2. Enough to feel alive, not enough to
   turn the image into motion. */
.tiki-event:hover .tiki-event__img { transform: scale(1.04); }

.tiki-event__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  background: linear-gradient(140deg, var(--tiki-navy-100), var(--tiki-slate-100));
  color: var(--tiki-navy-300);
}

/* Date block, top-start. The look comes from .tiki-datechip in the component
   layer; this rule only places it. The old badge was translucent with a blur
   behind it — a cover with a bright patch under the chip made the day
   unreadable exactly on the most attractive images. It is opaque now. */
.tiki-event__date {
  position: absolute;
  top: var(--tiki-space-3);
  inset-inline-start: var(--tiki-space-3);
}

/* Favourite toggle, top-end */
.tiki-event__fav {
  position: absolute;
  top: var(--tiki-space-3);
  inset-inline-end: var(--tiki-space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: var(--tiki-white);
  color: var(--tiki-navy-600);
  box-shadow: var(--tiki-shadow-md);
  cursor: pointer;
  transition: var(--tiki-transition);
}
.tiki-event__fav:hover { color: var(--tiki-accent); transform: scale(1.08); }
.tiki-event__fav.is-active { color: var(--tiki-accent); }
.tiki-event__fav.is-active .tiki-icon { fill: currentColor; stroke: currentColor; }

/* Availability flag, bottom of the image */
.tiki-event__flag {
  position: absolute;
  bottom: var(--tiki-space-3);
  inset-inline-start: var(--tiki-space-3);
}

/* Body ------------------------------------------------------------------ */
.tiki-event__body {
  display: flex;
  flex-direction: column;
  gap: var(--tiki-space-2);
  padding: var(--tiki-space-4) var(--tiki-space-5) var(--tiki-space-5);
  flex: 1 1 auto;
}

.tiki-event__category {
  font-size: var(--tiki-text-2xs);
  font-weight: var(--tiki-weight-bold);
  letter-spacing: var(--tiki-tracking-caps);
  text-transform: uppercase;
  color: var(--cat-color, var(--tiki-text-subtle));
}

.tiki-event__title {
  margin: 0;
  font-size: var(--tiki-text-lg);
  font-weight: var(--tiki-weight-bold);
  line-height: var(--tiki-leading-snug);
  letter-spacing: var(--tiki-tracking-tight);
  color: var(--tiki-text-strong);
  /* Two-line clamp keeps every card in a row the same height. */
  min-height: 2.6em;
}
.tiki-event:hover .tiki-event__title { color: var(--tiki-accent-hover); }

.tiki-event__meta {
  display: flex;
  align-items: center;
  gap: var(--tiki-space-2);
  font-size: var(--tiki-text-xs);
  color: var(--tiki-text-muted);
  min-width: 0;
}
.tiki-event__meta .tiki-icon { color: var(--tiki-text-subtle); }

.tiki-event__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tiki-space-3);
  margin-top: auto;
  padding-top: var(--tiki-space-3);
  border-top: 1px solid var(--tiki-border);
}
.tiki-event__pricing { display: flex; align-items: baseline; gap: var(--tiki-space-2); }
.tiki-event__price-label {
  font-size: var(--tiki-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tiki-tracking-caps);
  color: var(--tiki-text-subtle);
  font-weight: var(--tiki-weight-semibold);
}
/* "À partir de" is three words in French and one in English. Side by side
   with the figure rather than stacked above it, the label can wrap without
   changing the card's height — stacked, it could not. */
.tiki-event__price {
  font-size: var(--tiki-text-xl);
  font-weight: var(--tiki-weight-extra);
  letter-spacing: var(--tiki-tracking-tight);
  color: var(--tiki-text-strong);
}
.tiki-event__price--free { color: var(--tiki-success); }

/* Whole-card link: a stretched pseudo-element makes the card clickable
   while keeping a real <a> for the title, so screen readers and
   middle-click both behave. The favourite button re-raises itself above it. */
.tiki-event__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.tiki-event__fav { z-index: 2; }

/* --- Variant: horizontal (search results, related) --------------------- */
.tiki-event--horizontal { flex-direction: row; }
.tiki-event--horizontal .tiki-event__media {
  flex: 0 0 11rem;
  aspect-ratio: auto;
}
.tiki-event--horizontal .tiki-event__title { min-height: 0; }
@media (max-width: 575.98px) {
  .tiki-event--horizontal .tiki-event__media { flex-basis: 7.5rem; }
  .tiki-event--horizontal .tiki-event__body  { padding: var(--tiki-space-3) var(--tiki-space-4); }
  .tiki-event--horizontal .tiki-event__date  { display: none; }
}

/* --- Variant: large (featured) ---------------------------------------- */
.tiki-event--large .tiki-event__media { aspect-ratio: 16 / 10; }
.tiki-event--large .tiki-event__title { font-size: var(--tiki-text-xl); min-height: 0; }
.tiki-event--large .tiki-event__body  { padding: var(--tiki-space-5) var(--tiki-space-6) var(--tiki-space-6); }

/* --- Variant: compact ------------------------------------------------- */
.tiki-event--compact .tiki-event__media { aspect-ratio: 4 / 3; }
.tiki-event--compact .tiki-event__body  { padding: var(--tiki-space-3) var(--tiki-space-4); }
.tiki-event--compact .tiki-event__title { font-size: var(--tiki-text-sm); }

/* Sold-out cards are desaturated so the eye skips them in a grid. */
.tiki-event.is-sold-out .tiki-event__media { filter: grayscale(.55); opacity: .82; }

/* ==========================================================================
   LISTING PAGE — filters + results
   ========================================================================== */
.tiki-listing {
  display: grid;
  grid-template-columns: 17rem 1fr;
  gap: var(--tiki-space-10);
  align-items: start;
}
@media (max-width: 991.98px) {
  .tiki-listing { grid-template-columns: 1fr; gap: var(--tiki-space-5); }
  .tiki-listing__filters { display: none; }  /* moves into a drawer */
}

.tiki-filters { position: sticky; top: calc(var(--tiki-header-height) + var(--tiki-space-5)); }
.tiki-filters__group { padding-block: var(--tiki-space-5); border-bottom: 1px solid var(--tiki-border); }
.tiki-filters__group:last-child { border-bottom: 0; }
.tiki-filters__title {
  margin: 0 0 var(--tiki-space-3);
  font-size: var(--tiki-text-xs);
  font-weight: var(--tiki-weight-bold);
  letter-spacing: var(--tiki-tracking-caps);
  text-transform: uppercase;
  color: var(--tiki-text-subtle);
}
.tiki-filters__list { display: flex; flex-direction: column; gap: var(--tiki-space-3); }

.tiki-results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tiki-space-4);
  margin-bottom: var(--tiki-space-6);
  flex-wrap: wrap;
}
.tiki-results-bar__count { font-size: var(--tiki-text-sm); color: var(--tiki-text-muted); }
.tiki-results-bar__count strong { color: var(--tiki-text-strong); font-weight: var(--tiki-weight-bold); }

/* Applied filter tokens */
.tiki-token {
  display: inline-flex;
  align-items: center;
  gap: var(--tiki-space-2);
  padding: 0.25rem var(--tiki-space-2) 0.25rem var(--tiki-space-3);
  border-radius: var(--tiki-radius-pill);
  background: var(--tiki-navy-100);
  color: var(--tiki-navy-700);
  font-size: var(--tiki-text-xs);
  font-weight: var(--tiki-weight-semibold);
}
.tiki-token button {
  display: inline-flex;
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  opacity: .6;
  cursor: pointer;
}
.tiki-token button:hover { opacity: 1; }

/* ==========================================================================
   EVENT DETAIL
   ========================================================================== */
.tiki-event-hero {
  position: relative;
  aspect-ratio: 21 / 9;
  max-height: 30rem;
  background: var(--tiki-navy-800);
  overflow: hidden;
}
.tiki-event-hero__img { width: 100%; height: 100%; object-fit: cover; }

/*
 | There was a scrim here, darkening the cover to 86% at its foot "so
 | overlaid text keeps contrast". Nothing is overlaid on this hero — the
 | title, the facts and the booking panel all live in the container below
 | it. So every poster on the site was being dimmed for text that does not
 | exist, on the one screen where the artwork is the product.
 |
 | The image is the premium asset. It is shown.
 */

@media (max-width: 767.98px) {
  .tiki-event-hero { aspect-ratio: 4 / 3; }
}

.tiki-event-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: var(--tiki-space-12);
  align-items: start;
  padding-block: var(--tiki-space-10);
}
@media (max-width: 991.98px) {
  .tiki-event-detail { grid-template-columns: 1fr; gap: var(--tiki-space-8); }
}

.tiki-event-detail__title {
  font-size: var(--tiki-display-md);
  font-weight: var(--tiki-weight-extra);
  letter-spacing: var(--tiki-tracking-display);
  line-height: 1.04;
  margin: 0 0 var(--tiki-space-3);
  text-wrap: balance;
}
[lang="ar"] .tiki-event-detail__title { letter-spacing: 0; line-height: 1.24; }

/* Key facts row: date, venue, organizer */
.tiki-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--tiki-space-5);
  padding: var(--tiki-space-5) 0;
  margin-block: var(--tiki-space-6);
  border-block: 1px solid var(--tiki-border);
}
.tiki-fact { display: flex; align-items: flex-start; gap: var(--tiki-space-3); }
.tiki-fact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  flex: none;
  border-radius: var(--tiki-radius-md);
  background: var(--tiki-slate-100);
  color: var(--tiki-navy-600);
}
.tiki-fact__label {
  display: block;
  font-size: var(--tiki-text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tiki-tracking-wide);
  font-weight: var(--tiki-weight-bold);
  color: var(--tiki-text-subtle);
}
.tiki-fact__value {
  display: block;
  font-size: var(--tiki-text-sm);
  font-weight: var(--tiki-weight-semibold);
  color: var(--tiki-text-strong);
  margin-top: 2px;
}

/* Long-form description */
.tiki-prose { font-size: var(--tiki-text-md); line-height: var(--tiki-leading-relaxed); color: var(--tiki-text); }
.tiki-prose h2, .tiki-prose h3 { margin-top: var(--tiki-space-8); }
.tiki-prose ul, .tiki-prose ol { padding-inline-start: var(--tiki-space-6); margin-bottom: var(--tiki-space-4); }
.tiki-prose li { margin-bottom: var(--tiki-space-2); }
.tiki-prose img { border-radius: var(--tiki-radius-md); margin-block: var(--tiki-space-5); }

/* Booking panel — sticky on desktop, replaced by the sticky bar on mobile */
.tiki-booking {
  position: sticky;
  top: calc(var(--tiki-header-height) + var(--tiki-space-5));
  border-radius: var(--tiki-radius-xl);
  background: var(--tiki-surface);
  box-shadow: var(--tiki-ring), var(--tiki-shadow-lg);
  overflow: hidden;
}
/* The price band. Given its own tone so the panel opens on the number the
   visitor came for, rather than on another white rectangle. */
.tiki-booking__head {
  padding: var(--tiki-space-5) var(--tiki-space-6);
  border-bottom: 1px solid var(--tiki-border);
  background: var(--tiki-bg-subtle);
}
.tiki-booking__from { font-size: var(--tiki-text-xs); color: var(--tiki-text-subtle); }
.tiki-booking__price {
  font-size: var(--tiki-text-3xl);
  font-weight: var(--tiki-weight-extra);
  letter-spacing: var(--tiki-tracking-tight);
  color: var(--tiki-text-strong);
  line-height: 1.1;
}
.tiki-booking__body { padding: var(--tiki-space-5) var(--tiki-space-6) var(--tiki-space-6); }

/* --------------------------------------------------------------------------
   Ticket type rows
   --------------------------------------------------------------------------
   Each tier is an object rather than a line in a list. They used to be rows
   divided by hairlines, which made three tiers read as one table the visitor
   had to parse; as separate objects they read as three things to choose
   between, which is the actual decision.

   The notch is the site's stub motif at its smallest. This is the moment the
   buyer is choosing a ticket, so it is the moment the shape earns its place.
   -------------------------------------------------------------------------- */
.tiki-ticket-row {
  --stub-notch: var(--tiki-notch-sm);
  --stub-y: 50%;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tiki-space-4);
  padding: var(--tiki-space-4);
  margin-bottom: var(--tiki-space-3);
  border-radius: var(--tiki-radius-md);
  background: var(--tiki-surface);
  box-shadow: var(--tiki-ring);
  transition: box-shadow var(--tiki-duration-base) var(--tiki-ease);
}
.tiki-ticket-row:last-of-type { margin-bottom: 0; }
.tiki-ticket-row:hover { box-shadow: var(--tiki-ring-strong); }
.tiki-ticket-row:focus-within { box-shadow: var(--tiki-ring-accent); }

@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in) {
  .tiki-ticket-row {
    -webkit-mask-image:
      radial-gradient(circle var(--stub-notch) at 0 var(--stub-y),    transparent 99%, #000 100%),
      radial-gradient(circle var(--stub-notch) at 100% var(--stub-y), transparent 99%, #000 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      radial-gradient(circle var(--stub-notch) at 0 var(--stub-y),    transparent 99%, #000 100%),
      radial-gradient(circle var(--stub-notch) at 100% var(--stub-y), transparent 99%, #000 100%);
    mask-composite: intersect;
  }
}

.tiki-ticket-row__name { font-size: var(--tiki-text-md); font-weight: var(--tiki-weight-bold); color: var(--tiki-text-strong); }
.tiki-ticket-row__desc { font-size: var(--tiki-text-xs); color: var(--tiki-text-muted); margin-top: 2px; }
.tiki-ticket-row__price {
  font-size: var(--tiki-text-xl);
  font-weight: var(--tiki-weight-extra);
  letter-spacing: var(--tiki-tracking-tight);
  white-space: nowrap;
}

/* Sold out keeps its shape and loses its colour. Hiding it would leave the
   visitor wondering whether the tier ever existed; greying it answers the
   question they are actually asking. */
.tiki-ticket-row.is-unavailable { opacity: .55; }
.tiki-ticket-row.is-unavailable .tiki-ticket-row__price { color: var(--tiki-text-subtle); }

/* Share row */
.tiki-share { display: flex; align-items: center; gap: var(--tiki-space-2); flex-wrap: wrap; }
.tiki-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tiki-space-2);
  height: 2.5rem;
  padding-inline: var(--tiki-space-4);
  border: 1px solid var(--tiki-border);
  border-radius: var(--tiki-radius-md);
  background: var(--tiki-surface);
  color: var(--tiki-text-muted);
  font-size: var(--tiki-text-sm);
  font-weight: var(--tiki-weight-semibold);
  cursor: pointer;
  transition: var(--tiki-transition);
}
.tiki-share__btn:hover { border-color: var(--tiki-navy-300); color: var(--tiki-text-strong); }
/* WhatsApp is the dominant sharing channel in Tunisia, so it is given its
   own affordance rather than being hidden in a generic share menu. */
.tiki-share__btn--whatsapp { color: #128C7E; border-color: #CDE9E3; background: #F2FBF9; }
.tiki-share__btn--whatsapp:hover { background: #E4F6F2; border-color: #A9D9CF; color: #0E7268; }

/* Organizer strip */
.tiki-organizer-strip {
  display: flex;
  align-items: center;
  gap: var(--tiki-space-4);
  padding: var(--tiki-space-5);
  border: 1px solid var(--tiki-border);
  border-radius: var(--tiki-radius-lg);
  background: var(--tiki-bg-subtle);
}
.tiki-organizer-strip__name { font-weight: var(--tiki-weight-bold); color: var(--tiki-text-strong); }
.tiki-organizer-strip__meta { font-size: var(--tiki-text-xs); color: var(--tiki-text-muted); }

/* Packs on the event page — an offer, not a picker. Quantities are chosen
   at checkout and nowhere else, so these rows carry no controls. */
.tiki-pack-list {
  display: flex;
  flex-direction: column;
  gap: var(--tiki-space-3);
  margin-top: var(--tiki-space-4);
}
.tiki-pack {
  display: flex;
  align-items: flex-start;
  gap: var(--tiki-space-4);
  padding: var(--tiki-space-4) var(--tiki-space-5);
  border: 1px solid var(--tiki-border);
  border-radius: var(--tiki-radius-lg);
  background: var(--tiki-bg-subtle);
}
.tiki-pack__name { font-weight: var(--tiki-weight-bold); color: var(--tiki-text-strong); }
.tiki-pack__desc { font-size: var(--tiki-text-xs); color: var(--tiki-text-muted); }
.tiki-pack__price {
  flex: none;
  text-align: right;
  font-weight: var(--tiki-weight-bold);
  color: var(--tiki-text-strong);
}

/* ==========================================================================
   AUTH SCREENS
   A single centred card. No marketing panel, no illustration: the one job
   of this page is to get the user through it.
   ========================================================================== */
.tiki-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--tiki-header-height));
  padding: var(--tiki-space-10) var(--tiki-gutter);
  background: var(--tiki-bg-subtle);
}

.tiki-auth__card {
  width: 100%;
  max-width: 27rem;
  padding: var(--tiki-space-8);
  background: var(--tiki-surface);
  border: 1px solid var(--tiki-border);
  border-radius: var(--tiki-radius-xl);
  box-shadow: var(--tiki-shadow-md);
}

.tiki-auth__head { margin-bottom: var(--tiki-space-6); }

.tiki-auth__title {
  margin: 0 0 var(--tiki-space-2);
  font-size: var(--tiki-text-2xl);
  font-weight: var(--tiki-weight-extra);
  letter-spacing: var(--tiki-tracking-tight);
}

.tiki-auth__sub {
  margin: 0;
  color: var(--tiki-text-muted);
  font-size: var(--tiki-text-sm);
  line-height: var(--tiki-leading-relaxed);
}

.tiki-auth__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tiki-space-4);
}

.tiki-auth__foot {
  margin: var(--tiki-space-6) 0 0;
  padding-top: var(--tiki-space-5);
  border-top: 1px solid var(--tiki-border);
  text-align: center;
  font-size: var(--tiki-text-sm);
  color: var(--tiki-text-muted);
}

@media (max-width: 575.98px) {
  .tiki-auth {
    /* Full-bleed on phones: a floating card wastes a third of a small
       screen on margin the user cannot use. */
    padding: 0;
    align-items: stretch;
    background: var(--tiki-surface);
  }
  .tiki-auth__card {
    max-width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: var(--tiki-space-6) var(--tiki-space-5) var(--tiki-space-10);
  }
  .tiki-auth__row { grid-template-columns: 1fr; gap: 0; }
}

/* Cancelled banner */
.tiki-cancelled-banner {
  padding: var(--tiki-space-5) var(--tiki-space-6);
  border-radius: var(--tiki-radius-lg);
  background: var(--tiki-danger-soft);
  border: 1px solid #F7C9CB;
  color: #A32B30;
  margin-bottom: var(--tiki-space-6);
}