/*
 * Ticket-shaped live search (Events + My Tickets).
 * The bar is a ticket: icon + input on the left, a perforated stub with the action on the right.
 * Only gradients / outlines / transforms are used, so it stays light on low-end devices.
 */

.ts {
    --ts-brand: var(--brand-primary, #047857);
    --ts-accent: var(--brand-accent, #10b981);
    --ts-ink: #0f172a;
    --ts-muted: #64748b;
    --ts-line: #cfd8e3;
    --ts-bg: var(--tk-bg, #f5f5f5);
    --ts-n: 9px;
    --ts-stub: 104px;
    position: relative;
    margin: 0 0 1.1rem;
    color: var(--ts-ink);
}
.ts *, .ts *::before, .ts *::after { box-sizing: border-box; }

/* ---------- the bar ---------- */
.ts-wrap { position: relative; }
.ts-bar {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 56px;
    border-radius: 16px;
    background:
        radial-gradient(circle var(--ts-n) at calc(100% - var(--ts-stub)) 0, var(--ts-bg) calc(var(--ts-n) - 1px), #0000 var(--ts-n)),
        radial-gradient(circle var(--ts-n) at calc(100% - var(--ts-stub)) 100%, var(--ts-bg) calc(var(--ts-n) - 1px), #0000 var(--ts-n)),
        #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 16px 28px -20px rgba(15, 23, 42, .5);
    outline: 2px solid transparent;
    transition: outline-color .15s, box-shadow .15s;
}
.ts-bar:focus-within {
    outline-color: var(--ts-accent);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 16px 28px -18px rgba(4, 120, 87, .55);
}
.ts-icon {
    flex: none; width: 52px; display: grid; place-items: center; color: var(--ts-brand); cursor: text;
}
.ts-input {
    flex: 1 1 auto; min-width: 0; width: 100%;
    border: 0; background: transparent; outline: 0; box-shadow: none;
    padding: .85rem .25rem; font: inherit; font-size: 1rem; color: var(--ts-ink);
    -webkit-appearance: none; appearance: none;
}
.ts-input::placeholder { color: #94a3b8; }
.ts-input::-webkit-search-cancel-button { display: none; }
.ts-kbd {
    align-self: center; margin-right: .4rem; padding: .12rem .45rem; border-radius: 6px;
    font: 700 .75rem ui-monospace, Menlo, monospace; color: var(--ts-muted); background: #f1f5f9; border: 1px solid #e2e8f0;
}
.ts-input:focus ~ .ts-kbd, .ts.has-value .ts-kbd { display: none; }
.ts-clear {
    align-self: center; flex: none; width: 30px; height: 30px; margin-right: .35rem; border-radius: 50%;
    border: 0; cursor: pointer; display: grid; place-items: center; color: #475569; background: #eef2f6;
}
.ts-clear:hover { background: #e2e8f0; }
.ts-clear[hidden] { display: none; }
.ts-go {
    flex: none; width: var(--ts-stub); border: 0; cursor: pointer; color: #fff; font: inherit; font-weight: 800; font-size: .9rem;
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    border-left: 2px dashed rgba(255, 255, 255, .55);
    border-radius: 0 16px 16px 0;
    background: linear-gradient(135deg, var(--ts-brand), var(--ts-accent));
    position: relative;
}
.ts-go::before, .ts-go::after {
    content: ""; position: absolute; left: calc(var(--ts-n) * -1 - 1px); width: calc(var(--ts-n) * 2); height: var(--ts-n); background: var(--ts-bg);
}
.ts-go::before { top: 0; border-radius: 0 0 var(--ts-n) var(--ts-n); }
.ts-go::after { bottom: 0; border-radius: var(--ts-n) var(--ts-n) 0 0; }
.ts-go:focus-visible { outline: 2px solid var(--ts-ink); outline-offset: -4px; }

/* the stub sits over the notches, so its own left border is the perforation line */
.ts.is-loading .ts-bar::after {
    content: ""; position: absolute; left: 14px; right: calc(var(--ts-stub) + 14px); bottom: 0; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--ts-accent), transparent) 0 0 / 40% 100% no-repeat;
    animation: tsSweep 1s linear infinite;
}
@keyframes tsSweep { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* ---------- suggestions: mini tickets ---------- */
.ts-drop {
    position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
    margin-top: .5rem; padding: .5rem; border-radius: 16px; background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 26px 44px -18px rgba(15, 23, 42, .5);
    max-height: min(70vh, 460px); overflow-y: auto; overscroll-behavior: contain;
}
.ts-drop[hidden] { display: none; }
.ts-drop-h { padding: .4rem .6rem .3rem; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ts-muted); display: flex; justify-content: space-between; align-items: center; }
.ts-drop-h button { border: 0; background: none; color: var(--ts-brand); font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; text-transform: none; letter-spacing: 0; }
.ts-opt {
    display: grid; grid-template-columns: 46px 1fr auto; gap: .7rem; align-items: center;
    padding: .45rem .5rem; border-radius: 12px; cursor: pointer; text-decoration: none; color: inherit;
}
.ts-opt[aria-selected="true"], .ts-opt:hover { background: #f0fdf4; }
.ts-opt img, .ts-opt .ts-ph { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: #e2e8f0; }
.ts-opt .ts-ph { display: grid; place-items: center; color: #94a3b8; }
.ts-opt b { display: block; font-size: .93rem; line-height: 1.25; color: var(--ts-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-opt small { display: block; margin-top: .1rem; font-size: .78rem; color: var(--ts-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-price {
    position: relative; padding: .35rem .6rem; border-radius: 8px; font-size: .78rem; font-weight: 800; color: var(--ts-brand);
    border: 1.5px dashed #86efac; background: #f0fdf4; white-space: nowrap;
}
.ts-recent { grid-template-columns: 22px 1fr auto; }
.ts-recent svg { color: #94a3b8; justify-self: center; }
.ts-recent b { font-weight: 600; }
.ts-recent .ts-x { border: 0; background: none; color: #94a3b8; cursor: pointer; font-size: 1rem; padding: .2rem .4rem; border-radius: 6px; }
.ts-recent .ts-x:hover { background: #e2e8f0; color: #475569; }
.ts-all {
    display: flex; justify-content: center; margin: .3rem .3rem .1rem; padding: .6rem; border-radius: 10px; cursor: pointer;
    border: 1.5px dashed #cbd5e1; background: #fff; font: inherit; font-weight: 800; font-size: .85rem; color: var(--ts-brand); width: calc(100% - .6rem);
}
.ts-all:hover, .ts-all[aria-selected="true"] { background: #f0fdf4; border-color: #86efac; }
.ts-empty { padding: .9rem .8rem; color: var(--ts-muted); font-size: .9rem; text-align: center; }

/* ---------- chips ---------- */
.ts-chips { display: flex; gap: .45rem; margin-top: .75rem; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ts-chips::-webkit-scrollbar { display: none; }
.ts-chip {
    flex: none; appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .85rem; border-radius: 999px; font: inherit; font-size: .82rem; font-weight: 700; color: #334155;
    background: #fff; border: 1.5px dashed #cbd5e1; transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}
.ts-chip:hover { border-color: var(--ts-accent); color: var(--ts-brand); }
.ts-chip[aria-pressed="true"] { background: var(--ts-brand); color: #fff; border: 1.5px solid var(--ts-brand); }
.ts-chip i { font-style: normal; min-width: 1.2rem; padding: .05rem .35rem; border-radius: 999px; background: rgba(15, 23, 42, .08); font-size: .7rem; text-align: center; }
.ts-chip[aria-pressed="true"] i { background: rgba(255, 255, 255, .25); }
.ts-chip:focus-visible, .ts-clear:focus-visible, .ts-opt:focus-visible { outline: 2px solid var(--ts-brand); outline-offset: 2px; }
.ts-sep { flex: none; width: 1px; align-self: stretch; background: #dbe3ec; margin: .2rem .1rem; }

/* ---------- status line ---------- */
.ts-status { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; min-height: 1.6rem; margin-top: .4rem; font-size: .85rem; color: var(--ts-muted); }
.ts-status:empty { display: none; }
.ts-count { font-weight: 700; color: #334155; }
.ts-dym button, .ts-reset {
    border: 0; background: none; padding: 0; font: inherit; font-weight: 800; color: var(--ts-brand); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
mark.ts-hl { background: #fef08a; color: inherit; border-radius: 3px; padding: 0 1px; }

/* results while loading */
.ts-results { transition: opacity .15s; }
.ts.is-loading ~ .ts-results, .ts-results.is-loading { opacity: .55; }
.ts-results.ts-fade > * { animation: tsIn .25s ease both; }
@keyframes tsIn { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- tickets page extras ---------- */
.ts-tickets-empty { text-align: center; padding: 2rem 1rem; color: var(--ts-muted); }

@media (max-width: 560px) {
    .ts { --ts-stub: 56px; }
    .ts-go span { display: none; }
    .ts-icon { width: 44px; }
    .ts-kbd { display: none; }
    .ts-opt { grid-template-columns: 42px 1fr auto; gap: .55rem; }
    .ts-opt img, .ts-opt .ts-ph { width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
    .ts *, .ts-results, .ts-results > * { animation: none !important; transition: none !important; }
}

/* hidden must win over the display rules of cards / grids */
.tickets-list[hidden], .ticket-card[hidden], .no-tickets[hidden], .tickets-pagination[hidden], .ts-chip[hidden] { display: none !important; }