@extends('layouts.app')

@section('title', $ticket->translatedTitle)

@section('content')
<div class="event-page-wrapper">
    <div class="container2 padded">
        
        {{-- Back Button --}}
        <div class="page-header-actions">
            <button class="page-back-btn" onclick="window.history.back()" title="{{ __('messages.back') }}">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="15 18 9 12 15 6"></polyline>
                </svg>
            </button>
        </div>

        {{-- Full Width Image Slider --}}
        <div class="event-hero">
            <div class="event-hero__slider">
                @if($ticketImages && $ticketImages->count() > 0)
                    @foreach($ticketImages as $index => $image)
                        <img src="{{ asset('storage/' . $image->file_path) }}" 
                             alt="{{ $ticket->title }}" 
                             class="event-hero__image {{ $index == 0 ? 'active' : '' }}"
                             data-index="{{ $index }}">
                    @endforeach
                @elseif($ticket->image)
                    <img src="{{ asset('storage/' . $ticket->image) }}" alt="{{ $ticket->title }}" class="event-hero__image active">
                @else
                    <img src="https://via.placeholder.com/1200x600?text={{ urlencode($ticket->title) }}" alt="{{ $ticket->title }}" class="event-hero__image active">
                @endif
                
                {{-- Action Icons (Share & Favorite) --}}
                <div class="event-hero__actions">
                    <button class="event-hero__action-btn event-hero__action-btn--share" onclick="toggleShareMenu()" title="{{ __('messages.share_event') }}">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="22" height="22">
                            <path d="M7 17L17 7"></path>
                            <path d="M7 7h10v10"></path>
                        </svg>
                    </button>
                    <button class="event-hero__action-btn event-hero__action-btn--favorite" id="favoriteBtn" onclick="toggleFavorite(this, {{ $ticket->id }})" title="{{ __('messages.add_to_favorites') }}">
                        {{-- Heart Icon --}}
                        <svg class="icon-heart" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                        </svg>
                        {{-- Checkmark Icon (hidden by default) --}}
                        <svg class="icon-check" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="#58585b" stroke-width="3" style="display: none;">
                            <polyline points="20 6 9 17 4 12"></polyline>
                        </svg>
                    </button>
                </div>
                
                {{-- Share Menu (Removed, using Modal now) --}}
                
                {{-- Best Seller Badge --}}
                <div class="event-hero__badge">{{ __('messages.best_seller') }}</div>
                
            </div>
            
            {{-- Navigation Arrows (Moved outside slider for overhang effect) --}}
            <button class="event-hero__arrow event-hero__arrow--prev">
                {{-- Desktop Icon --}}
                <svg class="icon-desktop" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M19 12H5"></path>
                    <path d="M12 19l-7-7 7-7"></path>
                </svg>
                {{-- Mobile Icon --}}
                <svg class="icon-mobile" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: none;">
                    <polyline points="15 18 9 12 15 6"></polyline>
                </svg>
            </button>
            <button class="event-hero__arrow event-hero__arrow--next">
                {{-- Desktop Icon --}}
                <svg class="icon-desktop" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M5 12h14"></path>
                    <path d="M12 5l7 7-7 7"></path>
                </svg>
                {{-- Mobile Icon --}}
                <svg class="icon-mobile" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: none;">
                    <polyline points="9 18 15 12 9 6"></polyline>
                </svg>
            </button>
        </div>

        {{-- Content Layout: Info LEFT, Booking RIGHT --}}
        <div class="event-content">
            
            {{-- Left Column: Event Info --}}
            <div class="event-content__info">
                {{-- Category Breadcrumb --}}
                @if($ticket->category)
                    <div class="event-category-label">
                        {{ $ticket->category->translatedName }} 
                        <span class="event-category-arrow">›</span>
                    </div>
                @endif

                {{-- Title --}}
                <h1 class="event-title">{{ $ticket->translatedTitle }}</h1>
                
                {{-- Short Description --}}
                <p class="event-teaser">
                    {{ Str::limit(strip_tags($ticket->translatedDescription), 150) }}
                </p>
                
                {{-- Badges List --}}
                <div class="event-badges-list">
                    {{-- Location --}}
                    @if($ticket->city)
                    <div class="event-badge-item">
                        <div class="event-badge-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
                                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
                                <circle cx="12" cy="10" r="3"></circle>
                            </svg>
                        </div>
                        <span class="event-badge-text">{{ $ticket->city->translatedName }}</span>
                    </div>
                    @endif

                    {{-- Instant Confirmation --}}
                    <div class="event-badge-item">
                        <div class="event-badge-icon event-badge-icon--purple">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
                                <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
                            </svg>
                        </div>
                    </div>

                    {{-- Free Cancellation --}}
                    <div class="event-badge-item">
                        <div class="event-badge-icon event-badge-icon--green">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
                                <path d="M23 4v6h-6"></path>
                                <path d="M1 20v-6h6"></path>
                                <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
                            </svg>
                        </div>
                    </div>
                </div>
                
                {{-- Description --}}
                @if($ticket->translatedDescription)
                <div class="event-section">
                    <div class="event-section__header">
                        <h2 class="event-section__title">{{ __('messages.adventure_awaits') }}</h2>
                        <button class="event-section__toggle">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
                                <polyline points="18 15 12 9 6 15"></polyline>
                            </svg>
                        </button>
                    </div>
                    <div class="event-section__content">
                        <div class="event-description__text">
                            {!! nl2br(e($ticket->translatedDescription)) !!}
                        </div>
                    </div>
                </div>
                @endif
                
                {{-- Timing Section - يظهر فقط إذا كانت هناك تفاصيل للجولة --}}
                @if($ticket->tripSchedules && $ticket->tripSchedules->count() > 0)
                <div class="event-section">
                    <div class="event-section__header">
                        <h2 class="event-section__title">Timing</h2>
                        <button class="event-section__toggle">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
                                <polyline points="18 15 12 9 6 15"></polyline>
                            </svg>
                        </button>
                    </div>
                    <div class="event-section__content">
                        {{-- عرض تفاصيل البرنامج من trip_schedules --}}
                        <div class="timeline-v2">
                            @php
                                $schedules = $ticket->tripSchedules;
                                $firstSchedule = $schedules->first();
                                $lastSchedule = $schedules->last();
                            @endphp
                            @foreach($schedules as $schedule)
                            <div class="timeline-v2-item">
                                <div class="timeline-v2-dot {{ ($schedule->id == $firstSchedule->id || $schedule->id == $lastSchedule->id) ? '' : 'filled' }}"></div>
                                <div class="timeline-v2-content">
                                    @if($schedule->time && ($schedule->id == $firstSchedule->id || $schedule->id == $lastSchedule->id))
                                        <span class="timeline-v2-time">{{ $schedule->time }}</span>
                                    @endif
                                    <span class="timeline-v2-text">{{ $schedule->translatedActivity }}</span>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        
                        {{-- Duration Summary - حساب المدة تلقائياً --}}
                        <div class="timeline__duration">
                            <span class="timeline__duration-label">{{ __('messages.duration') }}</span>
                            <span class="timeline__duration-value">
                                @php
                                    $schedulesWithTime = $ticket->tripSchedules->filter(fn($s) => $s->time);
                                    if ($schedulesWithTime->count() >= 2) {
                                        try {
                                            $firstTime = \Carbon\Carbon::parse($schedulesWithTime->first()->time);
                                            $lastTime = \Carbon\Carbon::parse($schedulesWithTime->last()->time);
                                            $diffMinutes = $firstTime->diffInMinutes($lastTime);
                                            $hours = floor($diffMinutes / 60);
                                            $minutes = $diffMinutes % 60;
                                            if ($hours > 0 && $minutes > 0) {
                                                echo $hours . ' ' . __('messages.hours') . ' ' . __('messages.and') . ' ' . $minutes . ' ' . __('messages.minutes');
                                            } elseif ($hours > 0) {
                                                echo $hours . ' ' . __('messages.hours');
                                            } else {
                                                echo $minutes . ' ' . __('messages.minutes');
                                            }
                                        } catch (\Exception $e) {
                                            echo __('messages.not_specified');
                                        }
                                    } else {
                                        echo __('messages.not_specified');
                                    }
                                @endphp
                            </span>
                        </div>
                    </div>
                </div>
                @endif

                {{-- Removed duplicate description section --}}
                
                {{-- ما تتضمنه التذكرة --}}
                <div class="event-section">
                    <div class="event-section__header">
                        <h2 class="event-section__title">{{ __('messages.ticket_includes') }}</h2>
                        <button class="event-section__toggle">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
                                <polyline points="18 15 12 9 6 15"></polyline>
                            </svg>
                        </button>
                    </div>
                    <div class="event-section__content">
                        <div class="event-includes">
                            <div class="event-includes__column">
                                <h4>{{ __('messages.inclusions') }}</h4>
                                <ul class="event-includes__list event-includes__list--included">
                                    <li><svg viewBox="0 0 24 24" fill="#64b010" width="16" height="16"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg> {{ __('messages.confirmation_instant') }}</li>
                                    <li><svg viewBox="0 0 24 24" fill="#64b010" width="16" height="16"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg> {{ __('messages.hotel_pickup') }}</li>
                                    <li><svg viewBox="0 0 24 24" fill="#64b010" width="16" height="16"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg> {{ __('messages.lunch_drinks') }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            
            {{-- Right Column: Booking & Timeline --}}
            <div class="event-content__booking">
                
                {{-- Booking Box --}}
                <div class="booking-box">
                    <div class="booking-box__row">
                        {{-- Price --}}
                        <div class="booking-box__price-section">
                            <span class="booking-box__price-label">{{ __('messages.prices_start_from') }}:</span>
                            <div class="booking-box__price">
                                <span class="booking-box__currency">{{ $currencyCode }}</span>
                                <span class="booking-box__amount">{{ number_format($ticket->price, 2) }}</span>
                            </div>
                        </div>
                        
                        {{-- Buy Button --}}
                        <a href="{{ route('checkout.select-tickets', $ticket->id) }}" class="booking-box__btn">{{ __('messages.select_tickets') }}</a>
                    </div>
                    
                    {{-- Badges --}}

                </div>
                
                {{-- Duration/Timeline Section - يظهر فقط إذا كانت هناك تفاصيل للجولة --}}
                @if($ticket->tripSchedules && $ticket->tripSchedules->count() > 0)
                <div class="timeline-box">
                    <div class="timeline-box__header">
                        <div class="timeline-box__icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="20" height="20">
                                <circle cx="12" cy="12" r="10"></circle>
                                <polyline points="12 6 12 12 16 14"></polyline>
                            </svg>
                        </div>
                        <span class="timeline-box__title">{{ __('messages.tour_duration') }}</span>
                        <button class="timeline-box__toggle">
                            {{ __('messages.details') }}
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
                                <polyline points="6 9 12 15 18 9"></polyline>
                            </svg>
                        </button>
                    </div>
                    
                    
                    <div class="timeline-box__content">
                        <div class="timeline-v2">
                            @php
                                $sideSchedules = $ticket->tripSchedules;
                                $sideFirstSchedule = $sideSchedules->first();
                                $sideLastSchedule = $sideSchedules->last();
                            @endphp
                            @foreach($sideSchedules as $schedule)
                            <div class="timeline-v2-item">
                                <div class="timeline-v2-dot {{ ($schedule->id == $sideFirstSchedule->id || $schedule->id == $sideLastSchedule->id) ? '' : 'filled' }}"></div>
                                <div class="timeline-v2-content">
                                    @if($schedule->time && ($schedule->id == $sideFirstSchedule->id || $schedule->id == $sideLastSchedule->id))
                                        <span class="timeline-v2-time">{{ $schedule->time }}</span>
                                    @endif
                                    <span class="timeline-v2-text">{{ $schedule->translatedActivity }}</span>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        
                        <div class="timeline__duration">
                            <span class="timeline__duration-label">{{ __('messages.duration') }}</span>
                            <span class="timeline__duration-value">
                                @php
                                    $schedulesWithTime2 = $ticket->tripSchedules->filter(fn($s) => $s->time);
                                    if ($schedulesWithTime2->count() >= 2) {
                                        try {
                                            $firstTime2 = \Carbon\Carbon::parse($schedulesWithTime2->first()->time);
                                            $lastTime2 = \Carbon\Carbon::parse($schedulesWithTime2->last()->time);
                                            $diffMinutes2 = $firstTime2->diffInMinutes($lastTime2);
                                            $hours2 = floor($diffMinutes2 / 60);
                                            $minutes2 = $diffMinutes2 % 60;
                                            if ($hours2 > 0 && $minutes2 > 0) {
                                                echo $hours2 . ' ' . __('messages.hours') . ' ' . __('messages.and') . ' ' . $minutes2 . ' ' . __('messages.minutes');
                                            } elseif ($hours2 > 0) {
                                                echo $hours2 . ' ' . __('messages.hours');
                                            } else {
                                                echo $minutes2 . ' ' . __('messages.minutes');
                                            }
                                        } catch (\Exception $e) {
                                            echo __('messages.not_specified');
                                        }
                                    } else {
                                        echo __('messages.not_specified');
                                    }
                                @endphp
                            </span>
                        </div>
                    </div>
                </div>
                @endif
                
                {{-- Why Choose Us Section --}}
                <div class="why-choose-box">
                    <h3 class="why-choose-box__title">ما الذي يميز منصة بلاتينوم ليست عن غيرها؟</h3>
                    
                    <div class="why-choose-box__grid">
                        <div class="why-choose-box__item">
                            <div class="why-choose-box__icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="#64b010" stroke-width="2" width="28" height="28">
                                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                                    <polyline points="22 4 12 14.01 9 11.01"></polyline>
                                </svg>
                            </div>
                            <div class="why-choose-box__text">
                                <strong>عملية شراء آمنة</strong>
                                <span>دفع سريع وآمن</span>
                            </div>
                        </div>
                        
                        <div class="why-choose-box__item">
                            <div class="why-choose-box__icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="#64b010" stroke-width="2" width="28" height="28">
                                    <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
                                    <line x1="1" y1="10" x2="23" y2="10"></line>
                                </svg>
                            </div>
                            <div class="why-choose-box__text">
                                <strong>تأكيد فوري</strong>
                                <span>خدمة ضمان استرجاع اختيارية</span>
                            </div>
                        </div>
                        
                        <div class="why-choose-box__item">
                            <div class="why-choose-box__icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="#64b010" stroke-width="2" width="28" height="28">
                                    <path d="M9 11l3 3L22 4"></path>
                                    <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                                </svg>
                            </div>
                            <div class="why-choose-box__text">
                                <strong>الموقع الرسمي لبيع التذاكر</strong>
                                <span>أكثر من 10 مليون مستخدم</span>
                            </div>
                        </div>
                        
                        <div class="why-choose-box__item">
                            <div class="why-choose-box__icon">
                                <svg viewBox="0 0 24 24" fill="none" stroke="#64b010" stroke-width="2" width="28" height="28">
                                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                                    <circle cx="12" cy="7" r="4"></circle>
                                </svg>
                            </div>
                            <div class="why-choose-box__text">
                                <strong>خدمة العملاء على مدار الساعة</strong>
                                <span>فريق دعم مخصص لخدمة العملاء وإدارة البيع</span>
                            </div>
                        </div>
                    </div>
                    
                    {{-- Payment Options --}}
                    <div class="why-choose-box__payment">
                        <span class="why-choose-box__payment-label">خيارات دفع متعددة</span>
                        <div class="why-choose-box__payment-icons">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg" alt="Apple Pay" class="payment-icon">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/2/2a/Mastercard-logo.svg" alt="Mastercard" class="payment-icon">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg" alt="Visa" class="payment-icon">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        {{-- Related Tickets --}}
        @if($relatedTickets->count() > 0)
        <section class="event-related">
            <h2 class="event-related__title">قد يعجبك أيضًا</h2>
            <div class="tickets-grid">
                @foreach($relatedTickets as $related)
                <a href="{{ localizedRoute('ticket.show', $related->id) }}" class="ticket-card">
                    <div class="ticket-card-image-wrapper">
                        @if($related->display_image)
                            <img src="{{ $related->display_image }}" alt="{{ $related->title }}">
                        @else
                            <img src="https://via.placeholder.com/300x200" alt="{{ $related->title }}">
                        @endif
                        <div class="ticket-card-favorite" onclick="event.preventDefault();this.classList.toggle('active')">
                            <svg viewBox="0 0 24 24"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
                        </div>
                        <div class="ticket-card-badges">
                            <div class="ticket-card-rating">
                                <svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                                {{ number_format(rand(35, 50) / 10, 1) }}
                            </div>
                        </div>
                    </div>
                    <div class="ticket-card-content">
                        <h3 class="ticket-card-title">{{ $related->title }}</h3>
                        <div class="ticket-card-price-row">
                            <span class="ticket-card-price">{{ number_format($related->price, 0) }} {{ $currencyCode }}</span>
                        </div>
                    </div>
                </a>
                @endforeach
            </div>
        </section>
        @endif
        
    </div>
</div>

<script>
// Toggle Favorite
function toggleFavorite(button, ticketId) {
    button.classList.toggle('active');
    
    const heartIcon = button.querySelector('.icon-heart');
    const checkIcon = button.querySelector('.icon-check');
    
    if (button.classList.contains('active')) {
        // Show checkmark, hide heart
        heartIcon.style.display = 'none';
        checkIcon.style.display = 'block';
        localStorage.setItem('favorite_' + ticketId, 'true');
        showToast('تم إضافة الفعالية للمفضلة لديك');
    } else {
        // Show heart, hide checkmark
        heartIcon.style.display = 'block';
        checkIcon.style.display = 'none';
        localStorage.removeItem('favorite_' + ticketId);
        showToast('تم إزالة الفعالية من المفضلة لديك');
    }
}

// Load favorite state on page load
document.addEventListener('DOMContentLoaded', function() {
    const ticketId = {{ $ticket->id }};
    const button = document.getElementById('favoriteBtn');
    
    if (localStorage.getItem('favorite_' + ticketId) === 'true') {
        button.classList.add('active');
        const heartIcon = button.querySelector('.icon-heart');
        const checkIcon = button.querySelector('.icon-check');
        heartIcon.style.display = 'none';
        checkIcon.style.display = 'block';
    }
});

// Show Toast Function
function showToast(message) {
    const toast = document.getElementById('favoriteToast');
    const toastMessage = document.getElementById('favoriteToastMessage');
    toastMessage.textContent = message;
    
    toast.classList.add('show');
    
    setTimeout(function() {
        hideToast();
    }, 3000);
}

// Hide Toast Function
function hideToast() {
    const toast = document.getElementById('favoriteToast');
    toast.classList.remove('show');
}

// Toggle Share Menu (New Modal)
function toggleShareMenu() {
    const modal = document.getElementById('shareModalBackdrop');
    if (modal.classList.contains('active')) {
        closeShareMenu();
    } else {
        modal.classList.add('active');
        document.body.style.overflow = 'hidden';
    }
}

function closeShareMenu() {
    const modal = document.getElementById('shareModalBackdrop');
    modal.classList.remove('active');
    document.body.style.overflow = '';
}
</script>

{{-- New Share Modal Structure --}}
<div class="share-modal-backdrop" id="shareModalBackdrop" onclick="if(event.target === this) closeShareMenu()">
    <div class="share-modal-content">
        
        {{-- Facebook --}}
        <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" target="_blank" class="share-modal-item">
            <span class="share-item-text">{{ __('messages.share_via_facebook') }}</span>
            <div class="share-item-icon facebook">
                <svg viewBox="0 0 24 24" fill="white" width="24" height="24">
                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                </svg>
            </div>
        </a>

        {{-- Twitter --}}
        <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($ticket->title) }}" target="_blank" class="share-modal-item">
            <span class="share-item-text">{{ __('messages.share_via_twitter') }}</span>
            <div class="share-item-icon twitter">
                <svg viewBox="0 0 24 24" fill="white" width="20" height="20">
                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                </svg>
            </div>
        </a>

        {{-- Copy Link --}}
        <button onclick="copyLink()" class="share-modal-item" style="border:none; background:transparent; width:100%;">
            <span class="share-item-text">{{ __('messages.copy_link') }}</span>
            <div class="share-item-icon link">
                <svg viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" width="22" height="22">
                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
                </svg>
            </div>
        </button>
    </div>
</div>

<style>
/* New Share Modal Styles */
.share-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.3s;
}

.share-modal-backdrop.active {
    display: flex;
    opacity: 1;
}

.share-modal-content {
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    width: 90%;
    max-width: 320px;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.share-modal-backdrop.active .share-modal-content {
    transform: scale(1);
}

.share-modal-item {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* RTL align (text left of icon) */
    gap: 16px;
    text-decoration: none;
    color: #333;
    padding: 12px 0;
    width: 100%;
    cursor: pointer;
    transition: background 0.2s;
}

/* LTR Support */
html[dir="ltr"] .share-modal-item {
    justify-content: flex-start; /* Icon on left? No, let's stick to design: Icon on Right? */
    /* If LTR, usually Icon is Left, Text Right. Let's flip it for LTR */
    flex-direction: row-reverse; 
}

.share-item-text {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.share-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.share-item-icon.facebook {
    background-color: #4267B2;
}

.share-item-icon.twitter {
    background-color: #000;
}

.share-item-icon.link {
    background-color: #FF9800;
}
</style>

{{-- Favorite Toast Notification --}}
<div id="favoriteToast" class="favorite-toast">
    <div class="favorite-toast__content">
        <span id="favoriteToastMessage">تم إضافة الفعالية للمفضلة لديك</span>
        <button class="favorite-toast__close" onclick="hideToast()">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" width="16" height="16">
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
        </button>
    </div>
</div>

<script>
// Copy Link
function copyLink() {
    const url = window.location.href;
    navigator.clipboard.writeText(url).then(function() {
        alert('تم نسخ الرابط بنجاح!');
        toggleShareMenu();
    }, function(err) {
        console.error('Failed to copy:', err);
    });
}

// Close share menu when clicking outside
document.addEventListener('click', function(e) {
    const shareBtn = document.querySelector('.event-hero__action-btn--share');
    const shareMenu = document.getElementById('shareMenu');
    
    if (shareMenu && shareBtn && !shareBtn.contains(e.target) && !shareMenu.contains(e.target)) {
        // shareMenu.style.display = 'none'; // Old Logic
    }
});

// Event Section Toggles (Accordion)
document.addEventListener('DOMContentLoaded', function() {
    const toggles = document.querySelectorAll('.event-section__toggle');
    
    // Initialize: Set max-height for open sections or close them if needed
    // Assuming mostly open by default based on HTML structure, but user wants toggle.
    // Let's check status.
    
    toggles.forEach(toggle => {
        toggle.addEventListener('click', function() {
            // Toggle active class on button (for rotation)
            this.classList.toggle('active');
            
            // Find the content div (next sibling of header parent)
            const header = this.parentElement;
            const content = header.nextElementSibling;
            
            if (content.style.maxHeight && content.style.maxHeight !== '0px') {
                // Collapse
                content.style.maxHeight = '0px';
                content.style.opacity = '0';
                content.style.marginBottom = '0';
            } else {
                // Expand
                content.style.display = 'block'; 
                content.style.maxHeight = content.scrollHeight + "px";
                content.style.opacity = '1';
                content.style.marginBottom = '0'; // Restore margin if needed, or keep 0 inside
            }
        });
        
        // Initial setup check if needed (optional)
        // const header = toggle.parentElement;
        // const content = header.nextElementSibling;
    });
});
</script>

<script>
// ===== Image Slider =====
let currentImageIndex = 0;
const images = document.querySelectorAll('.event-hero__image');
const totalImages = images.length;

function showImage(index) {
    if (totalImages <= 1) return;
    
    // إخفاء كل الصور
    images.forEach(img => {
        img.classList.remove('active');
        img.style.display = 'none';
    });
    
    // إظهار الصورة المحددة
    if (images[index]) {
        images[index].classList.add('active');
        images[index].style.display = 'block';
    }
}

function nextImage() {
    if (totalImages <= 1) return;
    currentImageIndex = (currentImageIndex + 1) % totalImages;
    showImage(currentImageIndex);
}

function prevImage() {
    if (totalImages <= 1) return;
    currentImageIndex = (currentImageIndex - 1 + totalImages) % totalImages;
    showImage(currentImageIndex);
}

// إضافة events للأسهم
document.addEventListener('DOMContentLoaded', function() {
    const prevBtn = document.querySelector('.event-hero__arrow--prev');
    const nextBtn = document.querySelector('.event-hero__arrow--next');
    
    if (prevBtn) {
        prevBtn.addEventListener('click', prevImage);
    }
    if (nextBtn) {
        nextBtn.addEventListener('click', nextImage);
    }
    
    // إخفاء الصور غير النشطة عند التحميل
    images.forEach((img, index) => {
        if (index !== 0) {
            img.style.display = 'none';
        }
    });
    
    // إخفاء الأسهم لو صورة واحدة فقط
    if (totalImages <= 1) {
        if (prevBtn) prevBtn.style.display = 'none';
        if (nextBtn) nextBtn.style.display = 'none';
    }
});
</script>

@endsection

@push('styles')
<style>
/* Toast Notification */
.favorite-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: #333;
    color: #fff;
    padding: 12px 24px;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    gap: 12px;
}

.favorite-toast.show {
    transform: translateX(-50%) translateY(0);
}

.favorite-toast__content {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
}



.favorite-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.favorite-toast__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    font-weight: 600;
    font-size: 15px;
}

.favorite-toast__close {
    background: none;
    border: none;
    cursor: pointer;
    color: #2e7d32;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.favorite-toast__close:hover {
    opacity: 1;
}

/* ============================================
   Platinumlist Event Page - COMPLETE MATCH
   ============================================ */

.event-page-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.event-page-wrapper .container2.padded {
    padding: 0 20px;
}

/* Breadcrumbs */
.breadcrumbs {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 12px;
}

.breadcrumbs__list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    font-size: 13px;
}

.breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9b9b9b;
}

.breadcrumbs__item::after {
    content: '>';
    color: #ddd;
    font-size: 11px;
}

.breadcrumbs__item:last-child::after {
    display: none;
}

.breadcrumbs__link {
    color: #37a7f8;
    text-decoration: none;
}

/* Action Bar */
.event-actions-bar {
    display: flex;
    gap: 24px;
    padding: 10px 0;
    margin-bottom: 16px;
}

.event-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #58585b;
    padding: 0;
}

.event-action-btn svg {
    fill: none;
    stroke: #58585b;
    stroke-width: 2;
}

.event-action-btn:hover {
    color: #37a7f8;
}

.event-action-btn.active svg {
    fill: #e91e63;
    stroke: #e91e63;
}

/* Hero Image */
.event-hero {
    margin-bottom: 24px;
}

.event-hero__slider {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #f5f5f5;
}

.event-hero__image {
    width: 100%;
    height: auto;
    display: block;
    max-height: 500px;
    object-fit: cover;
}

.event-hero__badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #ffc107;
    color: #000;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
}

.event-hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px; /* Larger size for desktop */
    height: 56px;
    background: #ffffff; /* Solid white */
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Stronger shadow */
    z-index: 2;
    transition: all 0.2s;
}

.event-hero__arrow:hover {
    transform: translateY(-50%) scale(1.05);
    background: #ffffff;
}

.event-hero__arrow svg {
    width: 24px;
    height: 24px;
}

.event-hero__arrow .icon-desktop {
    color: #000000;
    display: block;
}

.event-hero__arrow .icon-mobile {
    display: none;
}

.event-hero__arrow--prev { left: -28px; }
.event-hero__arrow--next { right: -28px; }

@media (max-width: 768px) {
    .event-hero__arrow {
        width: 40px;
        height: 40px;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
    }
    
    .event-hero__arrow:hover {
        background: transparent;
        transform: translateY(-50%);
    }

    .event-hero__arrow .icon-desktop {
        display: none !important;
    }

    .event-hero__arrow .icon-mobile {
        display: block !important;
        width: 32px; /* Large chevron */
        height: 32px;
        stroke: #ffffff; /* White chevron */
        stroke-width: 2.5;
        filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); /* Shadow for visibility */
    }

    .event-hero__arrow--prev { left: 4px; }
    .event-hero__arrow--next { right: 4px; }
}

/* Action Buttons (Favorite & Share) */
.event-hero__actions {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    gap: 12px;
    z-index: 3;
}

.event-hero__action-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.event-hero__action-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.event-hero__action-btn svg {
    fill: none;
    stroke: #58585b;
    stroke-width: 2;
    transition: all 0.3s ease;
}

.event-hero__action-btn--favorite svg {
    fill: none;
}

.event-hero__action-btn--favorite.active {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.event-hero__action-btn--favorite.active .icon-check {
    stroke: #58585b;
}

.event-hero__action-btn--favorite:hover svg {
    /* no hover effect */
}

.event-hero__action-btn--share svg {
    fill: none;
    stroke: #58585b;
}

.event-hero__action-btn--share:hover svg {
    stroke: #37a7f8;
}

/* Page Header Actions */
.page-header-actions {
    padding: 16px 0 8px 0;
    display: none; /* Hidden by default on desktop */
    justify-content: flex-end; 
}

@media (max-width: 768px) {
    .page-header-actions {
        display: flex; /* Visible on mobile */
    }
}

.page-back-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.2s;
}

.page-back-btn:hover {
    background: #f5f5f5;
    transform: translateX(4px); /* Move slightly for emphasis */
}

.page-back-btn svg {
    width: 20px;
    height: 20px;
    stroke: #58585b;
}

/* Event Hero */
.event-hero {
    margin-bottom: 24px;
    position: relative; /* Ensure absolute arrows are relative to this */
}

    stroke: #37a7f8;
}

/* Share Menu */
.event-hero__share-menu {
    position: absolute;
    top: 65px;
    left: 16px;
    right: auto;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: max-content;
    white-space: nowrap;
    z-index: 10;
    animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}



@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.share-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    text-decoration: none;
    color: #000;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
    width: 100%;
    text-align: start;
    /* direction inherited */
    cursor: pointer;
}

.share-menu__item:hover {
    background: #f5f5f7;
    transform: translateX(-4px);
}

.share-menu__item:not(:last-child) {
    margin-bottom: 8px;
}

.share-menu__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.share-menu__item:hover .share-menu__icon {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .event-hero__actions {
        top: 12px;
        left: 12px;
        gap: 8px;
    }
    
    .event-hero__action-btn {
        width: 42px;
        height: 42px;
    }
    
    .event-hero__share-menu {
        left: 12px;
        top: 60px;
        right: auto;
        min-width: auto;
        max-width: calc(100vw - 24px); /* Safe max-width */
        width: max-content;
        white-space: normal; /* Allow wrapping if needed on very small screens */
    }
    
    .event-hero__image {
        height: 450px;
        object-fit: cover;
    }
}

/* Content Layout */
.event-content {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: start;
    /* direction inherited */
}

@media (max-width: 900px) {
    .event-content {
        grid-template-columns: 1fr;
        padding-bottom: 120px; /* Space for fixed booking box */
    }
    
    /* Fixed booking box at bottom on mobile */
    .event-content__booking {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto !important;
        z-index: 999;
        padding: 0;
        background: transparent;
    }
    
    .event-content__booking .booking-box {
        border-radius: 16px 16px 0 0;
        margin-bottom: 0 !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        border: none;
        border-top: 1px solid #eee;
    }
    
    /* Hide timeline and why-choose boxes on mobile fixed view */
    .event-content__booking .timeline-box,
    .event-content__booking .why-choose-box {
        display: none;
    }
}

/* Booking Box */
.event-content__booking {
    position: sticky;
    top: 100px;
}

.booking-box {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

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

.booking-box__price-section {
    text-align: right;
}

.booking-box__price-label {
    font-size: 12px;
    color: #9b9b9b;
    display: block;
    margin-bottom: 2px;
}

.booking-box__price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    justify-content: flex-end;
    direction: ltr;
}

.booking-box__currency {
    font-size: 14px;
    font-weight: 500;
    color: #58585b;
}

.booking-box__amount {
    font-size: 24px;
    font-weight: 700;
    color: #58585b;
}

.booking-box__btn {
    display: inline-block;
    padding: 12px 32px;
    background: #37a7f8;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
}

.booking-box__badges {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.booking-box__badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #58585b;
}

.booking-box__badge--success { color: #64b010; }
.booking-box__badge--cancel { color: #e74c3c; }

/* Timeline Box */
.timeline-box {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.timeline-box__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.timeline-box__icon {
    width: 36px;
    height: 36px;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-box__title {
    font-size: 15px;
    font-weight: 600;
    color: #58585b;
    flex: 1;
}

.timeline-box__toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 13px;
    color: #37a7f8;
}

/* Timeline V2 - تصميم مطابق للصورة المرجعية */
.timeline-v2 {
    position: relative;
    padding: 20px 0;
    /* direction inherited - timeline positioning handled via RTL-aware properties */
}

/* الخط المتقطع العمودي - رمادي فاتح */
.timeline-v2::before {
    content: '';
    position: absolute;
    right: 18px; /* مركز الدائرة */
    top: 35px;
    bottom: 35px;
    width: 0;
    border-right: 2px dashed #d0d0d0; /* رمادي فاتح */
    z-index: 0;
}

.timeline-v2-item {
    display: flex;
    align-items: flex-start;
    padding: 15px 0;
    position: relative;
    /* direction inherited */
    width: 100%;
}

.timeline-v2-item:last-child {
    padding-bottom: 0;
}

/* النقطة - دائرة زرقاء مع حلقة زرقاء فاتحة */
.timeline-v2-dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    background: #37a7f8; /* الدائرة الزرقاء */
    border: 3px solid #b3dffe; /* الحلقة الزرقاء الفاتحة */
    border-radius: 50%;
    z-index: 2;
    margin-left: 25px;
    margin-right: 12px;
    margin-top: 5px;
    box-sizing: content-box; /* لجعل الـ border خارج الـ width/height */
}

.timeline-v2-dot.filled {
    background: #37a7f8;
    border: 3px solid #b3dffe;
}

/* المحتوى */
.timeline-v2-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: right;
}

/* الوقت */
.timeline-v2-time {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    direction: ltr;
    white-space: nowrap;
    display: inline-block;
    margin-bottom: 2px;
}

/* النص */
.timeline-v2-text {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    text-align: right;
}

.timeline__duration {
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid #eee;
}

.timeline__duration-label {
    font-size: 13px;
    color: #9b9b9b;
}

.timeline__duration-value {
    font-size: 14px;
    font-weight: 600;
    color: #58585b;
}

/* Why Choose Us Box */
.why-choose-box {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
}

.why-choose-box__title {
    font-size: 16px;
    font-weight: 700;
    color: #58585b;
    text-align: center;
    margin: 0 0 24px 0;
}

.why-choose-box__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.why-choose-box__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.why-choose-box__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-choose-box__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.why-choose-box__text strong {
    font-size: 13px;
    font-weight: 600;
    color: #58585b;
}

.why-choose-box__text span {
    font-size: 11px;
    color: #9b9b9b;
}

.why-choose-box__payment {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.why-choose-box__payment-label {
    display: block;
    font-size: 13px;
    color: #58585b;
    margin-bottom: 12px;
}

.why-choose-box__payment-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.payment-icon {
    height: 24px;
    width: auto;
    object-fit: contain;
}

/* Event Info */
.event-content__info {
    text-align: right;
}

.event-title {
    font-size: 26px;
    font-weight: 700;
    color: #58585b;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.event-teaser {
    font-size: 14px;
    color: #9b9b9b;
    margin: 0 0 16px 0;
    line-height: 1.6;
}

.event-location {
    display: none; /* Hide old location link styles if present */
}

/* Event Badges List */
.event-badges-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.event-badge-item {
    display: flex;
    align-items: center;
    /* justify-content: flex-end; Removed to align right (start) in RTL */
    gap: 12px;
}

.event-badge-text {
    font-size: 15px;
    color: #58585b;
    font-weight: 500;
}

.event-badge-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
    color: #58585b; /* Default color (Location) */
}

.event-badge-icon--purple {
    background-color: #f3e5f5;
    color: #9c27b0;
    border-radius: 8px; /* Ensure rounded corners */
}

.event-badge-icon--green {
    background-color: #e8f5e9;
    color: #4caf50;
    border-radius: 8px; /* Ensure rounded corners */
}

.event-description {
    margin-bottom: 24px;
}

.event-description__text {
    font-size: 14px;
    line-height: 1.8;
    color: #58585b;
}

/* Event Sections */
.event-section {
    border-top: 1px solid #eee;
    padding: 20px 0;
}

.event-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.event-section__title {
    font-size: 16px;
    font-weight: 700;
    color: #58585b;
    margin: 0;
}

.event-section__toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #9b9b9b;
    transition: transform 0.3s ease;
}

.event-section__toggle.active {
    transform: rotate(180deg);
}

.event-section__content {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease;
    opacity: 1;
}

.event-timing {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #58585b;
}

.event-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.event-features li {
    padding: 8px 0;
    font-size: 14px;
    color: #58585b;
    padding-right: 16px;
    position: relative;
}

.event-features li::before {
    content: '•';
    position: absolute;
    right: 0;
    color: #37a7f8;
}

.event-includes__column h4 {
    font-size: 14px;
    font-weight: 600;
    color: #58585b;
    margin: 0 0 12px 0;
}

.event-includes__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.event-includes__list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    color: #58585b;
}

/* Related Section */
.event-related {
    padding: 40px 0;
    margin-top: 40px;
    border-top: 1px solid #eee;
}

.event-related__title {
    font-size: 22px;
    font-weight: 700;
    color: #58585b;
    margin: 0 0 24px 0;
    text-align: right;
}

/* Tickets Grid */
.tickets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1100px) { .tickets-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .tickets-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { 
    .tickets-grid { 
        grid-template-columns: 1fr; 
        gap: 16px;
    } 
    .event-content { gap: 24px; }
    
    /* Horizontal Ticket Card for Mobile */
    .ticket-card {
        display: flex;
        flex-direction: row; /* Default is row. RTL will put first element on right? No, flex follows direction. RTL means Start is Right. */
        align-items: center;
        gap: 16px;
        background: #fff;
        padding: 0;
        border-radius: 12px;
    }
    
    .ticket-card-image-wrapper {
        width: 100px;
        height: 100px;
        padding-bottom: 0; /* Remove aspect ratio hack */
        flex-shrink: 0;
        border-radius: 12px;
    }
    
    .ticket-card-content {
        flex: 1;
        padding: 0;
        text-align: right;
    }
    
    .ticket-card-title {
        font-size: 14px;
        margin-bottom: 4px;
        max-height: 42px; /* Limit 2 lines */
    }
    
    .ticket-card-rating {
        margin-bottom: 4px; /* Adjust spacing */
    }
    
    .ticket-card-price {
        font-size: 15px;
    }
}


/* Ticket Cards */
.ticket-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
}

.ticket-card:hover { transform: translateY(-4px); }

.ticket-card-image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 60%;
    border-radius: 12px;
    overflow: hidden;
    background: #e9e9e9;
}

.ticket-card-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ticket-card-favorite {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 30px;
    height: 30px;
    background: rgba(255,255,255,0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ticket-card-favorite svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #888;
    stroke-width: 2;
}

.ticket-card-favorite.active svg {
    fill: #e91e63;
    stroke: #e91e63;
}

.ticket-card-badges {
    position: absolute;
    top: 8px;
    right: 8px;
}

.ticket-card-rating {
    background: #64b010;
    color: #fff;
    padding: 4px 8px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
}

.ticket-card-rating svg {
    width: 11px;
    height: 11px;
    fill: #fff;
}

.ticket-card-content {
    padding: 10px 0 0 0;
    text-align: right;
}

.ticket-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #58585b;
    margin: 0 0 6px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ticket-card:hover .ticket-card-title { color: #37a7f8; }

.ticket-card-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ticket-card-price {
    font-size: 14px;
    font-weight: 600;
    color: #58585b;
}

/* LTR Overrides for English */
html[dir="ltr"] .timeline-v2::before {
    right: auto;
    left: 18px;
    border-right: none;
    border-left: 2px dashed #d0d0d0;
}

html[dir="ltr"] .timeline-v2-dot {
    margin-left: 12px;
    margin-right: 25px;
}

html[dir="ltr"] .timeline-v2-content {
    text-align: left;
    align-items: flex-start;
}

html[dir="ltr"] .booking-box__price-section {
    text-align: left;
}

html[dir="ltr"] .booking-box__price {
    justify-content: flex-start;
}

html[dir="ltr"] .share-menu__item {
    text-align: left;
}

/* Fix direction for any other right-aligned elements in LTR */
html[dir="ltr"] .text-end {
    text-align: left !important;
}

html[dir="ltr"] .float-end {
    float: left !important;
}
</style>
@endpush