/* =========================
   XSPACE - GLOBAL STYLES
========================= */

:root {
    --bg: #08070d;
    --card: #12101b;
    --purple: #a855f7;
    --pink: #ec4899;
    --white: #ffffff;
    --muted: #a5a0b0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--white);
    font-family: 'Inter', sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

/* NAVIGATION */

.navbar {
    width: 100%;
    min-height: 85px;
    padding: 0 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ffffff12;
    background: #08070df2;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(15px);
}

.logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: 2px;
}

.logo span {
    color: var(--purple);
}

.nav-links {
    display: flex;
    gap: 35px;
}

.nav-links a {
    color: var(--muted);
    font-size: 14px;
    transition: .3s;
}

.nav-links a:hover {
    color: var(--pink);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    font-size: 14px;
}

.login-btn {
    color: #ddd;
}

.signup-btn {
    background: linear-gradient(120deg, var(--purple), var(--pink));
    padding: 12px 23px;
    border-radius: 7px;
    font-weight: 700;
}

.menu-btn {
    display: none;
    background: none;
    color: white;
    border: none;
    font-size: 26px;
    cursor: pointer;
}

/* HERO SECTION */

.hero {
    min-height: 680px;
    padding: 75px 8%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 55px;
    overflow: hidden;
}

.hero-tag,
.section-tag {
    color: #d8a7ff;
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 800;
}

.hero h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(43px, 5.5vw, 75px);
    line-height: 1.15;
    margin: 25px 0;
    letter-spacing: -2px;
}

.hero h1 span,
.section-heading h2 span,
.about-section h2 span {
    color: var(--pink);
    text-shadow: 0 0 25px #ec489955;
}

.hero-content > p {
    max-width: 450px;
    color: var(--muted);
    line-height: 1.9;
    font-size: 14px;
}

.hero-buttons {
    display: flex;
    gap: 15px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.primary-btn,
.secondary-btn {
    padding: 15px 24px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    transition: .3s;
}

.primary-btn {
    background: linear-gradient(120deg, var(--purple), var(--pink));
    box-shadow: 0 0 25px #a855f744;
}

.primary-btn:hover,
.signup-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 30px #ec489966;
}

.secondary-btn {
    border: 1px solid #ffffff35;
}

.secondary-btn:hover {
    border-color: var(--purple);
    color: #d8a7ff;
}

.hero-stats {
    display: flex;
    gap: 45px;
    margin-top: 60px;
}

.hero-stats h3 {
    color: #d8a7ff;
    font-size: 23px;
    margin-bottom: 7px;
}

.hero-stats span {
    color: var(--muted);
    font-size: 11px;
}

/* HERO IMAGE */

.hero-image {
    position: relative;
    min-width: 0;
}

.hero-image img {
    width: 100%;
    height: 470px;
    object-fit: cover;
    border-radius: 15px;
    position: relative;
    z-index: 1;
    border: 1px solid #a855f766;
}

.image-glow {
    position: absolute;
    inset: 10%;
    background: var(--purple);
    filter: blur(110px);
    opacity: .35;
}

.floating-card {
    position: absolute;
    bottom: 25px;
    left: -25px;
    z-index: 2;
    padding: 20px 25px;
    border: 1px solid #ffffff30;
    border-radius: 10px;
    background: #100d1deF;
    backdrop-filter: blur(15px);
}

.floating-card span {
    font-size: 10px;
    color: #d8a7ff;
    letter-spacing: 2px;
}

.floating-card h3 {
    margin-top: 10px;
    font-size: 16px;
}

/* EVENTS SECTION */

.events-section {
    padding: 90px 8%;
    background: #0c0a13;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 40px;
    gap: 20px;
}

.section-heading h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(25px, 3vw, 36px);
    margin-top: 15px;
}

.view-all {
    color: #d8a7ff;
    font-size: 13px;
}

.event-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.event-card {
    background: var(--card);
    border: 1px solid #ffffff12;
    border-radius: 12px;
    overflow: hidden;
    transition: .3s;
}

.event-card:hover {
    transform: translateY(-8px);
    border-color: var(--purple);
    box-shadow: 0 10px 35px #a855f722;
}

.event-card img {
    width: 100%;
    height: 210px;
    object-fit: cover;
}

.event-info {
    padding: 22px;
}

.event-category {
    color: #d8a7ff;
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 800;
}

.event-info h3 {
    font-size: 19px;
    margin: 13px 0;
}

.event-info p {
    font-size: 12px;
    color: var(--muted);
}

.event-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    gap: 10px;
    font-size: 12px;
}

.event-bottom strong {
    color: #fff;
}

.event-bottom a {
    color: #d8a7ff;
    font-weight: 700;
}

/* ABOUT SECTION */

.about-section {
    padding: 100px 8%;
    text-align: center;
}

.about-section h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(25px, 4vw, 43px);
    margin: 25px 0;
    line-height: 1.5;
}

.about-section p {
    max-width: 600px;
    margin: auto;
    color: var(--muted);
    font-size: 14px;
    line-height: 2;
}

/* FOOTER */

footer {
    border-top: 1px solid #ffffff15;
    padding: 35px 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

footer p {
    font-size: 11px;
    color: var(--muted);
}

/* RESPONSIVE DESIGN */

@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        padding-top: 60px;
    }

    .hero-image img {
        height: 400px;
    }

    .event-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .navbar {
        padding: 0 5%;
        min-height: 70px;
    }

    .logo {
        font-size: 22px;
    }

    .menu-btn {
        display: block;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        padding: 25px;
        flex-direction: column;
        gap: 25px;
        background: #100d19;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-actions {
        display: none;
    }

    .hero {
        padding: 55px 5%;
        gap: 40px;
    }

    .hero h1 {
        font-size: 43px;
    }

    .hero-stats {
        gap: 22px;
    }

    .hero-image img {
        height: 330px;
    }

    .floating-card {
        left: 10px;
        bottom: 15px;
    }

    .events-section {
        padding: 65px 5%;
    }

    .section-heading {
        align-items: start;
        flex-direction: column;
    }

    .event-grid {
        grid-template-columns: 1fr;
    }

    .about-section {
        padding: 70px 5%;
    }

    footer {
        flex-direction: column;
        text-align: center;
    }
}

/* =========================
   CONCERT SEARCH & FILTER
========================= */

.search-filter {
    margin-bottom: 35px;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 650px;
    padding: 17px 22px;
    background: #15121f;
    border: 1px solid #ffffff20;
    border-radius: 9px;
    transition: .3s;
}

.search-box:focus-within {
    border-color: var(--purple);
    box-shadow: 0 0 20px #a855f733;
}

.search-box span {
    color: var(--pink);
    font-size: 25px;
}

.search-box input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-family: inherit;
    font-size: 14px;
}

.search-box input::placeholder {
    color: #85808f;
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 35px;
    margin-bottom: 18px;
    gap: 15px;
}

.filter-header h3 {
    font-size: 16px;
}

.clear-btn {
    background: transparent;
    border: none;
    color: var(--pink);
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
}

.category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.filter-btn {
    padding: 12px 20px;
    background: #15121f;
    border: 1px solid #ffffff20;
    color: #aaa4b6;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    transition: .3s;
}

.filter-btn:hover {
    border-color: var(--purple);
    color: white;
}

.filter-btn.active {
    background: linear-gradient(
        120deg,
        var(--purple),
        var(--pink)
    );
    color: white;
    border-color: transparent;
    box-shadow: 0 0 18px #a855f744;
}

.results-count {
    color: var(--muted);
    font-size: 12px;
    margin-top: 20px;
}

.event-card.hidden {
    display: none;
}

.no-results {
    display: none;
    text-align: center;
    padding: 55px 20px;
    border: 1px dashed #ffffff30;
    border-radius: 10px;
    color: var(--muted);
}

.no-results.show {
    display: block;
}

.no-results h3 {
    color: white;
    margin-bottom: 10px;
}

@media (max-width: 600px) {
    .search-box {
        padding: 15px;
    }

    .filter-btn {
        padding: 10px 13px;
        font-size: 11px;
    }

    .filter-header h3 {
        font-size: 14px;
    }
}

/* =========================
   CONCERT DETAILS PAGE
========================= */

.details-page {
    padding: 50px 8% 100px;
    min-height: 80vh;
}

.back-link {
    display: inline-block;
    color: #d8a7ff;
    margin-bottom: 35px;
    font-size: 14px;
}

.details-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    align-items: start;
}

.details-poster img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #a855f766;
}

.details-info h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(28px, 4vw, 42px);
    margin: 20px 0;
    line-height: 1.4;
}

.details-info h1 span {
    color: var(--pink);
}

.details-description {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.9;
}

.event-meta {
    margin: 30px 0;
    padding: 22px;
    background: var(--card);
    border: 1px solid #ffffff15;
    border-radius: 10px;
}

.event-meta p {
    margin: 13px 0;
    font-size: 13px;
    color: #ddd;
}

.ticket-section h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    margin-bottom: 20px;
}

.ticket-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding: 20px;
    margin-bottom: 12px;
    background: var(--card);
    border: 1px solid #ffffff20;
    border-radius: 8px;
    transition: .3s;
}

.ticket-option:hover {
    border-color: var(--purple);
    box-shadow: 0 0 15px #a855f722;
}

.ticket-option h3 {
    font-size: 15px;
    margin-bottom: 7px;
}

.ticket-option p {
    color: var(--muted);
    font-size: 11px;
}

.ticket-option strong {
    color: #d8a7ff;
    font-size: 14px;
}

.book-ticket-btn {
    width: 100%;
    padding: 17px;
    margin-top: 15px;
    background: linear-gradient(120deg, var(--purple), var(--pink));
    color: white;
    border: none;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s;
}

.book-ticket-btn:hover {
    box-shadow: 0 0 25px #ec489966;
    transform: translateY(-3px);
}

@media (max-width: 800px) {
    .details-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .details-poster img {
        height: 350px;
    }

    .details-page {
        padding: 35px 5% 70px;
    }
}

/* =========================
   XSPACE TICKET BOOKING
========================= */

.ticket-subtitle {
    color: var(--muted);
    font-size: 12px;
    margin-top: -10px;
    margin-bottom: 22px;
}

.ticket-option {
    cursor: pointer;
    position: relative;
    border: 1px solid #ffffff20;
}

.ticket-option.selected {
    border: 1px solid var(--purple);
    background: #a855f718;
    box-shadow: 0 0 18px #a855f722;
}

.ticket-option.selected::after {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 12px;
    color: var(--pink);
    font-size: 13px;
}

.quantity-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 28px;
    padding: 20px;
    background: var(--card);
    border: 1px solid #ffffff18;
    border-radius: 9px;
}

.quantity-section h3 {
    font-size: 14px;
    margin-bottom: 7px;
}

.quantity-section p {
    color: var(--muted);
    font-size: 11px;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 17px;
}

.quantity-controls button {
    width: 34px;
    height: 34px;
    background: #21172e;
    border: 1px solid var(--purple);
    color: white;
    font-size: 21px;
    border-radius: 6px;
    cursor: pointer;
    transition: .3s;
}

.quantity-controls button:hover {
    background: var(--purple);
}

.quantity-controls button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.quantity-controls span {
    font-size: 16px;
    font-weight: 700;
    min-width: 15px;
    text-align: center;
}

.booking-summary {
    margin-top: 25px;
    padding: 23px;
    background: #15101f;
    border: 1px solid #a855f755;
    border-radius: 10px;
}

.booking-summary h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 15px;
    margin-bottom: 22px;
    color: #d8a7ff;
}

.summary-row,
.summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 17px;
    font-size: 12px;
}

.summary-row span {
    color: var(--muted);
}

.summary-row strong {
    color: white;
}

.summary-total {
    border-top: 1px solid #ffffff25;
    padding-top: 20px;
    margin: 0;
    font-size: 14px;
}

.summary-total strong {
    color: var(--pink);
    font-size: 19px;
}

.book-ticket-btn {
    margin-top: 22px;
}

.secure-note {
    color: #a78bfa;
    font-size: 11px;
    text-align: center;
    margin-top: 17px;
}

.checkout-message {
    display: none;
    padding: 15px;
    margin-top: 15px;
    border-radius: 7px;
    background: #a855f718;
    border: 1px solid var(--purple);
    color: #d8a7ff;
    font-size: 12px;
    line-height: 1.7;
}

.checkout-message.show {
    display: block;
}

/* =========================
   XSPACE CHECKOUT PAGE
========================= */

.checkout-page {
    width: 84%;
    max-width: 1250px;
    margin: 65px auto;
    min-height: 65vh;
}

.checkout-heading {
    margin: 35px 0;
}

.checkout-heading h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(25px, 4vw, 38px);
    margin: 12px 0;
}

.checkout-heading h1 span {
    color: var(--pink);
}

.checkout-heading p {
    color: var(--muted);
    font-size: 13px;
}

.checkout-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 30px;
    align-items: start;
}

.checkout-form,
.checkout-summary {
    padding: 30px;
    background: var(--card);
    border: 1px solid #ffffff20;
    border-radius: 12px;
}

.checkout-form h2,
.checkout-summary h2 {
    font-size: 19px;
    margin-bottom: 10px;
}

.form-subtitle {
    color: var(--muted);
    font-size: 12px;
    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 9px;
}

.form-group input {
    width: 100%;
    padding: 14px;
    color: white;
    background: #0c0913;
    border: 1px solid #ffffff25;
    border-radius: 7px;
    outline: none;
    font-family: inherit;
    font-size: 13px;
}

.form-group input:focus {
    border-color: var(--purple);
    box-shadow: 0 0 10px #a855f733;
}

.form-group input::placeholder {
    color: #777184;
}

.payment-heading {
    margin: 30px 0 18px;
}

.payment-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    margin-bottom: 12px;
    background: #0c0913;
    border: 1px solid #ffffff20;
    border-radius: 8px;
    cursor: pointer;
}

.payment-option:has(input:checked) {
    border-color: var(--purple);
    background: #a855f718;
}

.payment-option input {
    accent-color: var(--pink);
}

.payment-option span {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.payment-option strong {
    font-size: 13px;
}

.payment-option small {
    color: var(--muted);
    font-size: 11px;
}

.checkout-form .book-ticket-btn {
    width: 100%;
    margin-top: 20px;
}

.checkout-summary {
    position: sticky;
    top: 25px;
}

.order-event {
    padding: 22px 0;
    margin: 15px 0;
    border-bottom: 1px solid #ffffff20;
}

.order-event h3 {
    font-size: 18px;
    margin: 12px 0;
}

.order-event p {
    color: var(--muted);
    font-size: 12px;
    margin: 9px 0;
}

.order-details {
    padding-top: 10px;
}

.order-details .summary-row {
    margin-bottom: 22px;
}

.order-note {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.7;
    margin-top: 22px;
}

#bookingMessage {
    margin-top: 25px;
}

@media (max-width: 800px) {

    .checkout-page {
        width: 92%;
        margin: 35px auto;
    }

    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-summary {
        position: static;
    }

    .checkout-form,
    .checkout-summary {
        padding: 22px;
    }

}

/* =========================
   XSPACE CONFIRMATION PAGE
========================= */

.confirmation-page {
    width: 90%;
    max-width: 950px;
    margin: 65px auto;
    min-height: 65vh;
}

.success-heading {
    text-align: center;
    margin-bottom: 40px;
}

.success-icon {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #a855f722;
    border: 2px solid #a855f7;
    color: #d8a7ff;
    font-size: 35px;
}

.success-heading h1 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(25px, 4vw, 38px);
    margin: 15px 0;
}

.success-heading h1 span {
    color: var(--pink);
}

.success-heading p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
}

.digital-ticket {
    background: #15101f;
    border: 1px solid #a855f777;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 0 35px #a855f71a;
}

.ticket-top {
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    background: linear-gradient(
        120deg,
        #25123d,
        #160e24,
        #30102c
    );
}

.ticket-label {
    color: #d8a7ff;
    font-size: 10px;
    letter-spacing: 3px;
}

.ticket-top h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(18px, 3vw, 27px);
    margin: 15px 0;
}

.ticket-top h2 span {
    color: var(--pink);
}

.ticket-top p {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 1px;
}

.ticket-logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 45px;
    font-weight: 900;
    color: var(--pink);
}

.ticket-divider {
    border-top: 1px dashed #a855f777;
    margin: 0 30px;
}

.ticket-information {
    padding: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.ticket-information div,
.ticket-bottom div {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.ticket-information span,
.ticket-bottom span {
    color: var(--muted);
    font-size: 10px;
    letter-spacing: 1px;
}

.ticket-information strong {
    color: white;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.ticket-qr-section {
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 30px;
}

.qr-wrapper {
    padding: 12px;
    background: white;
    border-radius: 8px;
    flex-shrink: 0;
}

.qr-details h3 {
    color: #d8a7ff;
    font-size: 17px;
    margin-bottom: 10px;
}

.qr-details p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}

.qr-details span {
    display: block;
    margin-top: 12px;
    color: var(--pink);
    font-size: 12px;
    font-weight: 700;
}

.ticket-bottom {
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    background: #0e0a16;
}

.ticket-bottom strong {
    color: var(--pink);
    font-size: 16px;
}

.confirmation-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.confirmation-actions .book-ticket-btn {
    flex: 1;
    margin: 0;
}

.home-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 25px;
    color: white;
    text-decoration: none;
    border: 1px solid var(--purple);
    border-radius: 7px;
    font-size: 12px;
    transition: .3s;
}

.home-btn:hover {
    background: var(--purple);
}

.confirmation-note {
    text-align: center;
    color: var(--muted);
    font-size: 11px;
    margin-top: 25px;
    line-height: 1.7;
}

@media (max-width: 600px) {

    .confirmation-page {
        width: 92%;
        margin: 40px auto;
    }

    .ticket-information {
        grid-template-columns: 1fr 1fr;
        padding: 20px;
        gap: 22px 12px;
    }

    .ticket-top,
    .ticket-qr-section,
    .ticket-bottom {
        padding: 20px;
    }

    .ticket-qr-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .confirmation-actions {
        flex-direction: column;
    }

}

@media print {

    body {
        background: white !important;
        color: black !important;
    }

    .navbar,
    footer,
    .success-heading,
    .confirmation-actions,
    .confirmation-note {
        display: none !important;
    }

    .confirmation-page {
        width: 100%;
        margin: 0;
    }

    .digital-ticket {
        box-shadow: none;
        border: 2px solid #222;
        background: white;
        color: black;
    }

    .ticket-top {
        background: #eee !important;
    }

    .ticket-information strong,
    .ticket-top h2 {
        color: black;
    }

    .ticket-bottom {
        background: #eee;
    }

    .ticket-information span,
    .ticket-bottom span,
    .qr-details p {
        color: #444;
    }

}


/* XSPACE ONE-QR EVENT SCANNER */
.scanner-page { width: 90%; max-width: 760px; margin: 55px auto; min-height: 65vh; }
.scanner-panel { padding: 25px; background: var(--card, #15101f); border: 1px solid #a855f777; border-radius: 14px; }
#reader { width: 100%; max-width: 520px; margin: 0 auto; overflow: hidden; border-radius: 10px; }
#reader video { border-radius: 10px; }
.scanner-help { color: var(--muted); text-align: center; font-size: 12px; margin: 18px 0 25px; }
.scanner-manual { display: grid; gap: 10px; margin-top: 20px; }
.scanner-manual label { font-size: 13px; font-weight: 600; }
.scanner-manual input { width: 100%; box-sizing: border-box; padding: 13px; background: #0c0913; color: white; border: 1px solid #ffffff30; border-radius: 7px; }
.scanner-manual .book-ticket-btn { margin: 0; }
.scan-result { display: grid; gap: 8px; margin-top: 20px; padding: 18px; border: 1px solid #a855f7; border-radius: 9px; color: #e9d5ff; text-align: center; font-size: 13px; }
.scan-result strong { font-size: 18px; }
.scan-valid { border-color: #22c55e; background: #22c55e15; color: #86efac; }
.scan-invalid { border-color: #ef4444; background: #ef444415; color: #fca5a5; }


/* ===== CINEMATIC XSPACE HOMEPAGE MOTION UPGRADE ===== */
.cinematic-hero{position:relative;isolation:isolate;overflow:hidden;min-height:690px;background:radial-gradient(ellipse at 78% 45%,#51207855 0%,transparent 42%),linear-gradient(115deg,#08070d 12%,#100b1b 65%,#090710);}
.cinematic-hero:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.16;background-image:linear-gradient(#ffffff12 1px,transparent 1px),linear-gradient(90deg,#ffffff12 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(90deg,black,transparent 90%);}
.hero-orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(2px);pointer-events:none;animation:orbFloat 9s ease-in-out infinite alternate;}
.orb-one{width:360px;height:360px;right:22%;top:8%;background:#a855f71c;box-shadow:0 0 100px #a855f733;}
.orb-two{width:220px;height:220px;right:4%;bottom:0;background:#ec48991c;animation-delay:-4s;}
.hero-content{position:relative;z-index:2;animation:heroEnter 1s cubic-bezier(.2,.8,.2,1) both;}
.hero-tag{display:inline-flex;align-items:center;gap:10px;letter-spacing:2.4px;}
.live-dot{width:7px;height:7px;border-radius:50%;background:#ff4f9a;box-shadow:0 0 12px #ff4f9a;animation:livePulse 1.5s infinite;}
.hero-content h1{letter-spacing:-2px;text-shadow:0 8px 55px #0009;}
.hero-content h1 span{background:linear-gradient(100deg,#d9a4ff 0%,#a855f7 45%,#ff65b5 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradientFlow 5s linear infinite;}
.hero-image{position:relative;transform:perspective(1000px) rotateY(-5deg);animation:visualEnter 1.2s .15s both;}
.hero-image:after{content:"";position:absolute;inset:0;border:1px solid #ffffff38;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 70px #08070d88,0 25px 90px #0009;}
.hero-image img{filter:saturate(1.18) contrast(1.08);transition:transform 1.1s cubic-bezier(.2,.8,.2,1),filter .6s;}
.hero-image:hover img{transform:scale(1.055);filter:saturate(1.4) contrast(1.1);}
.visual-frame-label{position:absolute;z-index:2;top:18px;left:18px;padding:9px 12px;background:#08070dbb;border:1px solid #ffffff35;border-radius:3px;font-size:9px;letter-spacing:2px;color:#fff;backdrop-filter:blur(12px);}
.floating-card{animation:cardFloat 5s ease-in-out infinite;backdrop-filter:blur(18px);}
.primary-btn,.signup-btn{box-shadow:0 8px 28px #a855f733;transition:transform .3s,box-shadow .3s,filter .3s;}
.primary-btn:hover,.signup-btn:hover{transform:translateY(-4px);box-shadow:0 13px 38px #a855f766;filter:brightness(1.12);}
.secondary-btn{transition:background .3s,transform .3s;}.secondary-btn:hover{transform:translateY(-3px);background:#ffffff12;}
.ticker{overflow:hidden;border-top:1px solid #ffffff12;border-bottom:1px solid #ffffff12;background:#a855f70b;padding:17px 0;white-space:nowrap;}
.ticker-track{display:flex;align-items:center;justify-content:space-around;gap:38px;width:max-content;min-width:200%;animation:tickerMove 32s linear infinite;color:#d9c9e9;font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:3px;}
.ticker-track b{color:#ec4899;font-size:17px;}
.event-card{transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s;will-change:transform;}
.event-card:hover{transform:translateY(-10px);border-color:#a855f788;box-shadow:0 22px 55px #0008,0 0 28px #a855f71c;}
.event-card img{transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s;}.event-card:hover img{transform:scale(1.07);filter:saturate(1.25);}
.reveal-section{opacity:0;transform:translateY(35px);transition:opacity .8s ease,transform .8s ease;}.reveal-section.is-visible{opacity:1;transform:translateY(0);}
.navbar{transition:background .3s,box-shadow .3s;}.navbar:has(+ main){}
@keyframes heroEnter{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes visualEnter{from{opacity:0;transform:perspective(1000px) rotateY(-9deg) translateX(35px)}to{opacity:1;transform:perspective(1000px) rotateY(-5deg) translateX(0)}}
@keyframes orbFloat{from{transform:translate3d(-15px,-10px,0) scale(.94)}to{transform:translate3d(25px,25px,0) scale(1.08)}}
@keyframes cardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 12px #ff4f9a}50%{opacity:.45;box-shadow:0 0 3px #ff4f9a}}
@keyframes gradientFlow{to{background-position:200% center}}
@keyframes tickerMove{to{transform:translateX(-50%)}}
@media(max-width:900px){.cinematic-hero{min-height:auto}.hero-image{transform:none;animation:heroEnter 1.2s .15s both}.hero-image:hover img{transform:scale(1.025)}.ticker-track{min-width:300%;}}
@media(max-width:600px){.cinematic-hero:before{background-size:45px 45px}.orb-one{width:220px;height:220px;right:-30px}.orb-two{width:150px;height:150px}.hero-content h1{letter-spacing:-1px}.visual-frame-label{font-size:8px}.ticker{padding:13px 0}.ticker-track{font-size:9px;letter-spacing:2px;gap:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.reveal-section{opacity:1;transform:none}}


/* XSPACE OPTIONAL CUSTOMER ACCOUNT */
.account-body{min-height:100vh;background:radial-gradient(ellipse at 15% 20%,#68239a33,transparent 38%),#08070d;color:#fff}.account-wrap{width:min(1120px,90%);margin:70px auto 90px;display:grid;grid-template-columns:1.05fr .95fr;min-height:610px;border:1px solid #ffffff1b;background:#100d18;box-shadow:0 30px 100px #0008}.account-art{position:relative;overflow:hidden;padding:clamp(35px,6vw,75px);display:flex;flex-direction:column;justify-content:center;background:linear-gradient(145deg,#1b1028,#09080e 72%)}.account-art h1{font:800 clamp(42px,6vw,76px)/1.03 'Orbitron',sans-serif;letter-spacing:-3px;margin:25px 0}.account-art h1 span{color:#c084fc;text-shadow:0 0 35px #a855f755}.account-art p{max-width:390px;color:#bcb4c8;line-height:1.8}.account-note{position:absolute;bottom:24px;left:clamp(35px,6vw,75px);font-size:10px;letter-spacing:3px;color:#a78bb9}.account-orbit{position:absolute;width:300px;height:300px;border:1px solid #a855f744;border-radius:50%;right:-120px;top:10%;box-shadow:0 0 80px #a855f722,inset 0 0 80px #a855f711;animation:cardFloat 7s ease-in-out infinite}.account-panel{padding:clamp(28px,5vw,62px);display:flex;flex-direction:column;justify-content:center;background:#0e0c14}.account-tabs{display:flex;gap:25px;border-bottom:1px solid #ffffff20;margin-bottom:34px}.account-tab{background:none;border:0;color:#82798d;padding:0 0 15px;font-weight:800;letter-spacing:1.5px;cursor:pointer}.account-tab.active{color:#fff;border-bottom:2px solid #c084fc}.account-form h2{font:700 29px 'Orbitron',sans-serif;margin:0 0 9px}.account-form>p{color:#a9a1b4;margin:0 0 28px;font-size:13px}.account-form label{display:grid;gap:9px;color:#d7d0df;font-size:12px;font-weight:700;margin:18px 0}.account-form input{box-sizing:border-box;width:100%;padding:15px 14px;border:1px solid #ffffff25;background:#17131f;color:#fff;border-radius:5px;outline:none}.account-form input:focus{border-color:#bd75ff;box-shadow:0 0 0 3px #a855f71c}.account-submit{width:100%;border:0;cursor:pointer;padding:16px;margin-top:10px}.account-submit:disabled{opacity:.65;cursor:wait}.hidden{display:none!important}.account-message{min-height:22px;margin-top:18px;font-size:13px}.account-message.success{color:#86efac}.account-message.error{color:#fca5a5}.guest-note{border-top:1px solid #ffffff18;margin-top:25px;padding-top:20px;color:#a9a1b4;font-size:12px}.guest-note a{color:#d8a7ff;text-decoration:none}.account-body .navbar{position:relative}.account-body .navbar .secondary-btn{padding:10px 14px;border:1px solid #ffffff30;color:#fff;text-decoration:none;border-radius:4px;font-size:12px}@media(max-width:800px){.account-wrap{grid-template-columns:1fr;margin:30px auto 60px}.account-art{min-height:300px}.account-panel{padding:35px 25px}.account-art h1{font-size:46px}}