/* ============================================================
   Thrillark Tickets — card.css v8.0

   Title element is a <span> — the ONLY element type that
   WordPress themes never apply font-size rules to.
   No !important. No all:unset. Fully scoped. Blog-safe.
   ============================================================ */

:root {
  --tk:       #1ab0d8;
  --tk-dark:  #0d7fa8;
  --tk-bg:    #e4f5fb;
  --tk-bdr:   #d0e8f0;
  --tk-text:  #111827;
  --tk-muted: #6b9aaa;
  --tk-r:     10px;
}

/* Scope reset — only inside our cards */
.tk-single, .tk-single *,
.tk-grid,   .tk-grid   * {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

/* Span titles need explicit block behaviour */
.tk-single__body .tk-single__title,
.tk-vcard__body  .tk-vcard__title {
  display:    block;
  width:      100%;
}

/* ============================================================
   SINGLE TICKET — horizontal card
   ============================================================ */
.tk-single {
  display:         flex;
  flex-direction:  row;
  align-items:     stretch;
  width:           100%;
  max-width:       560px;
  background:      #fff;
  border:          1px solid var(--tk-bdr);
  border-radius:   var(--tk-r);
  overflow:        hidden;
  text-decoration: none;
  color:           var(--tk-text);
  font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition:      box-shadow .18s, transform .18s;
}
.tk-single:hover {
  box-shadow: 0 4px 18px rgba(26,176,216,.13);
  transform:  translateY(-2px);
}

.tk-single__img {
  width:       200px;
  min-width:   200px;
  flex-shrink: 0;
  overflow:    hidden;
  background:  var(--tk-bg);
}
.tk-single__img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform .3s;
}
.tk-single:hover .tk-single__img img { transform: scale(1.04); }

.tk-single__body {
  flex:           1;
  min-width:      0;
  padding:        14px 16px;
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.tk-single__cat {
  display:        block;
  font-size:      10px;
  font-weight:    600;
  letter-spacing: .9px;
  text-transform: uppercase;
  color:          var(--tk-muted);
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  line-height:    1.2;
  font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* TITLE — span tag, 14px. Themes never set font-size on span. */
.tk-single__body .tk-single__title {
  font-size:          14px;
  font-weight:        600;
  color:              #111827;
  line-height:        1.35;
  font-family:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-align:         left;
  word-spacing:       normal;
  letter-spacing:     normal;
  /* 2-line clamp */
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
  word-break:         break-word;
}

/* Stars */
.tk-single__stars {
  display:     flex;
  align-items: center;
  gap:         1px;
  font-size:   14px;
  line-height: 1;
}
.tk-single__stars .s-on  { color: #f59e0b; }
.tk-single__stars .s-half { color: #f59e0b; font-size: 12px; }
.tk-single__stars .s-off  { color: #d1d5db; }
.tk-single__stars-num {
  font-size:   11px;
  color:       var(--tk-muted);
  margin-left: 4px;
}

/* Footer */
.tk-single__footer {
  display:         flex;
  align-items:     flex-end;
  justify-content: flex-end;
  margin-top:      auto;
  padding-top:     10px;
}
.tk-single__price-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  line-height:    1.1;
}
.tk-single__from  { font-size: 10px; color: var(--tk-muted); font-style: italic; }
.tk-single__price { font-size: 15px; font-weight: 800; color: var(--tk-text); white-space: nowrap; }

@media (max-width: 480px) {
  .tk-single              { flex-direction: column; max-width: 100%; }
  .tk-single__img         { width: 100%; min-width: unset; height: 160px; }
  .tk-single__footer      { justify-content: flex-start; }
  .tk-single__price-wrap  { align-items: flex-start; }
}

/* ============================================================
   MULTIPLE TICKETS — vertical grid
   ============================================================ */
.tk-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:                   12px;
  width:                 100%;
  font-family:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.tk-vcard {
  background:      #fff;
  border-radius:   var(--tk-r);
  overflow:        hidden;
  display:         flex;
  flex-direction:  column;
  width:           100%;
  text-decoration: none;
  color:           var(--tk-text);
  box-shadow:      0 1px 4px rgba(0,0,0,.07);
  transition:      transform .18s, box-shadow .18s;
}
.tk-vcard:hover {
  transform:  translateY(-3px);
  box-shadow: 0 6px 18px rgba(26,176,216,.12);
}

.tk-vcard__img {
  width:        100%;
  aspect-ratio: 3 / 2;
  overflow:     hidden;
  background:   var(--tk-bg);
  flex-shrink:  0;
}
.tk-vcard__img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform .3s;
}
.tk-vcard:hover .tk-vcard__img img { transform: scale(1.04); }

.tk-vcard__body {
  padding:        8px 8px 10px;
  display:        flex;
  flex-direction: column;
  gap:            4px;
  flex:           1;
  min-width:      0;
  width:          100%;
}

/* TITLE — span tag, 12px. Theme never applies font-size to spans. */
.tk-vcard__body .tk-vcard__title {
  font-size:          12px;
  font-weight:        600;
  color:              #111827;
  line-height:        1.35;
  font-family:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-align:         left;
  word-spacing:       normal;
  letter-spacing:     normal;
  /* 2-line clamp */
  display:            -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
  word-break:         break-word;
  min-height:         calc(12px * 1.35 * 2);
}

.tk-vcard__price-row {
  display:     flex;
  align-items: baseline;
  gap:         4px;
  margin-top:  auto;
  padding-top: 6px;
}
.tk-vcard__from  { font-size: 9px;  color: var(--tk-muted); font-style: italic; }
.tk-vcard__price { font-size: 13px; font-weight: 800; color: var(--tk-text); white-space: nowrap; }

@media (max-width: 500px) {
  .tk-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}
@media (max-width: 300px) {
  .tk-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   EDITOR PICKER
   ============================================================ */
.tk-picker {
  font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  border:        1px solid var(--tk-bdr);
  border-radius: var(--tk-r);
  padding:       14px;
  background:    #f2fafd;
  margin-bottom: 14px;
}
.tk-picker__header      { display:flex; align-items:center; gap:7px; margin-bottom:7px; }
.tk-picker__badge       { margin-left:auto; font-size:11px; font-weight:700; background:var(--tk); color:#fff; padding:2px 8px; border-radius:20px; }
.tk-picker__hint        { font-size:12px; color:var(--tk-muted); margin:0 0 9px; }
.tk-search              { width:100%; padding:8px 13px; border:1px solid var(--tk-bdr); border-radius:7px; font-size:13px; color:var(--tk-text); background:#fff; outline:none; transition:border-color .15s,box-shadow .15s; }
.tk-search:focus        { border-color:var(--tk); box-shadow:0 0 0 3px rgba(26,176,216,.12); }
.tk-dropdown            { list-style:none; margin:5px 0 0; padding:3px 0; border:1px solid var(--tk-bdr); border-radius:7px; background:#fff; box-shadow:0 6px 18px rgba(26,176,216,.09); max-height:240px; overflow-y:auto; }
.tk-option              { display:flex; align-items:center; gap:9px; padding:7px 11px; cursor:pointer; transition:background .1s; }
.tk-option:hover        { background:#eef8fc; }
.tk-option__img         { width:36px; height:36px; object-fit:cover; border-radius:5px; flex-shrink:0; background:#e4f5fb; }
.tk-option__info        { display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.tk-option__title       { font-size:12px; font-weight:600; color:var(--tk-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-option__sub         { display:flex; gap:7px; font-size:10px; color:var(--tk-muted); }
.tk-option__sub b       { color:var(--tk-dark); font-weight:700; }
.tk-empty               { font-size:12px; color:var(--tk-muted); text-align:center; padding:7px 0; margin:0; }
.tk-card__remove        { position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,.48); color:#fff; border:none; cursor:pointer; font-size:10px; display:flex; align-items:center; justify-content:center; z-index:5; line-height:1; padding:0; transition:background .12s; }
.tk-card__remove:hover  { background:#dc2626; }
.thrillark-not-found    { color:var(--tk-muted); font-size:13px; text-align:center; padding:18px; }