/* ============================================================================
   Ticketengine — public ticket shop stylesheet
   Mobile-first, card-based, distinctive. Styles the layout chrome (te-header,
   te-brand, te-nav, te-cart-link, te-main, te-footer) plus every module.
   ========================================================================== */

:root {
  --ink:        #16161d;
  --ink-soft:   #45454f;
  --muted:      #7a7a86;
  --line:       #e6e6ec;
  --bg:         #f6f5f2;
  --card:       #ffffff;
  --brand:      #d8412f;   /* warm ticket-stub red */
  --brand-dk:   #b22f1f;
  --accent:     #1b2a4a;   /* deep playbill navy */
  --gold:       #e9b949;
  --ok:         #1f8a4c;
  --warn:       #c0392b;
  --radius:     14px;
  --radius-sm:  9px;
  --shadow:     0 1px 2px rgba(16,16,29,.06), 0 8px 24px rgba(16,16,29,.07);
  --shadow-lg:  0 12px 40px rgba(16,16,29,.14);
  --maxw:       1080px;
  --font:       'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.te-front {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(1200px 480px at 100% -10%, #fff 0%, rgba(255,255,255,0) 60%),
    var(--bg);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- header --- */
.te-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 14px rgba(16,16,29,.18);
}
.te-header__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.te-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
}
.te-brand:hover { text-decoration: none; }
/* White chip behind the tenant mark — both logos (kreattivita's dark "K",
   buytickets' navy stub) are dark-on-transparent and vanish on the navy bar. */
.te-brand img {
  height: 34px;
  width: auto;
  display: block;
  background: #fff;
  border-radius: 6px;
  padding: .25rem .4rem;
}
.te-brand__name { font-size: 1.05rem; }

.te-nav {
  display: flex;
  gap: .25rem;
  margin-left: auto;
  flex-wrap: wrap;
}
.te-nav a {
  color: #d8dbe6;
  padding: .4rem .65rem;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 600;
}
.te-nav a:hover { color: #fff; background: rgba(255,255,255,.12); text-decoration: none; }

.te-cart-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--brand);
  color: #fff;
  padding: .45rem .85rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .92rem;
}
.te-cart-link:hover { background: var(--brand-dk); text-decoration: none; }
.te-cart-link.is-active { box-shadow: 0 0 0 3px rgba(216,65,47,.3); }

/* ----------------------------------------------------------------- main ---- */
.te-main {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}
.te-page { animation: te-fade .25s ease; }
@keyframes te-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- hero ---- */
.te-hero {
  background: linear-gradient(135deg, var(--accent), #28406e);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.8rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.te-hero::after {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(233,185,73,.35), transparent 70%);
}
.te-hero h1 { margin: 0 0 .25rem; font-size: 1.9rem; letter-spacing: -.5px; }
.te-hero p { margin: 0 0 1rem; color: #cdd5e6; max-width: 46ch; }

/* --------------------------------------------------------------- search ---- */
.te-search {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.te-search input[type="search"],
.te-search select {
  flex: 1 1 200px;
  min-width: 0;
  padding: .6rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.te-hero .te-search input,
.te-hero .te-search select { border-color: transparent; }

/* -------------------------------------------------------------- sections --- */
.te-section { margin-bottom: 2rem; }
.te-section__title,
.te-section__head h1 {
  font-size: 1.3rem;
  margin: 0 0 .9rem;
}
.te-section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.te-section__head .te-search { flex: 1 1 320px; justify-content: flex-end; }

/* ---------------------------------------------------------- event grid ----- */
.te-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 560px) { .te-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .te-grid { grid-template-columns: repeat(3, 1fr); } }

.te-event {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative;
}
.te-event::before {
  /* perforated ticket edge accent */
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: repeating-linear-gradient(var(--brand) 0 8px, transparent 8px 16px);
  opacity: .85;
}
.te-event:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.te-event__media { background: #eceaf3; aspect-ratio: 16/9; overflow: hidden; }
.te-event__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.te-event__body { padding: .9rem 1rem .4rem 1.2rem; flex: 1; }
.te-event__date { margin: 0 0 .35rem; color: var(--brand-dk); font-weight: 700; font-size: .82rem; line-height: 1.35; }
.te-event__title { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.te-event__actions {
  display: flex;
  gap: .5rem;
  padding: .75rem 1rem 1rem 1.2rem;
}
.te-event__actions form { display: inline; }

/* -------------------------------------------------------------- buttons ---- */
.te-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .5rem .95rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .05s, box-shadow .15s;
}
.te-btn:active { transform: translateY(1px); }
.te-btn:hover { text-decoration: none; }
.te-btn--primary { background: var(--brand); color: #fff; }
.te-btn--primary:hover { background: var(--brand-dk); }
.te-btn--ghost { background: #fff; color: var(--accent); border-color: var(--line); }
.te-btn--ghost:hover { border-color: var(--accent); }
.te-btn--ghost.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.te-btn--sm { padding: .35rem .7rem; font-size: .85rem; }
.te-btn--xs { padding: .25rem .55rem; font-size: .78rem; }
.te-btn--lg { padding: .7rem 1.4rem; font-size: 1.02rem; }

/* --------------------------------------------------------- empty / alerts -- */
.te-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
}
.te-empty h2 { margin: 0 0 .4rem; color: var(--ink); }

.te-alert {
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  margin-bottom: 1.1rem;
  border: 1px solid transparent;
}
.te-alert h1 { font-size: 1.25rem; margin: 0 0 .35rem; }
.te-alert--ok   { background: #eaf6ee; border-color: #bfe3cc; color: #14502e; }
.te-alert--warn { background: #fdeceb; border-color: #f3c7c2; color: #7d231a; }
.te-alert--info { background: #eef3fb; border-color: #cad9f1; color: #1b2a4a; }

/* ------------------------------------------------------------- festival ---- */
.te-festival__row {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}
.te-festival__name { margin: 0 0 .6rem; }
.te-festival__dates { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.te-festival__dates li {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; padding: .35rem 0; border-top: 1px dashed var(--line);
}

/* -------------------------------------------------------------- tickets ---- */
.te-tickets__head { margin-bottom: 1rem; }
.te-tickets__head h1 { margin: 0; font-size: 1.5rem; }
.te-tickets__when { margin: .25rem 0; color: var(--brand-dk); font-weight: 600; }
.te-tickets__cert { margin: 0; color: var(--muted); font-size: .88rem; }

.te-planbar {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .65rem .8rem; margin-bottom: 1rem;
}
.te-planbar > span { color: var(--muted); font-size: .85rem; margin-right: .25rem; }
.te-planbar__opt { display: inline; }

.te-ticket-table, .te-cart-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
/* legacy caps every section with a navy header band (.tdh in layout.css); the
   column heads are the basket's, so they carry the same band here */
.te-ticket-table th, .te-cart-table th {
  text-align: left; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .04em; color: #fff;
  padding: .7rem .9rem; background: var(--accent); border-bottom: 1px solid var(--line);
}
.te-ticket-table td, .te-cart-table td {
  padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: middle;
}
.te-ticket-table tr:last-child td, .te-cart-table tbody tr:last-child td { border-bottom: none; }
.te-addform { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.te-addform select, .te-addform input[type="text"] {
  padding: .4rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit;
}
.te-tickets__cartlink { margin-top: 1rem; }

/* --------------------------------------------------------------- pricekey -- */
.te-pricekey { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.te-pricekey__chip {
  padding: .25rem .6rem; border-radius: 6px; font-size: .82rem; font-weight: 700;
  color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.35);
}

/* --------------------------------------------------------------- seatmap --- */
.te-seatmap__hint { color: var(--muted); font-size: .9rem; }
#te-seatmap {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: .5rem; margin-bottom: 1rem;
}
.te-seatmap-svg { width: 100%; height: auto; display: block; touch-action: pan-x pan-y; }
.te-seat { transition: fill .12s ease; }
.te-seat:hover { stroke: var(--ink); stroke-width: 1.5; }

/* ----------------------------------------------------------------- cart ---- */
.te-cart-table td[data-label] { }
.te-cart-disc, .te-cart-qty, .te-cart-promo { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; margin-top: .3rem; }
.te-cart-disc select, .te-cart-qty input, .te-cart-promo input {
  padding: .35rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit;
}
.te-cart-group { display: inline-block; margin-top: .25rem; font-size: .8rem; color: var(--ok); font-weight: 600; }
.te-cart-event__date { display: block; margin-top: .2rem; font-size: .82rem; color: var(--muted); }
.te-cart-admin td { background: #faf9f7; font-weight: 600; }
.te-cart-table tfoot td { background: #faf9f7; font-weight: 700; border-top: 2px solid var(--line); }
/* legacy sets the total cell alone against the rest of the table (inline
   background on the one cell); keep that, in the shop's red rather than its blue */
.te-cart-table tfoot td.te-cart-total {
  background: var(--brand); color: #fff; font-size: 1.05rem; font-weight: 700;
}
.te-cart-promo__msg { font-size: .82rem; color: var(--ok); }
.te-cart-actions {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-top: 1.2rem; flex-wrap: wrap;
}

/* basket panel hosted on the seat plan / combined checkout */
.te-cartpanel, .te-checkout__basket { margin-bottom: 1.25rem; }
.te-cartpanel__title { margin: 0 0 .6rem; font-size: 1.15rem; }
.te-cartpanel__actions { display: flex; justify-content: flex-end; margin-top: .8rem; }

/* ------------------------------------------------------------- checkout ---- */
.te-checkout__grid { display: grid; gap: 1.25rem; }
@media (min-width: 820px) { .te-checkout__grid { grid-template-columns: 1.4fr 1fr; } }
.te-checkout__form, .te-checkout__terms, .te-member__card, .te-authcard {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem 1.4rem;
}
/* same navy band, bled to the card edges, so each section reads as one block */
.te-checkout__form h2, .te-checkout__terms h2 {
  margin: -1.3rem -1.4rem .9rem; padding: .6rem 1.4rem; font-size: 1.05rem;
  background: var(--accent); color: #fff;
  border-radius: var(--radius) var(--radius) 0 0;
}
.te-checkout__form label, .te-member__card label {
  display: block; margin-bottom: .8rem; font-size: .85rem; font-weight: 600; color: var(--ink-soft);
}
.te-checkout__form input, .te-checkout__form select,
.te-member__card input, .te-member__card select {
  display: block; width: 100%; margin-top: .3rem;
  padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; background: #fff; color: var(--ink);
}
.te-checkout__pay { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.te-checkout__amount { font-size: 1.05rem; }
.te-checkout__amount strong { color: var(--brand-dk); }
.te-checkout__hint { color: var(--muted); font-size: .88rem; }
.te-checkout__booking {
  margin-top: 1.2rem; padding: .8rem; border: 1px dashed var(--line); border-radius: var(--radius-sm);
}
.te-checkout__booking legend { font-size: .8rem; color: var(--muted); padding: 0 .4rem; }
.te-checkout__terms ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: .9rem; }
.te-checkout__terms li { margin-bottom: .55rem; }
.te-checkout__terms-warn { color: var(--warn); }
.te-checkout__concession { margin: .9rem 0 0; color: var(--ink-soft); font-size: .9rem; }
.te-checkout__refund-notice {
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line);
  text-align: center; color: var(--ink-soft); font-size: .9rem;
}
.te-checkout-notice { font-size: .95rem; }

/* ------------------------------------------------------------ displayauth -- */
.te-authcard { margin-top: 1rem; text-align: center; }
.te-authcard__codes { font-size: 1.05rem; margin: 1rem 0; }
.te-authcard__codes span { color: var(--muted); }
.te-authcard__codes strong { color: var(--brand-dk); letter-spacing: .5px; }

/* --------------------------------------------------------------- member ---- */
.te-member { display: flex; justify-content: center; }
.te-member__card { width: 100%; max-width: 460px; }
.te-member__card h1 { margin: 0 0 1rem; font-size: 1.4rem; }
.te-member__card h2 { margin: 1.5rem 0 .8rem; font-size: 1.1rem; }
.te-member__links { margin-top: 1rem; font-size: .9rem; color: var(--muted); }
.te-err { display: inline-block; margin-top: .25rem; color: var(--warn); font-size: .8rem; font-weight: 600; }

/* -------------------------------------------------------------- discount --- */
.te-discount__intro { color: var(--ink-soft); max-width: 60ch; }
.te-discount__orgroup, .te-discount__event {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.2rem; margin-bottom: 1rem; box-shadow: var(--shadow);
}
.te-discount__event h3 { margin: 0 0 .5rem; }
.te-discount__date { color: var(--brand-dk); font-weight: 600; margin: .4rem 0 .3rem; }
.te-discount__row { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.te-discount__row select { padding: .35rem .5rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* ----------------------------------------------------------------- footer -- */
.te-footer {
  background: var(--accent);
  color: #c3cadb;
  margin-top: auto;
}
.te-footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 1.2rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-size: .85rem;
}
.te-footer__brands {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1rem 1.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}
.te-footer__brands img {
  display: block;
  height: 26px;
  width: auto;
  background: #fff;
  border-radius: 4px;
  padding: .3rem .55rem;
}

/* ---- small-screen table reflow for the cart ---- */
@media (max-width: 620px) {
  .te-cart-table, .te-cart-table tbody, .te-cart-table tr, .te-cart-table td { display: block; width: 100%; }
  .te-cart-table thead { display: none; }
  .te-cart-table tr { border-bottom: 2px solid var(--line); padding: .4rem 0; }
  .te-cart-table td { border: none; padding: .35rem .9rem; }
  .te-cart-table td[data-label]::before {
    content: attr(data-label) ": "; font-weight: 700; color: var(--muted); font-size: .78rem;
  }
  .te-cart-table tfoot, .te-cart-table tfoot tr, .te-cart-table tfoot td { display: block; }
}