/**
 * Xeora Event Landing — Glassmorphism Dark Overlay v4.2.0
 *
 * Sovrascrive i colori dell'event-landing.css per il dark theme.
 * Mantiene layout, animazioni, font — cambia solo colori/background.
 *
 * @package Xeora
 * @subpackage Ticketing/Assets
 * @since 4.2.0
 */

/* ═══════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════ */

body.xeora-event-page {
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%) !important;
    color: #fff !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Ambient orbs */
body.xeora-event-page::before,
body.xeora-event-page::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
}
body.xeora-event-page::before {
    width: 500px; height: 500px;
    background: #667eea;
    top: -120px; left: -100px;
}
body.xeora-event-page::after {
    width: 400px; height: 400px;
    background: #764ba2;
    bottom: -80px; right: -80px;
}

/* ═══════════════════════════════════════════════════
   HERO — mantiene immagine sfondo + overlay dark
   ═══════════════════════════════════════════════════ */

.event-hero {
    position: relative;
    z-index: 1;
}

.event-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,12,41,0.3) 0%, rgba(15,12,41,0.6) 100%) !important;
    z-index: -1;
}

.event-hero .hero-content {
    position: relative;
    z-index: 2;
}

.event-title {
    color: #fff !important;
    text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

.event-subtitle {
    color: rgba(255,255,255,0.7) !important;
}

.event-meta .meta-item {
    display: block;
    color: rgba(255,255,255,0.7) !important;
}

.event-meta .meta-item i {
    color: #b8cc0b !important;
}

/* Social proof */
.social-proof {
    color: #fc8181 !important;
}

.social-proof i {
    color: #e53e3e !important;
}

/* CTA button */
.cta-button {
    background: #b8cc0b !important;
    color: #0f0c29 !important;
    box-shadow: 0 8px 30px rgba(184, 204, 11, 0.3) !important;
}

.cta-button:hover {
    background: #c4d60a !important;
    box-shadow: 0 12px 40px rgba(184, 204, 11, 0.4) !important;
}

.cta-button.disabled {
    background: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.4) !important;
    box-shadow: none !important;
}

/* Calendar buttons */
.cal-btn {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.8) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

.cal-btn:hover {
    background: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}

/* Social share */
.share-btn {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.7) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}

.share-btn:hover {
    color: #fff !important;
}
.share-btn.facebook:hover   { background: rgba(59,89,152,0.4) !important; }
.share-btn.x-twitter:hover  { background: rgba(0,0,0,0.4) !important; }
.share-btn.whatsapp:hover   { background: rgba(37,211,102,0.3) !important; }
.share-btn.linkedin:hover   { background: rgba(0,119,181,0.4) !important; }

/* ═══════════════════════════════════════════════════
   CONTAINER / SECTIONS
   ═══════════════════════════════════════════════════ */

body.xeora-event-page .container {
    position: relative;
    z-index: 1;
}

body.xeora-event-page .section {
    background: transparent !important;
    border-radius: 20px;
    margin-bottom: 40px;
}

body.xeora-event-page .section-title {
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════
   COUNTDOWN
   ═══════════════════════════════════════════════════ */

.countdown {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.1) !important;
}

.countdown-title {
    color: rgba(255,255,255,0.7) !important;
}

.countdown-item {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

.countdown-item span {
    color: #b8cc0b !important;
}

.countdown-item small {
    color: rgba(255,255,255,0.5) !important;
}

/* ═══════════════════════════════════════════════════
   TICKET CARDS — glass
   ═══════════════════════════════════════════════════ */

.tickets-grid {
    gap: 20px;
}

.ticket-card {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
}

.ticket-card:hover {
    background: rgba(255,255,255,0.09) !important;
    border-color: rgba(255,255,255,0.18) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.25) !important;
}

/* VIP card */
.ticket-card.vip {
    border-color: rgba(255,215,0,0.3) !important;
}

.ticket-card.vip::before {
    display: none;
}

.ticket-name {
    color: #fff !important;
}

.ticket-desc {
    color: rgba(255,255,255,0.5) !important;
}

.ticket-availability {
    color: rgba(255,255,255,0.6) !important;
}

.ticket-availability.sold-out {
    color: #fc8181 !important;
}

.ticket-availability.sold-out i {
    color: #e53e3e !important;
}

.ticket-availability.low {
    color: #f6ad55 !important;
}

.ticket-availability.low i {
    color: #dd6b20 !important;
}

.ticket-availability i {
    color: #68d391 !important;
}

.ticket-price {
    color: #fff !important;
}

.ticket-price small {
    color: rgba(255,255,255,0.4) !important;
}

.ticket-buy-btn {
    background: #b8cc0b !important;
    color: #0f0c29 !important;
}

.ticket-buy-btn:hover {
    background: #c4d60a !important;
    box-shadow: 0 8px 25px rgba(184, 204, 11, 0.3) !important;
}

.ticket-buy-btn.disabled {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.3) !important;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════
   EVENT DESCRIPTION
   ═══════════════════════════════════════════════════ */

.event-description {
    background: rgba(255,255,255,0.04) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: none !important;
    color: rgba(255,255,255,0.65) !important;
}

.event-description p {
    color: rgba(255,255,255,0.65) !important;
}

.event-description a {
    color: #b8cc0b !important;
}

/* ═══════════════════════════════════════════════════
   FAQ — glass accordion
   ═══════════════════════════════════════════════════ */

.faq-item {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.faq-item:hover {
    border-color: rgba(255,255,255,0.18) !important;
}

.faq-question {
    background: transparent !important;
    color: #fff !important;
}

.faq-question:hover {
    background: rgba(255,255,255,0.04) !important;
}

.faq-question i {
    color: rgba(255,255,255,0.5) !important;
}

.faq-answer-content {
    color: rgba(255,255,255,0.55) !important;
}

/* ═══════════════════════════════════════════════════
   MAPS
   ═══════════════════════════════════════════════════ */

.map-box {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.map-label {
    background: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.8) !important;
}

.map-label i {
    color: #b8cc0b !important;
}

/* ═══════════════════════════════════════════════════
   ORGANIZER INFO — glass
   ═══════════════════════════════════════════════════ */

.organizer-info {
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08) !important;
}

.organizer-header > i {
    color: #b8cc0b !important;
}

body.xeora-event-page .organizer-info .section-title {
    color: #fff !important;
}

.organizer-header div div[style*="font-size: 26px"] {
    color: #fff !important;
}

.contact-item i {
    color: #b8cc0b !important;
}

.contact-item a {
    color: rgba(255,255,255,0.7) !important;
}

.contact-item a:hover {
    color: #b8cc0b !important;
}

/* ═══════════════════════════════════════════════════
   POLICIES — dark glass
   ═══════════════════════════════════════════════════ */

.policies-footer {
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}

.policies-content {
    background: rgba(255,255,255,0.03) !important;
    padding: 30px;
    border-radius: 20px;
}

.policies-content .section-title {
    color: #fff !important;
}

.policy-title {
    color: rgba(255,255,255,0.7) !important;
}

.policy-text {
    color: rgba(255,255,255,0.45) !important;
}

/* ═══════════════════════════════════════════════════
   MODAL PLANIMETRIA
   ═══════════════════════════════════════════════════ */

.planimetry-modal .modal-content {
    background: rgba(15,12,41,0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.modal-close {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
}

.modal-close:hover {
    background: rgba(255,255,255,0.2) !important;
}

.zoom-btn {
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
}

.zoom-btn:hover {
    background: rgba(255,255,255,0.2) !important;
}

.zoom-indicator {
    color: rgba(255,255,255,0.5) !important;
    background: rgba(255,255,255,0.1) !important;
}

/* Mobile: disable orbs + prevent pinch-out */
@media (max-width: 768px) {
    body.xeora-event-page:not(.xeora-menu-open)::before,
    body.xeora-event-page:not(.xeora-menu-open)::after {
        content: none !important;
    }
    html {
        background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
        overflow-x: hidden;
    }
    body.xeora-event-page {
        overflow-x: hidden;
    }

    /* ── Hero compattato: logo più piccolo ── */
    .event-hero .event-logo {
        max-height: 50px !important;
        margin-bottom: 8px !important;
    }

    .event-hero .event-title {
        font-size: 1.4rem !important;
        margin-bottom: 4px !important;
    }

    .event-hero .event-subtitle {
        font-size: 0.8rem !important;
        margin-bottom: 8px !important;
    }

    /* ── Meta inline: data | luogo | posti in riga ── */
    .event-hero .event-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px 12px !important;
        margin-bottom: 8px !important;
    }

    .event-hero .event-meta .meta-item {
        font-size: 0.75rem !important;
        white-space: nowrap !important;
    }

    /* ── Social proof + CTA in riga ── */
    .event-hero .social-proof {
        display: inline-flex !important;
        align-items: center !important;
        font-size: 0.75rem !important;
        margin-bottom: 10px !important;
    }

    .event-hero .cta-button {
        display: inline-flex !important;
        padding: 10px 20px !important;
        font-size: 0.85rem !important;
        margin-bottom: 0 !important;
    }

    /* ── CTA e social proof uno accanto all'altro ── */
    .event-hero .social-proof + .cta-button,
    .event-hero .cta-button + .social-proof {
        margin-left: 8px !important;
    }

    /* Wrapper per social proof + CTA inline */
    .event-hero .hero-social-cta-row {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        margin-bottom: 10px !important;
    }

    /* ── Calendar buttons compatti ── */
    .event-hero .calendar-buttons {
        gap: 6px !important;
        margin-bottom: 8px !important;
    }

    .event-hero .cal-btn {
        padding: 6px 12px !important;
        font-size: 0.75rem !important;
    }

    /* ── Social share compatti ── */
    .event-hero .social-share {
        gap: 6px !important;
    }

    .event-hero .share-btn {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.85rem !important;
    }

    /* ── Countdown: compatto, tutti in una riga, no secondi ── */
    .countdown {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(15, 12, 41, 0.9) !important;
        margin-top: 10px !important;
        padding: 10px 16px !important;
    }

    .countdown-title {
        font-size: 0.7rem !important;
        margin-bottom: 4px !important;
    }

    .countdown-timer {
        justify-content: center !important;
        gap: 8px !important;
    }

    .countdown-item {
        padding: 4px 8px !important;
        min-width: 100px !important;
    }

    .countdown-item span {
        font-size: 1.1rem !important;
    }

    .countdown-item small {
        font-size: 0.55rem !important;
    }

    /* Nascondi i secondi su mobile */
    .countdown-item:last-child {
        display: none !important;
    }
}