/*
 * Ticket UI — gives cards and buttons a "paper ticket" look:
 * side notches, dashed perforation lines and a stub for the action.
 *
 * Built only from gradients, outlines and masks (no filters, no backdrop-filter),
 * so it stays cheap on low-end devices. Scoped to body.tk-ui (public pages only).
 */

.tk-ui {
    --tk-bg: #f5f5f5;                /* colour behind the cards: shows through the notches */
    --tk-line: #cfd8e3;              /* perforation dashes */
    --tk-ring: #e3e9f1;              /* thin outline drawn around each notch */
    --tk-ink: #0f172a;
    --tk-brand: var(--brand-primary, #047857);
    --tk-accent: var(--brand-accent, #10b981);
    --tk-n: 9px;                     /* notch radius */
    --tk-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 14px 26px -16px rgba(15, 23, 42, .38);
}

/* ---------------------------------------------------------------------
   Reusable perforation strips (horizontal / vertical), drawn as backgrounds:
   a half-disc notch at each end plus a dashed line between them.
   --------------------------------------------------------------------- */
.tk-ui .tk-perf-h,
.tk-ui .event-content::before,
.tk-ui .event-card-content::before {
    content: "";
    display: block;
    height: calc(var(--tk-n) * 2);
    background:
        radial-gradient(circle var(--tk-n) at 0 50%, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
        radial-gradient(circle var(--tk-n) at 100% 50%, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
        repeating-linear-gradient(90deg, var(--tk-line) 0 6px, #0000 6px 11px) center / calc(100% - var(--tk-n) * 2 - 14px) 2px no-repeat;
}

/* =====================================================================
   1. Event cards (Home, Events, Account "My Events")
   ===================================================================== */
.tk-ui .event-card-simple,
.tk-ui .events-grid-account > .event-card {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--tk-shadow);
    transition: transform .25s ease, box-shadow .25s ease;
}

.tk-ui .event-card-simple:hover,
.tk-ui .events-grid-account > .event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 22px 34px -18px rgba(4, 120, 87, .5);
}

.tk-ui .event-card-simple .event-image { overflow: hidden; }

/* light sweep across the poster on hover, like the carousel */
.tk-ui .event-card-simple .event-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .34) 48%, transparent 60%);
    transform: translateX(-130%);
    pointer-events: none;
}

.tk-ui .event-card-simple:hover .event-image::after { animation: tk-shine .95s ease-out; }

@keyframes tk-shine {
    from { transform: translateX(-130%); }
    to   { transform: translateX(130%); }
}

/* calendar-style date badge on the poster */
.tk-ui .tk-date {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    padding: .32rem .5rem .38rem;
    border-radius: 12px;
    text-align: center;
    line-height: 1;
    color: #031a14;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}

.tk-ui .tk-date span { display: block; font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #059669; }
.tk-ui .tk-date b { display: block; margin-top: .12rem; font-size: 1.2rem; font-weight: 900; }

/* the stub: title, perforation, then price + button side by side */
.tk-ui .event-card-simple .event-content,
.tk-ui .events-grid-account > .event-card .event-card-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title title"
        "perf  perf"
        "price cta"
        "code  code";
    align-items: center;
    gap: 0 .5rem;
    padding: .8rem .85rem .75rem;
    text-align: left;
}

.tk-ui .event-card-simple .event-content > h3,
.tk-ui .events-grid-account > .event-card .event-card-content > h3 {
    grid-area: title;
    margin: 0 0 .7rem;
    text-align: left;
}

.tk-ui .event-card-simple .event-content::before,
.tk-ui .events-grid-account > .event-card .event-card-content::before {
    grid-area: perf;
    margin: 0 -.85rem;
}

.tk-ui .event-card-simple .event-content > .event-simple-price,
.tk-ui .events-grid-account > .event-card .event-card-content > .event-simple-price {
    grid-area: price;
    margin-top: .6rem;
    text-align: left;
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: -.01em;
    white-space: nowrap;
    min-width: 0;
}

.tk-ui .event-card-simple .event-content > .btn,
.tk-ui .events-grid-account > .event-card .event-card-content > .btn {
    grid-area: cta;
    width: auto;
    margin: .6rem 0 0;
    padding: .45rem .7rem;
    font-size: .68rem;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* faint barcode along the bottom edge */
.tk-ui .event-card-simple .event-content::after,
.tk-ui .events-grid-account > .event-card .event-card-content::after {
    content: "";
    grid-area: code;
    height: 9px;
    margin-top: .75rem;
    opacity: .22;
    background: repeating-linear-gradient(90deg, #0f172a 0 1px, #0000 1px 3px, #0f172a 3px 5px, #0000 5px 6px, #0f172a 6px 7px, #0000 7px 10px, #0f172a 10px 13px, #0000 13px 15px);
}

/* narrow phones: two cards per row, so the stub stacks price above a full-width button */
@media (max-width: 560px) {
    .tk-ui .event-card-simple .event-content,
    .tk-ui .events-grid-account > .event-card .event-card-content {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "title" "perf" "price" "cta" "code";
        padding: .65rem .6rem .6rem;
    }
    .tk-ui .event-card-simple .event-content::before,
    .tk-ui .events-grid-account > .event-card .event-card-content::before { margin: 0 -.6rem; }
    .tk-ui .event-card-simple .event-content > .event-simple-price,
    .tk-ui .events-grid-account > .event-card .event-card-content > .event-simple-price { margin-top: .45rem; font-size: .92rem; }
    .tk-ui .event-card-simple .event-content > .btn,
    .tk-ui .events-grid-account > .event-card .event-card-content > .btn { width: 100%; margin-top: .45rem; justify-content: center; text-align: center; }
    .tk-ui .tk-date { top: 7px; left: 7px; padding: .26rem .4rem .3rem; }
    .tk-ui .tk-date b { font-size: 1rem; }
}

/* =====================================================================
   2. Ticket rows (My Tickets page + Account "My Tickets")
   ===================================================================== */
.tk-ui .tickets-page .ticket-card,
.tk-ui .tickets-list:not(#ticketsList) .ticket-card {
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--tk-shadow);
}

/* the action area becomes the tear-off stub, separated by a vertical perforation */
.tk-ui .tickets-page .ticket-card > div:nth-child(3),
.tk-ui .tickets-list:not(#ticketsList) .ticket-card > div:nth-child(4) {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: -.65rem -1rem -.65rem 0 !important;
    padding: .65rem 1rem .65rem 1.25rem !important;
    background: linear-gradient(90deg, rgba(16, 185, 129, .07), rgba(16, 185, 129, .02));
}

.tk-ui .tickets-page .ticket-card > div:nth-child(3)::before,
.tk-ui .tickets-list:not(#ticketsList) .ticket-card > div:nth-child(4)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--tk-n) * -1);
    width: calc(var(--tk-n) * 2);
    background:
        radial-gradient(circle var(--tk-n) at 50% 0, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
        radial-gradient(circle var(--tk-n) at 50% 100%, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
        repeating-linear-gradient(180deg, var(--tk-line) 0 6px, #0000 6px 11px) center / 2px calc(100% - var(--tk-n) * 2 - 14px) no-repeat;
}

@media (min-width: 901px) {
    .tk-ui .tickets-page .ticket-card { grid-template-columns: minmax(150px, 1fr) minmax(0, 2fr) 350px; }
}

@media (max-width: 900px) {
    /* stacked layout: the stub sits underneath, separated by a horizontal perforation */
    .tk-ui .tickets-page .ticket-card > div:nth-child(3),
    .tk-ui .tickets-list:not(#ticketsList) .ticket-card > div:nth-child(4) {
        margin: .35rem -1rem -.65rem !important;
        padding: 1rem 1rem .65rem !important;
        background: linear-gradient(180deg, rgba(16, 185, 129, .07), rgba(16, 185, 129, .02));
    }

    .tk-ui .tickets-page .ticket-card > div:nth-child(3)::before,
    .tk-ui .tickets-list:not(#ticketsList) .ticket-card > div:nth-child(4)::before {
        top: calc(var(--tk-n) * -1);
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: calc(var(--tk-n) * 2);
        background:
            radial-gradient(circle var(--tk-n) at 0 50%, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
            radial-gradient(circle var(--tk-n) at 100% 50%, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
            repeating-linear-gradient(90deg, var(--tk-line) 0 6px, #0000 6px 11px) center / calc(100% - var(--tk-n) * 2 - 14px) 2px no-repeat;
    }
}

/* =====================================================================
   3. Buttons: ticket-stub notches + dashed inner edge
   ===================================================================== */
.tk-ui .btn,
.tk-ui .co-btn,
.tk-ui .btn-sell,
.tk-ui .pagination-btn,
.tk-ui .cookie-btn {
    --n: 5px;
    -webkit-mask:
        radial-gradient(circle var(--n) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--n) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle var(--n) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--n) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
    outline: 1px dashed color-mix(in srgb, currentColor 42%, transparent);
    outline-offset: -4px;
}

.tk-ui .btn-sm,
.tk-ui .btn-compact,
.tk-ui .pagination-btn { --n: 4px; outline-offset: -3px; }

.tk-ui .btn-block,
.tk-ui .co-btn { --n: 6px; }

/* keyboard focus must stay visible even though the mask clips outer outlines */
.tk-ui .btn:focus-visible,
.tk-ui .co-btn:focus-visible,
.tk-ui .btn-sell:focus-visible,
.tk-ui .pagination-btn:focus-visible,
.tk-ui .cookie-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -5px;
}

/* =====================================================================
   4. Panels: a perforated header (Event details, About, Support, Checkout)
   ===================================================================== */
.tk-ui .event-info-grid > .info-card,
.tk-ui .about-card,
.tk-ui .about-values > div,
.tk-ui .support-card,
.tk-ui .co-card {
    overflow: hidden;
    border: 0 !important;
    border-radius: 18px !important;
    background: #fff;
    box-shadow: var(--tk-shadow);
}

/* heading + dashed line + notches at the card edges */
.tk-ui .event-info-grid > .info-card > h2,
.tk-ui .about-card > h2,
.tk-ui .about-values > div > h3,
.tk-ui .support-card > h2 {
    position: relative;
    margin-bottom: calc(var(--tk-n) + .7rem) !important;
}

.tk-ui .event-info-grid > .info-card > h2::after,
.tk-ui .about-card > h2::after,
.tk-ui .about-values > div > h3::after,
.tk-ui .support-card > h2::after {
    content: "";
    position: absolute;
    left: calc(var(--tk-px, 1.25rem) * -1);
    right: calc(var(--tk-px, 1.25rem) * -1);
    bottom: calc(var(--tk-n) * -1 - .35rem);
    height: calc(var(--tk-n) * 2);
    background:
        radial-gradient(circle var(--tk-n) at 0 50%, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
        radial-gradient(circle var(--tk-n) at 100% 50%, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
        repeating-linear-gradient(90deg, var(--tk-line) 0 6px, #0000 6px 11px) center / calc(100% - var(--tk-n) * 2 - 14px) 2px no-repeat;
}

.tk-ui .event-info-grid > .info-card { --tk-px: 1.25rem; }
.tk-ui .about-card { --tk-px: 1.1rem; }
.tk-ui .about-values > div { --tk-px: 1.1rem; }
.tk-ui .support-card { --tk-px: 1.25rem; }

/* =====================================================================
   5. Ticket categories on the event page: one ticket per category
   ===================================================================== */
.tk-ui .ticket-categories-table {
    gap: .7rem;
    background: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

.tk-ui .ticket-table-header { display: none; }

.tk-ui .ticket-table-row:not(.ticket-table-header) {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--tk-shadow);
}

.tk-ui .ticket-table-row .ticket-col-action {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: -.65rem -1.1rem -.65rem 0;
    padding: .65rem 1.1rem .65rem 1.25rem;
    background: linear-gradient(90deg, rgba(16, 185, 129, .07), rgba(16, 185, 129, .02));
}

.tk-ui .ticket-table-row .ticket-col-action::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--tk-n) * -1);
    width: calc(var(--tk-n) * 2);
    background:
        radial-gradient(circle var(--tk-n) at 50% 0, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
        radial-gradient(circle var(--tk-n) at 50% 100%, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
        repeating-linear-gradient(180deg, var(--tk-line) 0 6px, #0000 6px 11px) center / 2px calc(100% - var(--tk-n) * 2 - 14px) no-repeat;
}

/* =====================================================================
   6. Checkout: the total is the tear-off top of the ticket
   ===================================================================== */
.tk-ui .co-pay__amount { position: relative; border-bottom: 0; }

.tk-ui .co-pay__amount::after {
    content: "";
    position: absolute;
    left: -1.5rem;
    right: -1.5rem;
    bottom: calc(var(--tk-n) * -1);
    height: calc(var(--tk-n) * 2);
    background:
        radial-gradient(circle var(--tk-n) at 0 50%, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
        radial-gradient(circle var(--tk-n) at 100% 50%, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
        repeating-linear-gradient(90deg, var(--tk-line) 0 6px, #0000 6px 11px) center / calc(100% - var(--tk-n) * 2 - 14px) 2px no-repeat;
}

@media (max-width: 560px) {
    .tk-ui .co-pay__amount::after { left: -1.15rem; right: -1.15rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tk-ui .event-card-simple,
    .tk-ui .events-grid-account > .event-card { transition: none; }
    .tk-ui .event-card-simple:hover .event-image::after { animation: none; }
    .tk-ui .event-card-simple:hover,
    .tk-ui .events-grid-account > .event-card:hover { transform: none; }
}


/* =====================================================================
   7. Hamburger + mobile menu: a ticket you pull open
   ===================================================================== */
.tk-ui .nav-ticket-head,
.tk-ui .nav-ticket-foot { display: none; }

@media (max-width: 768px) {
    /* the button: a small ticket stub with a dashed inner edge */
    .tk-ui .hamburger {
        --n: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 46px;
        height: 40px;
        padding: 0;
        border-radius: 11px;
        background: rgba(255, 255, 255, .17);
        -webkit-mask:
            radial-gradient(circle var(--n) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
            radial-gradient(circle var(--n) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
        mask:
            radial-gradient(circle var(--n) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
            radial-gradient(circle var(--n) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
        outline: 1px dashed rgba(255, 255, 255, .7);
        outline-offset: -4px;
    }

    .tk-ui .hamburger span {
        display: block;
        width: 20px;
        height: 2.5px;
        margin: 0;
        border-radius: 2px;
        background: #fff;
        transition: transform .25s ease, opacity .2s ease;
    }

    .tk-ui .hamburger.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .tk-ui .hamburger.active span:nth-child(2) { opacity: 0; }
    .tk-ui .hamburger.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
    .tk-ui .hamburger:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }

    /* the panel: a tall ticket with a scalloped (torn) left edge */
    .tk-ui .nav-menu {
        width: min(86vw, 330px);
        padding: 0;
        gap: 0;
        align-items: stretch;
        background: #fff;
        color: #0f172a;
        box-shadow: none;
        transition: right .28s cubic-bezier(.2, .8, .2, 1);
        -webkit-mask:
            radial-gradient(circle 7px at 0 50%, #0000 97%, #000) left / 51% 26px repeat-y,
            linear-gradient(#000, #000) right / 50% 100% no-repeat;
        mask:
            radial-gradient(circle 7px at 0 50%, #0000 97%, #000) left / 51% 26px repeat-y,
            linear-gradient(#000, #000) right / 50% 100% no-repeat;
    }

    .tk-ui .nav-overlay { background-color: rgba(3, 26, 20, .55); }

    .tk-ui .nav-ticket-head {
        display: block;
        position: relative;
        flex: none;
        padding: 1.3rem 3.6rem 1.15rem 1.6rem;
        color: #fff;
        background:
            radial-gradient(120% 140% at 100% 0, rgba(255, 255, 255, .2), transparent 55%),
            linear-gradient(135deg, #064e3b, var(--brand-primary, #047857) 55%, var(--brand-accent, #10b981));
    }

    .tk-ui .nav-ticket-head::after {
        content: "";
        position: absolute;
        left: 14px;
        right: 0;
        bottom: 0;
        height: 2px;
        background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 6px, transparent 6px 11px);
    }

    .tk-ui .nav-ticket-kicker { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #a7f3d0; }
    .tk-ui .nav-ticket-brand { display: block; margin-top: .3rem; font-size: 1.2rem; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }

    .tk-ui .nav-close {
        position: absolute;
        top: .9rem;
        right: .8rem;
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, .18);
        color: #fff;
        cursor: pointer;
    }

    .tk-ui .nav-close svg { width: 18px; height: 18px; }
    .tk-ui .nav-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

    /* each link is a ticket row, separated by a perforation */
    .tk-ui .nav-menu a {
        display: flex;
        align-items: center;
        gap: .85rem;
        width: auto;
        margin: 0;
        padding: .8rem 1.4rem;
        color: #0f172a;
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
        border-bottom: 2px dashed #e4eaf2;
        background: transparent;
    }

    .tk-ui .nav-menu a:not(.btn-sell)::before {
        content: "";
        position: static;
        flex: none;
        width: 38px;
        height: 38px;
        border-radius: 12px;
        background: #ecfdf5 center / 20px no-repeat;
        transform: none !important;
        opacity: 1;
    }

    .tk-ui .nav-menu a:not(.btn-sell)::after {
        content: "";
        margin-left: auto;
        width: 16px;
        height: 16px;
        background: #cbd5e1;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .tk-ui .nav-menu a:not(.btn-sell):hover,
    .tk-ui .nav-menu a:not(.btn-sell):focus-visible { background: #f6fbf9; color: var(--brand-primary, #047857); }
    .tk-ui .nav-menu a:not(.btn-sell):focus-visible { outline: 2px solid var(--brand-accent, #10b981); outline-offset: -3px; }

    .tk-ui .nav-menu a.active:not(.btn-sell) {
        color: var(--brand-primary, #047857);
        background: linear-gradient(90deg, #ecfdf5, #fff);
        box-shadow: inset 4px 0 0 var(--brand-accent, #10b981);
    }

    .tk-ui .nav-menu a:first-of-type:not(.btn-sell)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5L12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
    .tk-ui .nav-menu a[href*="tickets"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16a1 1 0 0 1 1 1v3a2 2 0 0 0 0 4v3a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-3a2 2 0 0 0 0-4V7a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 6v2M14 11v2M14 16v2'/%3E%3C/svg%3E"); }
    .tk-ui .nav-menu a[href*="events"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
    .tk-ui .nav-menu a[href*="about"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); }
    .tk-ui .nav-menu a[href*="support"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M4.9 4.9l4.3 4.3M14.8 14.8l4.3 4.3M14.8 9.2l4.3-4.3M9.2 14.8l-4.3 4.3'/%3E%3C/svg%3E"); }
    .tk-ui .nav-menu a[href*="account"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
    .tk-ui .nav-menu a[href*="login"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3'/%3E%3C/svg%3E"); }
    .tk-ui .nav-menu a[onclick*="Logout"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E"); }
    .tk-ui .nav-menu a[href*="cart"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E"); }

    .tk-ui .nav-menu .btn-sell {
        display: flex;
        justify-content: center;
        width: auto;
        margin: 1.1rem 1.4rem .4rem;
        padding: .9rem 1rem;
        border-bottom: 0;
        text-align: center;
    }

    .tk-ui .nav-ticket-foot {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .55rem;
        margin-top: auto;
        padding: 1.1rem 1.4rem 1.5rem;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: #94a3b8;
    }

    .tk-ui .nav-barcode {
        width: 180px;
        height: 12px;
        opacity: .28;
        background: repeating-linear-gradient(90deg, #0f172a 0 1px, #0000 1px 3px, #0f172a 3px 5px, #0000 5px 6px, #0f172a 6px 7px, #0000 7px 10px, #0f172a 10px 13px, #0000 13px 15px);
    }
}

/* =====================================================================
   8. Warning popups (logout, delete ...): a small ticket with a tear-off action stub
   ===================================================================== */
.tk-ui .modal { background: rgba(3, 26, 20, .58); -webkit-backdrop-filter: none; backdrop-filter: none; }

.tk-ui .modal-content {
    --tk-perf-y: -999px;   /* set by script to where the action stub begins */
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    background: #fff;
    padding: 0;
    -webkit-mask:
        radial-gradient(circle 10px at 0 var(--tk-perf-y), #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 10px at 100% var(--tk-perf-y), #0000 98%, #000) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle 10px at 0 var(--tk-perf-y), #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 10px at 100% var(--tk-perf-y), #0000 98%, #000) right / 51% 100% no-repeat;
    animation: tk-pop .22s cubic-bezier(.2, .8, .2, 1);
}

@keyframes tk-pop {
    from { opacity: 0; transform: translateY(10px) scale(.96); }
    to   { opacity: 1; transform: none; }
}

.tk-ui .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 1.05rem 1.3rem;
    border: 0;
    color: #fff;
    background:
        radial-gradient(120% 160% at 100% 0, rgba(255, 255, 255, .18), transparent 55%),
        linear-gradient(135deg, #b45309, #d97706);
}

.tk-ui .modal-header h2 { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: .01em; color: #fff; }

.tk-ui .modal-close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.tk-ui .modal-close:hover { background: rgba(255, 255, 255, .32); }
.tk-ui .modal-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.tk-ui .modal-body { padding: 0; }

.tk-ui .logout-warning,
.tk-ui .modal-body > p,
.tk-ui .modal-body > div:not(.modal-actions) { padding-left: 1.4rem; padding-right: 1.4rem; }

.tk-ui .logout-warning { padding-top: 1.3rem; padding-bottom: 1.2rem; text-align: center; }

.tk-ui .warning-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto .8rem;
    border-radius: 50%;
    color: #b45309;
    background: #fef3c7;
    box-shadow: 0 0 0 6px #fffbeb;
}

.tk-ui .warning-icon svg { width: 30px; height: 30px; }
.tk-ui .logout-warning p { margin: 0 0 .3rem; color: #0f172a; }
.tk-ui .logout-warning-text { color: #64748b !important; font-size: .92rem; }

.tk-ui .modal-actions {
    display: flex;
    gap: .75rem;
    justify-content: flex-end;
    margin: 0;
    padding: 1.15rem 1.4rem 1.3rem;
    border-top: 2px dashed #d5dde8;
    background: linear-gradient(180deg, #f8fbfa, #f1f7f5);
}

.tk-ui .modal-actions .btn { flex: 1 1 0; min-width: 0; margin: 0; }

@media (max-width: 420px) {
    .tk-ui .modal-actions { flex-direction: column-reverse; }
}

@media (prefers-reduced-motion: reduce) {
    .tk-ui .modal-content { animation: none; }
    .tk-ui .hamburger span, .tk-ui .nav-menu { transition: none; }
}

@media (max-width: 768px) { .tk-ui .nav-close { display: none; } } /* the hamburger already turns into the close button */

/* destructive confirm buttons read as serious */
.tk-ui .modal-actions .btn-danger { background: linear-gradient(135deg, #dc2626, #ef4444); color: #fff; }
.tk-ui .modal-actions .btn-danger:hover { background: linear-gradient(135deg, #b91c1c, #dc2626); }

/* =====================================================================
   9. Share: ticket-styled button and floating panel
   ===================================================================== */
.tk-ui .event-share-btn {
    background: rgba(15, 23, 42, .62);
    opacity: 1;
    outline: 1px dashed rgba(255, 255, 255, .7);
    outline-offset: -3px;
}

.tk-ui .event-share-btn:hover { background: var(--tk-brand); }
.tk-ui .event-share-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tk-ui .event-share-menu, .tk-ui .share-feedback { display: none !important; } /* older cached markup */

.tk-share-backdrop { position: fixed; inset: 0; z-index: 20999; background: transparent; }
.tk-share-backdrop[hidden], .tk-share[hidden] { display: none; }

.tk-share {
    position: fixed;
    z-index: 21000;
    width: 320px;
    max-width: calc(100vw - 24px);
    border-radius: 22px;
    box-shadow: 0 26px 60px -20px rgba(3, 26, 20, .6), 0 0 0 1px rgba(15, 23, 42, .05);
    animation: tk-pop .2s cubic-bezier(.2, .8, .2, 1);
}

.tk-share-ticket {
    --sy: 78px;                 /* where the perforation sits */
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    -webkit-mask:
        radial-gradient(circle 10px at 0 var(--sy), #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 10px at 100% var(--sy), #0000 98%, #000) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle 10px at 0 var(--sy), #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 10px at 100% var(--sy), #0000 98%, #000) right / 51% 100% no-repeat;
}

.tk-share-head {
    position: relative;
    height: var(--sy);
    padding: .95rem 3.2rem .8rem 1.25rem;
    color: #fff;
    overflow: hidden;
    background:
        radial-gradient(120% 160% at 100% 0, rgba(255, 255, 255, .2), transparent 55%),
        linear-gradient(135deg, #064e3b, var(--tk-brand) 55%, var(--tk-accent));
}

.tk-share-head::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 2px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 6px, transparent 6px 11px);
}

.tk-share-kicker { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #a7f3d0; }
.tk-share-title { display: block; margin-top: .3rem; font-size: 1.02rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tk-share-x {
    position: absolute;
    top: .8rem;
    right: .8rem;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    cursor: pointer;
}

.tk-share-x:hover { background: rgba(255, 255, 255, .32); }
.tk-share-x:focus-visible, .tk-share-tile:focus-visible, .tk-share-copy:focus-visible { outline: 2px solid var(--tk-accent); outline-offset: 2px; }

.tk-share-body { padding: 1rem 1rem .5rem; }
.tk-share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }

.tk-share-tile {
    display: grid;
    justify-items: center;
    gap: .4rem;
    padding: .7rem .25rem .6rem;
    border: 0;
    border-radius: 14px;
    background: #f5faf8;
    font: inherit;
    font-size: .74rem;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}

.tk-share-tile:hover { transform: translateY(-2px); background: #ecfdf5; }

.tk-share-ico {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: var(--c, #0f172a);
    color: #fff;
}

.tk-share-link {
    display: flex;
    gap: .4rem;
    align-items: center;
    margin-top: .8rem;
    padding: .3rem .3rem .3rem .7rem;
    border: 2px dashed #d5dde8;
    border-radius: 14px;
    background: #f8fbfa;
}

.tk-share-link input { flex: 1; min-width: 0; padding: .4rem 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: .8rem; color: #475569; text-overflow: ellipsis; }

.tk-share-copy {
    --n: 4px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .8rem;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--tk-brand), var(--tk-accent));
    color: #fff;
    font: inherit;
    font-size: .8rem;
    font-weight: 800;
    cursor: pointer;
    -webkit-mask:
        radial-gradient(circle var(--n) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--n) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle var(--n) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--n) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}

.tk-share-code {
    height: 10px;
    margin: .7rem 1rem 1rem;
    opacity: .22;
    background: repeating-linear-gradient(90deg, #0f172a 0 1px, #0000 1px 3px, #0f172a 3px 5px, #0000 5px 6px, #0f172a 6px 7px, #0000 7px 10px, #0f172a 10px 13px, #0000 13px 15px);
}

/* confirmation toast: a small dark ticket stub */
.tk-toast {
    --n: 6px;
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 21100;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.2rem;
    border-radius: 14px;
    background: #0f172a;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 16px);
    transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
    -webkit-mask:
        radial-gradient(circle var(--n) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--n) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
    mask:
        radial-gradient(circle var(--n) at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle var(--n) at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
    outline: 1px dashed rgba(255, 255, 255, .4);
    outline-offset: -4px;
}

.tk-toast svg { color: #34d399; flex: none; }
.tk-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* phones: the panel becomes a bottom sheet */
@media (max-width: 560px) {
    .tk-share-backdrop { background: rgba(3, 26, 20, .5); }
    .tk-share {
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: auto;
        max-width: none;
        border-radius: 22px 22px 0 0;
        animation: tk-sheet .26s cubic-bezier(.2, .8, .2, 1);
    }
    .tk-share-ticket { border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
    .tk-toast { bottom: 84px; }
}

@keyframes tk-sheet { from { transform: translateY(100%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .tk-share, .tk-toast, .tk-share-tile { animation: none; transition: none; }
}


/* =====================================================================
   10. Cart: each item is a ticket (poster = photo side, quantity = tear-off stub)
   ===================================================================== */
.tk-ui .cart-page .cart-panel {
    overflow: hidden;
    border: 0;
    box-shadow: var(--tk-shadow);
}

/* panel headers get a perforation with notches at the panel edges (panel padding is 1.75rem) */
.tk-ui .cart-page .cart-panel .panel-header {
    position: relative;
    border-bottom: 0;
    padding-bottom: 1.5rem;
}

.tk-ui .cart-page .cart-panel .panel-header::after {
    content: "";
    position: absolute;
    left: -1.75rem;
    right: -1.75rem;
    bottom: calc(var(--tk-n) * -1);
    height: calc(var(--tk-n) * 2);
    background:
        radial-gradient(circle var(--tk-n) at 0 50%, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
        radial-gradient(circle var(--tk-n) at 100% 50%, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
        repeating-linear-gradient(90deg, var(--tk-line) 0 6px, #0000 6px 11px) center / calc(100% - var(--tk-n) * 2 - 14px) 2px no-repeat;
}

.tk-ui .cart-page .cart-summary-panel { --tk-line: #475569; --tk-ring: #334155; }

.tk-ui .cart-page .cart-items-section {
    --tk-bg: #eef3f1;             /* soft tint so the notches read against the white panel */
    gap: .85rem;
    padding: .85rem;
    border-radius: 18px;
    background: var(--tk-bg);
}

.tk-ui .cart-page .cart-item-card {
    grid-template-columns: 132px minmax(0, 1fr) auto;
    gap: 0;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--tk-shadow);
}

.tk-ui .cart-page .cart-item-card:hover { border: 0; transform: translateY(-2px); box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 20px 30px -18px rgba(4, 120, 87, .45); }
.tk-ui .cart-page .cart-item-card.disabled { border: 0; opacity: .55; background: #f1f5f9; }

/* the poster becomes the full-height photo side of the ticket */
.tk-ui .cart-page .cart-item-image {
    position: relative;
    width: auto;
    height: auto;
    min-height: 132px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(160deg, #0b4f3c, #052e23);
}

.tk-ui .cart-page .cart-item-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tk-ui .cart-page .cart-item-details { padding: 1rem 1.15rem; align-self: center; min-width: 0; }

.tk-ui .cart-page .cart-item-controls {
    position: relative;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1rem 1.25rem 1rem 1.5rem;
    background: linear-gradient(90deg, rgba(16, 185, 129, .08), rgba(16, 185, 129, .02));
}

.tk-ui .cart-page .cart-item-controls::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--tk-n) * -1);
    width: calc(var(--tk-n) * 2);
    background:
        radial-gradient(circle var(--tk-n) at 50% 0, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
        radial-gradient(circle var(--tk-n) at 50% 100%, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
        repeating-linear-gradient(180deg, var(--tk-line) 0 6px, #0000 6px 11px) center / 2px calc(100% - var(--tk-n) * 2 - 14px) no-repeat;
}

@media (max-width: 640px) {
    .tk-ui .cart-page .cart-item-card { grid-template-columns: minmax(0, 1fr); }
    .tk-ui .cart-page .cart-item-image { min-height: 150px; }
    .tk-ui .cart-page .cart-item-controls { flex-direction: row; justify-content: space-between; padding: 1.1rem 1.1rem .9rem; background: linear-gradient(180deg, rgba(16, 185, 129, .08), rgba(16, 185, 129, .02)); }
    .tk-ui .cart-page .cart-item-controls::before {
        top: calc(var(--tk-n) * -1);
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: calc(var(--tk-n) * 2);
        background:
            radial-gradient(circle var(--tk-n) at 0 50%, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
            radial-gradient(circle var(--tk-n) at 100% 50%, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
            repeating-linear-gradient(90deg, var(--tk-line) 0 6px, #0000 6px 11px) center / calc(100% - var(--tk-n) * 2 - 14px) 2px no-repeat;
    }
    .tk-ui .cart-page .cart-panel .panel-header::after { left: -1.25rem; right: -1.25rem; }
}

/* account "My Events": the poster block carries the date badge like every other card */
.tk-ui .event-card-poster { position: relative; }

/* =====================================================================
   11. Event details: the whole hero is one big ticket
   ===================================================================== */
.tk-ui .event-details-container {
    position: relative;
    overflow: hidden;
    gap: 0;
    align-items: stretch;
    border-radius: 26px;
    background: #fff;
    box-shadow: var(--tk-shadow), 0 30px 60px -36px rgba(4, 120, 87, .35);
}

/* poster = the photo side of the ticket, full height */
.tk-ui .event-poster-section {
    position: relative;
    align-self: stretch;
    border-radius: 0;
    box-shadow: none;
    min-height: 340px;
    background: linear-gradient(160deg, #0b4f3c, #052e23);
}

.tk-ui .event-poster-section img,
.tk-ui .event-poster-section .event-poster { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; }

.tk-ui .event-poster-section::after {          /* soft shade so the badge and edge stay readable */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(3, 26, 20, .25), transparent 35%, transparent 65%, rgba(3, 26, 20, .35));
}

.tk-ui .tk-date--lg { top: 16px; left: 16px; z-index: 3; padding: .5rem .7rem .55rem; border-radius: 16px; }
.tk-ui .tk-date--lg span { font-size: .68rem; }
.tk-ui .tk-date--lg b { font-size: 1.9rem; margin-top: .15rem; }
.tk-ui .tk-date--lg em { display: block; margin-top: .2rem; font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #64748b; }

/* info side: sits on the stub, separated from the poster by a vertical perforation */
.tk-ui .event-info-section {
    position: relative;
    border-radius: 0;
    box-shadow: none;
    background: linear-gradient(90deg, rgba(16, 185, 129, .05), #fff 22%);
    padding: 1.6rem 1.75rem 1.4rem 2rem;
}

.tk-ui .event-info-section::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--tk-n) * -1);
    width: calc(var(--tk-n) * 2);
    z-index: 3;
    background:
        radial-gradient(circle var(--tk-n) at 50% 0, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
        radial-gradient(circle var(--tk-n) at 50% 100%, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
        repeating-linear-gradient(180deg, var(--tk-line) 0 6px, #0000 6px 11px) center / 2px calc(100% - var(--tk-n) * 2 - 14px) no-repeat;
}

/* faint barcode along the bottom of the ticket */
.tk-ui .event-info-section::after {
    content: "";
    display: block;
    height: 11px;
    margin-top: 1.1rem;
    opacity: .2;
    background: repeating-linear-gradient(90deg, #0f172a 0 1px, #0000 1px 3px, #0f172a 3px 5px, #0000 5px 6px, #0f172a 6px 7px, #0000 7px 10px, #0f172a 10px 13px, #0000 13px 15px);
}

.tk-ui .event-header h1 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: -.02em; }
.tk-ui .event-category { border: 1px dashed color-mix(in srgb, var(--tk-brand) 45%, transparent); }

@media (max-width: 760px) {
    /* stacked: poster on top, perforation runs across, info below */
    .tk-ui .event-poster-section { min-height: 240px; }
    .tk-ui .event-info-section { padding: 1.6rem 1.25rem 1.2rem; background: linear-gradient(180deg, rgba(16, 185, 129, .05), #fff 18%); }
    .tk-ui .event-info-section::before {
        top: calc(var(--tk-n) * -1);
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: calc(var(--tk-n) * 2);
        background:
            radial-gradient(circle var(--tk-n) at 0 50%, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
            radial-gradient(circle var(--tk-n) at 100% 50%, var(--tk-bg) calc(var(--tk-n) - 1px), var(--tk-ring) calc(var(--tk-n) - .5px), #0000 var(--tk-n)),
            repeating-linear-gradient(90deg, var(--tk-line) 0 6px, #0000 6px 11px) center / calc(100% - var(--tk-n) * 2 - 14px) 2px no-repeat;
    }
}