/* Extracted verbatim from https://tickify.live/event/here-i-m/ inline <style> blocks.
   Do not hand-edit: this is the site's own event-detail CSS, kept byte-identical
   so the donation page renders exactly like the real event page. */

    :root {
        --theme-color: #a9dd36;
        --gradient-second: #1B4547FF;
        
          /** Dark theme primary colors */
        --color-primary-a0: #97de00;
        --color-primary-a10: #a5e23b;
        --color-primary-a20: #b2e659;
        --color-primary-a30: #beea73;
        --color-primary-a40: #caed8b;
        --color-primary-a50: #d6f1a3;
        
        /** Dark theme surface colors */
        --color-surface-a0: #0f0f0f;
        --color-surface-a10: #262626;
        --color-surface-a20: #3d3d3d;
        --color-surface-a30: #555555;
        --color-surface-a40: #6f6f6f;
        --color-surface-a50: #8a8a8a;
        
        /** Dark theme mixed surface colors */
        --color-surface-mixed-a0: #1d2115;
        --color-surface-mixed-a10: #32362a;
        --color-surface-mixed-a20: #484c41;
        --color-surface-mixed-a30: #606359;
        --color-surface-mixed-a40: #787b73;
        --color-surface-mixed-a50: #92948d;
    }

        :root {
            --event-background: #f7f7f8;
            --event-surface: #ffffff;
            --event-text: #171717;
            --event-muted: #6b7280;
            --event-border: #e5e7eb;
            --event-dark: #111111;
            --event-radius: 16px;
            --event-shadow: 0 12px 35px rgba(17, 24, 39, 0.06);
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background: var(--event-background);
        }

        .event-page {
            padding-bottom: 70px;
            color: var(--event-text);
        }

        #tickets {
            scroll-margin-top: 100px;
        }

        /* --------------------------------------------------------------
           Banner
        -------------------------------------------------------------- */

        .event-hero {
            position: relative;
            overflow: hidden;
            padding: 16px 0;
            background: #101010;
        }

        .event-hero-blur {
            position: absolute;
            inset: -35px;
            background-position: center;
            background-size: cover;
            filter: blur(35px);
            opacity: 0.5;
            transform: scale(1.1);
            pointer-events: none;
        }

        .event-hero::after {
            position: absolute;
            inset: 0;
            content: "";
            background: rgba(0, 0, 0, 0.28);
            pointer-events: none;
        }

        .event-banner-shell {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            margin: 0 auto;
        }

        .event-banner {
            display: block;
            width: 100%;
            max-height: 520px;
            object-fit: cover;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
        }

        /* --------------------------------------------------------------
           Event summary
        -------------------------------------------------------------- */

        .event-summary-wrap {
            position: relative;
            z-index: 5;
            margin-top: 8px;
        }

        .event-summary-card {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 24px;
            align-items: center;
            padding: 24px;
            background: var(--event-surface);
            border: 1px solid var(--event-border);
            border-radius: var(--event-radius);
            box-shadow: var(--event-shadow);
        }

        .event-title {
            margin: 0 0 12px;
            color: var(--event-text);
            font-size: clamp(23px, 3vw, 34px);
            font-weight: 800;
            line-height: 1.2;
        }

        .event-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 9px 18px;
            color: var(--event-muted);
            font-size: 13px;
        }

        .event-meta-item {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }

        .event-meta-item i {
            width: 17px;
            color: var(--event-dark);
            text-align: center;
        }

        .event-main-action {
            min-width: 185px;
            min-height: 48px;
            padding: 12px 20px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 700;
        }

        .event-main-action[href="#tickets"] {
            cursor: pointer;
        }

        /* --------------------------------------------------------------
           General cards
        -------------------------------------------------------------- */

        .event-content {
            margin-top: 24px;
        }

        .content-card,
        .side-card {
            background: var(--event-surface);
            border: 1px solid var(--event-border);
            border-radius: var(--event-radius);
            box-shadow: var(--event-shadow);
        }

        .content-card {
            padding: 24px;
            margin-bottom: 22px;
        }

        .side-card {
            padding: 20px;
            margin-bottom: 18px;
        }

        .sidebar-sticky {
            position: sticky;
            top: 92px;
        }

        .section-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 18px;
        }

        .section-heading h2,
        .section-heading h3 {
            margin: 0;
            color: var(--event-text);
            font-size: 19px;
            font-weight: 800;
        }

        .section-heading p {
            margin: 4px 0 0;
            color: var(--event-muted);
            font-size: 12px;
        }

        .side-title {
            margin: 0 0 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--event-border);
            font-size: 15px;
            font-weight: 800;
        }

        /* --------------------------------------------------------------
           Notice
        -------------------------------------------------------------- */

        .event-notice {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 13px 15px;
            margin-bottom: 20px;
            overflow: hidden;
            background: #fff9e8;
            border: 1px solid #f5d977;
            border-radius: 13px;
            box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04);
        }

        .event-notice-icon {
            display: flex;
            width: 34px;
            height: 34px;
            min-width: 34px;
            align-items: center;
            justify-content: center;
            background: var(--event-dark);
            border-radius: 50%;
            color: #ffffff;
        }

        .event-notice-window {
            flex: 1;
            overflow: hidden;
        }

        .event-notice-text {
            color: #332900;
            font-size: 13px;
            font-weight: 600;
            line-height: 1.5;
        }

        .event-notice.is-marquee .event-notice-text {
            display: inline-block;
            padding-left: 100%;
            white-space: nowrap;
            animation: event-notice-marquee 22s linear infinite;
        }

        .event-notice.is-marquee:hover .event-notice-text {
            animation-play-state: paused;
        }

        @keyframes event-notice-marquee {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(-100%);
            }
        }

        /* --------------------------------------------------------------
           Promo banner
        -------------------------------------------------------------- */

        .promo-banner {
            display: block;
            width: 100%;
            margin-bottom: 22px;
            border-radius: var(--event-radius);
            box-shadow: var(--event-shadow);
        }

        /* --------------------------------------------------------------
           Description accordion
        -------------------------------------------------------------- */

        .event-accordion {
            overflow: hidden;
            border: 1px solid var(--event-border);
            border-radius: 12px;
        }

        .event-accordion-item + .event-accordion-item {
            border-top: 1px solid var(--event-border);
        }

        .event-accordion-button {
            display: flex;
            width: 100%;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 17px 18px;
            background: #ffffff;
            border: 0;
            color: var(--event-text);
            font-size: 14px;
            font-weight: 750;
            text-align: left;
            text-decoration: none;
        }

        .event-accordion-button:hover {
            background: #fafafa;
            color: var(--event-text);
        }

        .event-accordion-body {
            padding: 4px 18px 20px;
            color: #444444;
            font-size: 14px;
            line-height: 1.75;
        }

        .event-accordion-body p:last-child {
            margin-bottom: 0;
        }

        /* --------------------------------------------------------------
           Ticket tabs
        -------------------------------------------------------------- */

        .ticket-tabs {
            display: flex;
            flex-wrap: nowrap;
            gap: 8px;
            padding-bottom: 5px;
            margin-bottom: 18px;
            overflow-x: auto;
            scrollbar-width: thin;
        }

        .ticket-tabs .nav-link {
            min-width: max-content;
            padding: 8px 14px;
            background: #f1f2f4;
            border: 1px solid transparent;
            border-radius: 30px;
            color: #444444;
            font-size: 12px;
            font-weight: 700;
        }

        .ticket-tabs .nav-link.active {
            background: var(--event-dark);
            color: #ffffff;
        }

        /* --------------------------------------------------------------
           Ticket cards
        -------------------------------------------------------------- */

        .ticket-option-card {
            --ticket-card-bg: #ffffff;

            display: flex;
            min-height: 100%;
            flex-direction: column;
            overflow: hidden;
            background: var(--ticket-card-bg);
            border: 1px solid var(--event-border);
            border-radius: 14px;
            transition:
                transform 0.2s ease,
                box-shadow 0.2s ease,
                border-color 0.2s ease;
        }

        .ticket-option-card:hover {
            border-color: #cfd2d7;
            box-shadow: 0 14px 32px rgba(17, 24, 39, 0.09);
            transform: translateY(-3px);
        }

        .ticket-option-card.is-sold-out {
            background:
                linear-gradient(
                    145deg,
                    rgba(255, 255, 255, 0.96),
                    rgba(255, 234, 234, 0.96)
                );
            border-color: #f2b8b8;
        }

        .ticket-option-card.is-on-request {
            border-color: #b7d8ff;
        }

        .ticket-option-card.is-tba {
            border-color: #ead28a;
        }

        .ticket-card-image {
            width: 100%;
            aspect-ratio: 16 / 6;
            object-fit: cover;
        }

        .ticket-card-body {
            flex: 1;
            padding: 18px;
        }

        .ticket-card-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 12px;
        }

        .ticket-card-title {
            margin: 0;
            font-size: 16px;
            font-weight: 800;
            line-height: 1.3;
        }

        .ticket-status {
            min-width: max-content;
            padding: 4px 8px;
            border-radius: 20px;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .ticket-status.available {
            background: #e7f8ed;
            color: #147236;
        }

        .ticket-status.sold-out {
            background: #fee7e7;
            color: #b42318;
        }

        .ticket-status.request {
            background: #e8f2ff;
            color: #175cd3;
        }

        .ticket-status.tba {
            background: #fff4ce;
            color: #8a5f00;
        }

        .ticket-description {
            color: #5d626b;
            font-size: 12px;
            line-height: 1.6;
        }

        .ticket-description p:last-child {
            margin-bottom: 0;
        }

        .ticket-card-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 15px 18px;
            background: rgba(255, 255, 255, 0.72);
            border-top: 1px solid rgba(0, 0, 0, 0.06);
            backdrop-filter: blur(8px);
        }

        .ticket-price {
            min-width: 85px;
        }

        .ticket-current-price {
            display: block;
            color: var(--event-text);
            font-size: 18px;
            font-weight: 850;
            line-height: 1.1;
        }

        .ticket-old-price {
            display: block;
            margin-bottom: 3px;
            color: #dc3545;
            font-size: 11px;
            text-decoration: line-through;
        }

        .ticket-card-actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 7px;
        }

        .ticket-card-actions .btn {
            padding: 7px 11px;
            border-radius: 8px;
            font-size: 11px;
            font-weight: 700;
        }

        .empty-section {
            padding: 36px 20px;
            color: var(--event-muted);
            text-align: center;
        }

        /* --------------------------------------------------------------
           Gallery and partners
        -------------------------------------------------------------- */

        .media-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px;
        }

        .media-grid-item {
            position: relative;
            overflow: hidden;
            aspect-ratio: 1 / 1;
            background: #eeeeee;
            border-radius: 12px;
        }

        .media-grid-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .media-grid-item:hover img {
            transform: scale(1.05);
        }

        .partner-grid .media-grid-item {
            padding: 16px;
            background: #ffffff;
            border: 1px solid var(--event-border);
        }

        .partner-grid .media-grid-item img {
            object-fit: contain;
        }

        /* --------------------------------------------------------------
           Organizer
        -------------------------------------------------------------- */

        .organizer-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding-bottom: 15px;
            margin-bottom: 15px;
            border-bottom: 1px solid var(--event-border);
        }

        .organizer-item:last-child {
            padding-bottom: 0;
            margin-bottom: 0;
            border-bottom: 0;
        }

        .organizer-logo {
            width: 54px;
            height: 54px;
            min-width: 54px;
            object-fit: contain;
            background: #ffffff;
            border: 1px solid var(--event-border);
            border-radius: 10px;
        }

        .organizer-name {
            margin: 0 0 3px;
            font-size: 14px;
            font-weight: 800;
        }

        .organizer-designation,
        .organizer-address {
            margin: 0;
            color: var(--event-muted);
            font-size: 11px;
            line-height: 1.5;
        }

        .organizer-socials {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
        }

        .organizer-socials a {
            display: inline-flex;
            width: 28px;
            height: 28px;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--event-border);
            border-radius: 7px;
            color: #333333;
            font-size: 12px;
        }

        .organizer-socials a:hover {
            background: var(--event-dark);
            color: #ffffff;
        }

        /* --------------------------------------------------------------
           Payment methods
        -------------------------------------------------------------- */

        .payment-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .payment-item {
            padding: 10px;
            background: #fafafa;
            border: 1px solid var(--event-border);
            border-radius: 10px;
            text-align: center;
        }

        .payment-logo {
            display: flex;
            height: 44px;
            align-items: center;
            justify-content: center;
            margin-bottom: 7px;
        }

        .payment-logo img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .payment-name {
            display: block;
            color: var(--event-muted);
            font-size: 9px;
        }

        /* --------------------------------------------------------------
           Share buttons
        -------------------------------------------------------------- */

        .share-buttons {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .share-buttons .btn {
            display: inline-flex;
            min-height: 39px;
            align-items: center;
            justify-content: center;
            gap: 7px;
            border-radius: 9px;
            font-size: 11px;
            font-weight: 700;
        }

        /* --------------------------------------------------------------
           Modal
        -------------------------------------------------------------- */

        .ticket-modal .modal-content {
            max-height: 78vh;
            border: 0;
            border-radius: 16px;
            box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
        }

        /* --------------------------------------------------------------
           Responsive
        -------------------------------------------------------------- */

        @media (max-width: 991px) {
            .event-hero {
                padding: 8px 0;
            }

            .event-banner {
                border-radius: 10px;
            }

            .event-summary-card {
                grid-template-columns: 1fr;
                padding: 20px;
            }

            .event-main-action {
                width: 100%;
            }

            .sidebar-sticky {
                position: static;
            }

            .media-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (max-width: 767px) {
            .event-page {
                padding-bottom: 40px;
            }

            .event-summary-wrap {
                margin-top: 0;
            }

            .event-summary-card {
                border-radius: 0 0 14px 14px;
            }

            .event-title {
                font-size: 22px;
            }

            .event-meta {
                display: grid;
                gap: 8px;
            }

            .event-content {
                margin-top: 16px;
            }

            .content-card {
                padding: 17px;
                margin-bottom: 16px;
            }

            .ticket-card-footer {
                align-items: flex-end;
            }

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

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            .event-notice.is-marquee .event-notice-text {
                padding-left: 0;
                white-space: normal;
                animation: none;
            }

            .ticket-option-card,
            .media-grid-item img {
                transition: none;
            }
        }