/* ── EvntsApp Event Page – Frontend Styles (theme-isolated) ─────────────── */

/* ── Wrapper resets colour inheritance from dark themes ─────────────────── */
.evntsapp-event-sections,
.evntsapp-event-sections * {
    box-sizing: border-box;
}
.evntsapp-event-sections {
    margin-top: 2rem;
    color: #e5e7eb !important;   /* default light text — works on dark bg   */
}

/* ── Shared section chrome ───────────────────────────────────────────────── */
.evntsapp-section {
    margin-bottom: 2.5rem;
}
.evntsapp-section-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    color: #a78bfa !important;   /* purple accent — readable on dark bg      */
    margin: 0 0 1rem !important;
    padding-bottom: .5rem !important;
    border-bottom: 1px solid rgba(167,139,250,.3) !important;
}

/* ── About / Organizer / Venue ───────────────────────────────────────────── */
.evntsapp-about-text p {
    margin: .5em 0 !important;
    line-height: 1.75 !important;
    color: #d1d5db !important;
}
.evntsapp-organizer-name,
.evntsapp-venue-name {
    font-weight: 600 !important;
    margin: 0 0 .25rem !important;
    color: #f3f4f6 !important;
}
.evntsapp-venue-location {
    color: #9ca3af !important;
    font-size: .9rem !important;
    margin: 0 !important;
}

/* ── Facilities chips ────────────────────────────────────────────────────── */
.evntsapp-facilities-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .5rem .65rem !important;
}
.evntsapp-facility-item {
    display: flex !important;
    align-items: center !important;
    gap: .35rem !important;
    background: rgba(109,40,217,.18) !important;
    border: 1px solid rgba(109,40,217,.35) !important;
    border-radius: 6px !important;
    padding: .35rem .75rem !important;
    font-size: .83rem !important;
    color: #c4b5fd !important;
}
.evntsapp-facility-icon { font-size: 1rem; }

/* ── Ticket section container ────────────────────────────────────────────── */
.evntsapp-tickets-section {
    /* keep inheriting dark bg from theme */
}
.evntsapp-ticket-types {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

/* ── Individual ticket-type card ─────────────────────────────────────────── */
.evntsapp-tt-card {
    background: #1e1b2e !important;          /* dark-purple card bg             */
    border: 1px solid rgba(109,40,217,.4) !important;
    border-radius: 14px !important;
    padding: 1.25rem 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: .75rem !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.4) !important;
    transition: box-shadow .22s, border-color .22s !important;
}
.evntsapp-tt-card:hover {
    box-shadow: 0 6px 28px rgba(109,40,217,.35) !important;
    border-color: rgba(109,40,217,.7) !important;
}
.evntsapp-tt-card--sold-out {
    opacity: .55 !important;
}

/* Card header */
.evntsapp-tt-card__header {
    display: flex !important;
    align-items: center !important;
    gap: .6rem !important;
    flex-wrap: wrap !important;
}
.evntsapp-tt-card__name {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #f9fafb !important;
}
.evntsapp-tt-card__badge {
    display: inline-block !important;
    padding: .2rem .7rem !important;
    font-size: .7rem !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    background: rgba(109,40,217,.35) !important;
    color: #c4b5fd !important;
    border: 1px solid rgba(167,139,250,.4) !important;
}

/* Card meta */
.evntsapp-tt-card__meta {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    font-size: .83rem !important;
    color: #9ca3af !important;
    flex-wrap: wrap !important;
}
.evntsapp-tt-card__gate {
    display: flex !important;
    align-items: center !important;
    gap: .3rem !important;
    color: #9ca3af !important;
}
.evntsapp-tt-card__avail {
    font-weight: 600 !important;
    color: #34d399 !important;
}
.evntsapp-tt-card__avail--none {
    color: #f87171 !important;
}

/* Card footer */
.evntsapp-tt-card__footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
    padding-top: .5rem !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
}
.evntsapp-tt-card__price {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #f9fafb !important;
    line-height: 1 !important;
}
.evntsapp-tt-card__price small {
    font-size: .75rem !important;
    font-weight: 500 !important;
    color: #9ca3af !important;
    margin-left: .2rem !important;
    vertical-align: middle !important;
}

/* ── Booking form ─────────────────────────────────────────────────────────── */
.evntsapp-tt-form {
    display: flex !important;
    align-items: center !important;
    gap: .6rem !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: 0 !important;
}
.evntsapp-tt-form__qty-wrap {
    display: flex !important;
    align-items: center !important;
}
.evntsapp-tt-form__qty {
    width: 68px !important;
    height: 44px !important;
    padding: 0 .5rem !important;
    border: 1px solid rgba(109,40,217,.5) !important;
    border-radius: 8px !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    background: rgba(109,40,217,.15) !important;
    color: #f9fafb !important;
    outline: none !important;
    -moz-appearance: textfield !important;
}
.evntsapp-tt-form__qty::-webkit-inner-spin-button,
.evntsapp-tt-form__qty::-webkit-outer-spin-button { opacity: 1; }
.evntsapp-tt-form__qty:focus {
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 3px rgba(167,139,250,.25) !important;
}

/* ─── THE BOOK NOW BUTTON ──────────────────────────────────────────────── */
.evntsapp-tt-form__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    padding: 0 1.6rem !important;
    background: linear-gradient(135deg,#7c3aed,#5b21b6) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: .95rem !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 14px rgba(109,40,217,.45) !important;
    transition: filter .2s, box-shadow .2s !important;
}
.evntsapp-tt-form__btn:hover,
.evntsapp-tt-form__btn:focus {
    filter: brightness(1.12) !important;
    box-shadow: 0 6px 20px rgba(109,40,217,.65) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}
.evntsapp-tt-form__btn:active {
    filter: brightness(.95) !important;
}
.evntsapp-tt-form__btn--disabled,
.evntsapp-tt-form__btn[disabled] {
    background: rgba(255,255,255,.1) !important;
    color: #6b7280 !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    filter: none !important;
}
.evntsapp-tt-unavailable {
    font-size: .875rem !important;
    color: #6b7280 !important;
}

/* ── Seating plan button ─────────────────────────────────────────────────── */
.evntsapp-btn-seating {
    display: inline-flex !important;
    align-items: center !important;
    gap: .4rem !important;
    padding: .6rem 1.4rem !important;
    background: linear-gradient(135deg,#1d4ed8,#1e40af) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(30,64,175,.4) !important;
    transition: filter .2s !important;
}
.evntsapp-btn-seating:hover { filter: brightness(1.1) !important; }

/* ── Seating modal ───────────────────────────────────────────────────────── */
.evntsapp-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.evntsapp-modal-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(0,0,0,.8) !important;
}
.evntsapp-modal-content {
    position: relative !important;
    z-index: 1 !important;
    background: #1e1b2e !important;
    border: 1px solid rgba(109,40,217,.4) !important;
    border-radius: 14px !important;
    padding: 1.5rem !important;
    max-width: 92vw !important;
    max-height: 90vh !important;
    overflow: auto !important;
}
.evntsapp-modal-content img {
    display: block !important;
    max-width: 100% !important;
    max-height: 80vh !important;
    border-radius: 8px !important;
}
.evntsapp-modal-close {
    position: absolute !important;
    top: .6rem !important;
    right: .9rem !important;
    background: none !important;
    border: none !important;
    font-size: 1.75rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    color: #9ca3af !important;
    padding: 0 !important;
}
.evntsapp-modal-close:hover { color: #f9fafb !important; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .evntsapp-tt-card { padding: 1rem !important; }
    .evntsapp-tt-card__footer {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .evntsapp-tt-form {
        width: 100% !important;
    }
    .evntsapp-tt-form__btn {
        flex: 1 !important;
        height: 48px !important;
    }
}