@extends('frontend.layouts.app')

@section(
    'title',
    $offerPackage->name . ' | Offers & Packages | CCULB Resort'
)

@php
    $typeLabels = [
        'room' => 'Room Package',
        'event' => 'Event Package',
        'dining' => 'Dining Package',
        'general' => 'Special Package',
    ];

    $typeIcons = [
        'room' => '⌂',
        'event' => '◇',
        'dining' => '♨',
        'general' => '★',
    ];

    $packageType = $offerPackage->package_type ?? 'general';

    $packageTypeLabel =
        $typeLabels[$packageType] ?? 'Special Package';

    $packageTypeIcon =
        $typeIcons[$packageType] ?? '✦';

    $packageInclusions = collect(
        $offerPackage->inclusions ?? []
    )->filter();

    $relationName = match($packageType) {
        'room' => optional($offerPackage->roomType)->name,

        'event' => optional($offerPackage->eventType)->name
            ?: optional($offerPackage->venue)->name,

        'dining' => optional($offerPackage->venue)->name,

        default => null,
    };

    $relationLabel = match($packageType) {
        'room' => 'Room Type',
        'event' => optional($offerPackage->eventType)->name
            ? 'Event Type'
            : 'Venue',

        'dining' => 'Dining Venue',

        default => null,
    };
@endphp

@section('content')
    {{-- Package Hero --}}
    <section class="package-details-hero">
        <div class="package-hero-pattern"></div>

        @if($offerPackage->featured_image)
            <div
                class="package-hero-background"
                style="background-image: url('{{
                    asset(
                        'storage/' .
                        $offerPackage->featured_image
                    )
                }}');"
            ></div>
        @endif

        <div class="package-hero-overlay"></div>
        <div class="package-hero-glow"></div>

        <div class="container package-hero-container">
            <nav
                class="package-breadcrumb"
                aria-label="Breadcrumb"
            >
                <a href="{{ route('home') }}">
                    Home
                </a>

                <span aria-hidden="true">/</span>

                <a href="{{ route('offers.index') }}">
                    Offers & Packages
                </a>

                <span aria-hidden="true">/</span>

                <span>{{ $offerPackage->name }}</span>
            </nav>

            <div class="package-hero-content">
                <div class="package-hero-badges">
                    <span class="package-type-badge type-{{
                        $packageType
                    }}">
                        <span aria-hidden="true">
                            {{ $packageTypeIcon }}
                        </span>

                        <span>{{ $packageTypeLabel }}</span>
                    </span>

                    @if($offerPackage->is_featured)
                        <span class="package-featured-badge">
                            Featured Experience
                        </span>
                    @endif

                    @if($offerPackage->has_discount)
                        <span class="package-discount-badge">
                            {{
                                $offerPackage->discount_percentage
                            }}% OFF
                        </span>
                    @endif
                </div>

                @if($offerPackage->small_title)
                    <div class="package-small-title">
                        {{ $offerPackage->small_title }}
                    </div>
                @endif

                <h1>{{ $offerPackage->name }}</h1>

                @if($offerPackage->short_description)
                    <p>
                        {{ $offerPackage->short_description }}
                    </p>
                @endif

                <a
                    href="#package-information"
                    class="package-explore-button"
                >
                    <span>Explore Package</span>
                    <span aria-hidden="true">↓</span>
                </a>
            </div>
        </div>

        <div class="package-hero-bottom-line"></div>
    </section>

    {{-- Quick Information --}}
    <section
        class="package-information-section"
        id="package-information"
    >
        <div class="container">
            <div class="package-information-card">
                <div class="package-price-block">
                    <span class="information-label">
                        Package Price
                    </span>

                    <div class="package-price-line">
                        <strong>
                            ৳{{ number_format(
                                (float) $offerPackage->current_price,
                                0
                            ) }}
                        </strong>

                        @if($offerPackage->has_discount)
                            <del>
                                ৳{{ number_format(
                                    (float) $offerPackage->regular_price,
                                    0
                                ) }}
                            </del>
                        @endif
                    </div>

                    @if($offerPackage->has_discount)
                        <span class="price-saving">
                            You save
                            ৳{{ number_format(
                                (float) $offerPackage->regular_price
                                - (float) $offerPackage->current_price,
                                0
                            ) }}
                        </span>
                    @endif
                </div>

                @if($relationName)
                    <div class="information-item">
                        <span class="information-icon">
                            {{ $packageTypeIcon }}
                        </span>

                        <div>
                            <span class="information-label">
                                {{ $relationLabel }}
                            </span>

                            <strong>{{ $relationName }}</strong>
                        </div>
                    </div>
                @endif

                @if(
                    $offerPackage->start_date ||
                    $offerPackage->end_date
                )
                    <div class="information-item">
                        <span class="information-icon">
                            ◷
                        </span>

                        <div>
                            <span class="information-label">
                                Package Validity
                            </span>

                            <strong>
                                @if(
                                    $offerPackage->start_date &&
                                    $offerPackage->end_date
                                )
                                    {{
                                        $offerPackage
                                            ->start_date
                                            ->format('d M Y')
                                    }}
                                    –
                                    {{
                                        $offerPackage
                                            ->end_date
                                            ->format('d M Y')
                                    }}
                                @elseif($offerPackage->end_date)
                                    Until
                                    {{
                                        $offerPackage
                                            ->end_date
                                            ->format('d M Y')
                                    }}
                                @else
                                    From
                                    {{
                                        $offerPackage
                                            ->start_date
                                            ->format('d M Y')
                                    }}
                                @endif
                            </strong>
                        </div>
                    </div>
                @endif

                <div class="information-action">
                    <a
                        href="{{ route('home', [
                            'package' => $offerPackage->slug,
                        ]) }}#booking"
                        class="package-book-button"
                    >
                        <span>
                            {{
                                $offerPackage->button_text
                                    ?: 'Reserve This Package'
                            }}
                        </span>

                        <span aria-hidden="true">→</span>
                    </a>
                </div>
            </div>
        </div>
    </section>

    {{-- Main Package Content --}}
    <section class="package-main-section">
        <div class="container">
            <div class="package-main-grid">
                <main class="package-content-column">
                    {{-- Overview --}}
                    <article class="package-content-card">
                        <span class="section-eyebrow">
                            Package Overview
                        </span>

                        <h2>
                            A Thoughtfully Curated
                            <em>Resort Experience</em>
                        </h2>

                        @if($offerPackage->description)
                            <div class="package-description">
                                {!! nl2br(
                                    e($offerPackage->description)
                                ) !!}
                            </div>
                        @elseif($offerPackage->short_description)
                            <div class="package-description">
                                <p>
                                    {{
                                        $offerPackage
                                            ->short_description
                                    }}
                                </p>
                            </div>
                        @else
                            <div class="package-description">
                                <p>
                                    Experience a carefully curated
                                    package designed to make your visit
                                    to CCULB Resort comfortable,
                                    enjoyable and memorable.
                                </p>
                            </div>
                        @endif
                    </article>

                    {{-- Inclusions --}}
                    @if($packageInclusions->isNotEmpty())
                        <article class="package-content-card">
                            <div class="content-heading-row">
                                <div>
                                    <span class="section-eyebrow">
                                        Everything Included
                                    </span>

                                    <h2>Package Inclusions</h2>
                                </div>

                                <span class="inclusion-count">
                                    {{ $packageInclusions->count() }}
                                    {{
                                        Str::plural(
                                            'Benefit',
                                            $packageInclusions->count()
                                        )
                                    }}
                                </span>
                            </div>

                            <div class="package-inclusion-grid">
                                @foreach(
                                    $packageInclusions as $inclusion
                                )
                                    <div class="package-inclusion-item">
                                        <span
                                            class="inclusion-check"
                                            aria-hidden="true"
                                        >
                                            ✓
                                        </span>

                                        <span>{{ $inclusion }}</span>
                                    </div>
                                @endforeach
                            </div>
                        </article>
                    @endif

                    {{-- Terms and Conditions --}}
                    @if($offerPackage->terms_conditions)
                        <article class="package-content-card terms-card">
                            <span class="section-eyebrow">
                                Important Information
                            </span>

                            <h2>Terms & Conditions</h2>

                            <div class="package-terms-content">
                                {!! nl2br(
                                    e(
                                        $offerPackage
                                            ->terms_conditions
                                    )
                                ) !!}
                            </div>
                        </article>
                    @endif
                </main>

                {{-- Sidebar --}}
                <aside class="package-sidebar">
                    <div class="package-booking-card">
                        <div class="booking-card-top">
                            <span class="booking-card-eyebrow">
                                Exclusive Package
                            </span>

                            <h3>Reserve Your Experience</h3>

                            <p>
                                Contact our hospitality team for
                                availability, booking assistance and
                                personalised arrangements.
                            </p>
                        </div>

                        <div class="booking-price-area">
                            <span>Package starts from</span>

                            <div class="booking-price">
                                ৳{{ number_format(
                                    (float)
                                    $offerPackage->current_price,
                                    0
                                ) }}
                            </div>

                            @if($offerPackage->has_discount)
                                <div class="booking-regular-price">
                                    Regular price:
                                    <del>
                                        ৳{{ number_format(
                                            (float)
                                            $offerPackage
                                                ->regular_price,
                                            0
                                        ) }}
                                    </del>
                                </div>
                            @endif
                        </div>

                        <div class="booking-summary-list">
                            <div class="booking-summary-item">
                                <span class="summary-icon">
                                    {{ $packageTypeIcon }}
                                </span>

                                <div>
                                    <small>Package Type</small>
                                    <strong>
                                        {{ $packageTypeLabel }}
                                    </strong>
                                </div>
                            </div>

                            @if($relationName)
                                <div class="booking-summary-item">
                                    <span class="summary-icon">
                                        ◇
                                    </span>

                                    <div>
                                        <small>
                                            {{ $relationLabel }}
                                        </small>

                                        <strong>
                                            {{ $relationName }}
                                        </strong>
                                    </div>
                                </div>
                            @endif

                            @if($offerPackage->end_date)
                                <div class="booking-summary-item">
                                    <span class="summary-icon">
                                        ◷
                                    </span>

                                    <div>
                                        <small>Available Until</small>

                                        <strong>
                                            {{
                                                $offerPackage
                                                    ->end_date
                                                    ->format('d M Y')
                                            }}
                                        </strong>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <a
                            href="{{ route('home', [
                                'package' => $offerPackage->slug,
                            ]) }}#booking"
                            class="sidebar-reserve-button"
                        >
                            <span>
                                {{
                                    $offerPackage->button_text
                                        ?: 'Reserve This Package'
                                }}
                            </span>

                            <span aria-hidden="true">→</span>
                        </a>

                        <a
                            href="{{ route('offers.index') }}"
                            class="sidebar-back-button"
                        >
                            ← View All Packages
                        </a>
                    </div>

                    <div class="package-help-card">
                        <span class="help-card-icon">
                            ✦
                        </span>

                        <h3>Need a Custom Package?</h3>

                        <p>
                            Our team can customise your stay, dining,
                            event or celebration according to your
                            requirements.
                        </p>

                        <a href="{{ route('home') }}#contact">
                            Speak with Our Team
                            <span aria-hidden="true">→</span>
                        </a>
                    </div>
                </aside>
            </div>
        </div>
    </section>

    {{-- Related Packages --}}
    @if(
        isset($relatedPackages) &&
        $relatedPackages->count()
    )
        <section class="related-packages-section">
            <div class="container">
                <div class="related-section-heading">
                    <div>
                        <span class="section-eyebrow">
                            You May Also Like
                        </span>

                        <h2>
                            Discover More
                            <em>Experiences</em>
                        </h2>
                    </div>

                    <a
                        href="{{ route('offers.index') }}"
                        class="view-all-packages-button"
                    >
                        <span>View All Packages</span>
                        <span aria-hidden="true">→</span>
                    </a>
                </div>

                <div class="related-packages-grid">
                    @foreach(
                        $relatedPackages as $relatedPackage
                    )
                        @php
                            $relatedType =
                                $relatedPackage->package_type
                                ?? 'general';

                            $relatedIcon =
                                $typeIcons[$relatedType] ?? '✦';

                            $relatedLabel =
                                $typeLabels[$relatedType]
                                ?? 'Special Package';
                        @endphp

                        <article class="related-package-card">
                            <a
                                href="{{ route(
                                    'offers.show',
                                    $relatedPackage->slug
                                ) }}"
                                class="related-package-image"
                            >
                                @if(
                                    $relatedPackage->featured_image
                                )
                                    <img
                                        src="{{ asset(
                                            'storage/' .
                                            $relatedPackage
                                                ->featured_image
                                        ) }}"
                                        alt="{{
                                            $relatedPackage->name
                                        }}"
                                        loading="lazy"
                                    >
                                @else
                                    <div
                                        class="related-image-placeholder"
                                    >
                                        <span>
                                            {{ $relatedIcon }}
                                        </span>

                                        <small>CCULB Resort</small>
                                    </div>
                                @endif

                                <span
                                    class="related-image-overlay"
                                ></span>

                                <span
                                    class="related-package-type"
                                >
                                    {{ $relatedLabel }}
                                </span>

                                @if(
                                    $relatedPackage->has_discount
                                )
                                    <span
                                        class="related-discount-badge"
                                    >
                                        {{
                                            $relatedPackage
                                                ->discount_percentage
                                        }}% OFF
                                    </span>
                                @endif
                            </a>

                            <div class="related-package-content">
                                @if($relatedPackage->small_title)
                                    <span
                                        class="related-small-title"
                                    >
                                        {{
                                            $relatedPackage
                                                ->small_title
                                        }}
                                    </span>
                                @endif

                                <h3>
                                    <a
                                        href="{{ route(
                                            'offers.show',
                                            $relatedPackage->slug
                                        ) }}"
                                    >
                                        {{
                                            $relatedPackage->name
                                        }}
                                    </a>
                                </h3>

                                <div class="related-package-footer">
                                    <div>
                                        <small>Package Price</small>

                                        <strong>
                                            ৳{{ number_format(
                                                (float)
                                                $relatedPackage
                                                    ->current_price,
                                                0
                                            ) }}
                                        </strong>
                                    </div>

                                    <a
                                        href="{{ route(
                                            'offers.show',
                                            $relatedPackage->slug
                                        ) }}"
                                        aria-label="View {{
                                            $relatedPackage->name
                                        }}"
                                    >
                                        →
                                    </a>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- Bottom CTA --}}
    <section class="package-bottom-cta">
        <div class="package-cta-pattern"></div>

        <div class="container package-cta-container">
            <div>
                <span class="section-eyebrow section-eyebrow-light">
                    Your Experience Awaits
                </span>

                <h2>
                    Ready to Make Your Visit
                    <em>Unforgettable?</em>
                </h2>

                <p>
                    Reserve this package or contact our team for a
                    personalised experience at CCULB Resort.
                </p>
            </div>

            <a
                href="{{ route('home') }}#contact"
                class="package-cta-button"
            >
                <span>Plan Your Experience</span>
                <span aria-hidden="true">→</span>
            </a>
        </div>
    </section>
@endsection

@push('styles')
<style>
    :root {
        --package-deep-green: #0d3029;
        --package-green: #174a3d;
        --package-light-green: #eaf2ee;
        --package-gold: #c7a35a;
        --package-gold-light: #e3cb94;
        --package-cream: #f7f4ed;
        --package-white: #ffffff;
        --package-heading: #17352e;
        --package-text: #61716c;
        --package-border: #e1e8e4;
        --package-shadow:
            0 18px 55px rgba(18, 58, 48, .11);
    }

    html {
        scroll-behavior: smooth;
    }

    .section-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--package-gold);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 2px;
        line-height: 1.4;
        text-transform: uppercase;
    }

    .section-eyebrow::before {
        width: 30px;
        height: 1px;
        content: "";
        background: currentColor;
    }

    .section-eyebrow-light {
        color: var(--package-gold-light);
    }

    /*
     * Hero
     */
    .package-details-hero {
        position: relative;
        min-height: 680px;
        overflow: hidden;
        display: flex;
        align-items: center;
        isolation: isolate;
        background:
            radial-gradient(
                circle at 80% 28%,
                rgba(199, 163, 90, .19),
                transparent 26%
            ),
            linear-gradient(
                125deg,
                #09251f 0%,
                #103b31 55%,
                #174a3d 100%
            );
    }

    .package-hero-background {
        position: absolute;
        inset: 0;
        z-index: -4;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        transform: scale(1.02);
    }

    .package-hero-overlay {
        position: absolute;
        inset: 0;
        z-index: -3;
        background:
            linear-gradient(
                90deg,
                rgba(5, 27, 22, .95) 0%,
                rgba(8, 38, 31, .87) 42%,
                rgba(8, 38, 31, .48) 73%,
                rgba(8, 38, 31, .55) 100%
            );
    }

    .package-hero-pattern,
    .package-cta-pattern {
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: .1;
        background-image:
            linear-gradient(
                45deg,
                transparent 48%,
                rgba(255, 255, 255, .3) 49%,
                rgba(255, 255, 255, .3) 51%,
                transparent 52%
            );
        background-size: 64px 64px;
    }

    .package-hero-glow {
        position: absolute;
        right: -190px;
        bottom: -350px;
        width: 760px;
        height: 760px;
        z-index: -1;
        border: 1px solid rgba(227, 203, 148, .2);
        border-radius: 50%;
        box-shadow:
            0 0 0 75px rgba(227, 203, 148, .025),
            0 0 0 150px rgba(227, 203, 148, .018);
    }

    .package-hero-container {
        position: relative;
        padding-top: 125px;
        padding-bottom: 125px;
    }

    .package-breadcrumb {
        max-width: 850px;
        margin-bottom: 63px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        color: rgba(255, 255, 255, .57);
        font-size: 12px;
    }

    .package-breadcrumb a {
        color: var(--package-gold-light);
        text-decoration: none;
        transition: color .25s ease;
    }

    .package-breadcrumb a:hover {
        color: #ffffff;
    }

    .package-breadcrumb span:last-child {
        overflow: hidden;
        max-width: 430px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .package-hero-content {
        max-width: 860px;
    }

    .package-hero-badges {
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 9px;
    }

    .package-type-badge,
    .package-featured-badge,
    .package-discount-badge {
        min-height: 31px;
        padding: 8px 12px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: #ffffff;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .8px;
        line-height: 1;
        text-transform: uppercase;
        backdrop-filter: blur(7px);
    }

    .package-type-badge {
        background: rgba(13, 48, 41, .78);
        border: 1px solid rgba(255, 255, 255, .17);
    }

    .package-type-badge.type-room {
        background: rgba(32, 87, 117, .87);
    }

    .package-type-badge.type-event {
        background: rgba(91, 58, 112, .87);
    }

    .package-type-badge.type-dining {
        background: rgba(132, 75, 33, .9);
    }

    .package-featured-badge {
        border: 1px solid rgba(227, 203, 148, .45);
        color: var(--package-gold-light);
        background: rgba(13, 48, 41, .64);
    }

    .package-discount-badge {
        border-radius: 40px;
        background: var(--package-gold);
        color: var(--package-deep-green);
    }

    .package-small-title {
        margin-bottom: 10px;
        color: var(--package-gold-light);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .package-hero-content h1 {
        max-width: 830px;
        margin: 0;
        color: #ffffff;
        font-family: "Playfair Display", Georgia, serif;
        font-size: clamp(45px, 6vw, 78px);
        font-weight: 500;
        letter-spacing: -1.5px;
        line-height: 1.08;
    }

    .package-hero-content p {
        max-width: 700px;
        margin: 23px 0 0;
        color: rgba(255, 255, 255, .75);
        font-size: 16px;
        line-height: 1.85;
    }

    .package-explore-button {
        width: fit-content;
        min-height: 51px;
        margin-top: 34px;
        padding: 0 21px;
        display: inline-flex;
        align-items: center;
        gap: 17px;
        border: 1px solid rgba(227, 203, 148, .55);
        color: #ffffff;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1px;
        text-decoration: none;
        text-transform: uppercase;
        transition:
            background .25s ease,
            color .25s ease,
            transform .25s ease;
    }

    .package-explore-button:hover {
        background: var(--package-gold);
        color: var(--package-deep-green);
        transform: translateY(-2px);
    }

    .package-hero-bottom-line {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 5px;
        background:
            linear-gradient(
                90deg,
                var(--package-gold),
                var(--package-gold-light),
                var(--package-gold)
            );
    }

    /*
     * Quick Information
     */
    .package-information-section {
        position: relative;
        z-index: 5;
        background: var(--package-cream);
        scroll-margin-top: 90px;
    }

    .package-information-card {
        position: relative;
        top: -46px;
        min-height: 128px;
        padding: 24px 27px;
        display: grid;
        grid-template-columns:
            minmax(185px, 1.1fr)
            minmax(175px, 1fr)
            minmax(220px, 1.2fr)
            auto;
        align-items: center;
        gap: 0;
        border: 1px solid rgba(199, 163, 90, .25);
        background: #ffffff;
        box-shadow: var(--package-shadow);
    }

    .package-price-block,
    .information-item,
    .information-action {
        min-height: 75px;
        padding: 0 25px;
        display: flex;
        align-items: center;
    }

    .package-price-block {
        padding-left: 0;
        display: block;
        border-right: 1px solid var(--package-border);
    }

    .information-item {
        gap: 13px;
        border-right: 1px solid var(--package-border);
    }

    .information-action {
        padding-right: 0;
        justify-content: flex-end;
    }

    .information-label {
        display: block;
        margin-bottom: 5px;
        color: #8b9995;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1.2px;
        text-transform: uppercase;
    }

    .package-price-line {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 8px;
    }

    .package-price-line strong {
        color: var(--package-green);
        font-family: "Playfair Display", Georgia, serif;
        font-size: 31px;
        font-weight: 600;
        line-height: 1;
    }

    .package-price-line del {
        color: #9aa7a3;
        font-size: 12px;
    }

    .price-saving {
        display: block;
        margin-top: 6px;
        color: var(--package-gold);
        font-size: 10px;
        font-weight: 800;
    }

    .information-icon {
        width: 42px;
        height: 42px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--package-light-green);
        color: var(--package-green);
        font-family: "Playfair Display", Georgia, serif;
        font-size: 18px;
    }

    .information-item strong {
        display: block;
        color: var(--package-heading);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.5;
    }

    .package-book-button {
        min-height: 51px;
        padding: 0 19px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        background: var(--package-green);
        color: #ffffff;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .7px;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        transition:
            background .25s ease,
            color .25s ease,
            transform .25s ease;
    }

    .package-book-button:hover {
        background: var(--package-gold);
        color: var(--package-deep-green);
        transform: translateY(-2px);
    }

    /*
     * Main Content
     */
    .package-main-section {
        padding: 30px 0 105px;
        background: var(--package-cream);
    }

    .package-main-grid {
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            minmax(285px, 355px);
        align-items: start;
        gap: 35px;
    }

    .package-content-column {
        min-width: 0;
        display: grid;
        gap: 27px;
    }

    .package-content-card {
        padding: 42px 43px;
        border: 1px solid var(--package-border);
        background: #ffffff;
        box-shadow: 0 10px 35px rgba(18, 58, 48, .055);
    }

    .package-content-card h2 {
        margin: 14px 0 23px;
        color: var(--package-heading);
        font-family: "Playfair Display", Georgia, serif;
        font-size: clamp(30px, 4vw, 42px);
        font-weight: 500;
        line-height: 1.2;
    }

    .package-content-card h2 em,
    .related-section-heading h2 em,
    .package-cta-container h2 em {
        color: var(--package-gold);
        font-weight: inherit;
    }

    .package-description,
    .package-terms-content {
        color: var(--package-text);
        font-size: 14px;
        line-height: 1.9;
    }

    .package-description p,
    .package-terms-content p {
        margin-top: 0;
        margin-bottom: 18px;
    }

    .package-description p:last-child,
    .package-terms-content p:last-child {
        margin-bottom: 0;
    }

    .content-heading-row {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 25px;
    }

    .content-heading-row h2 {
        margin-bottom: 0;
    }

    .inclusion-count {
        flex: 0 0 auto;
        padding: 8px 12px;
        background: var(--package-light-green);
        color: var(--package-green);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .8px;
        text-transform: uppercase;
    }

    .package-inclusion-grid {
        margin-top: 30px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px;
    }

    .package-inclusion-item {
        min-height: 57px;
        padding: 14px 16px;
        display: flex;
        align-items: flex-start;
        gap: 11px;
        border: 1px solid var(--package-border);
        background: #fbfcfb;
        color: #52665f;
        font-size: 12px;
        line-height: 1.55;
        transition:
            border-color .25s ease,
            background .25s ease,
            transform .25s ease;
    }

    .package-inclusion-item:hover {
        border-color: rgba(199, 163, 90, .6);
        background: var(--package-cream);
        transform: translateY(-2px);
    }

    .inclusion-check {
        width: 24px;
        height: 24px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--package-light-green);
        color: var(--package-gold);
        font-size: 11px;
        font-weight: 900;
    }

    .terms-card {
        border-left: 3px solid var(--package-gold);
    }

    /*
     * Sidebar
     */
    .package-sidebar {
    position: sticky;
    top: 105px;
    min-width: 0;
    display: grid;
    align-self: start;
    gap: 24px;
}

    .package-booking-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(199, 163, 90, .3);
    background: #ffffff;
    box-shadow: 0 17px 50px rgba(18, 58, 48, .09);
}

    .booking-card-top {
        padding: 31px 29px 27px;
        background:
            radial-gradient(
                circle at 90% 10%,
                rgba(199, 163, 90, .2),
                transparent 30%
            ),
            linear-gradient(
                135deg,
                var(--package-deep-green),
                var(--package-green)
            );
    }

    .booking-card-eyebrow {
        color: var(--package-gold-light);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1.7px;
        text-transform: uppercase;
    }

    .booking-card-top h3 {
        margin: 10px 0 12px;
        color: #ffffff;
        font-family: "Playfair Display", Georgia, serif;
        font-size: 27px;
        font-weight: 500;
        line-height: 1.2;
    }

    .booking-card-top p {
        margin: 0;
        color: rgba(255, 255, 255, .68);
        font-size: 12px;
        line-height: 1.7;
    }

    .booking-price-area {
        padding: 24px 29px;
        border-bottom: 1px solid var(--package-border);
    }

    .booking-price-area > span {
        display: block;
        color: #8b9995;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .booking-price {
        margin-top: 5px;
        color: var(--package-green);
        font-family: "Playfair Display", Georgia, serif;
        font-size: 34px;
        font-weight: 600;
        line-height: 1.1;
    }

    .booking-regular-price {
        margin-top: 5px;
        color: #899691;
        font-size: 10px;
    }

    .booking-summary-list {
        padding: 8px 29px;
    }

    .booking-summary-item {
        padding: 15px 0;
        display: flex;
        align-items: center;
        gap: 12px;
        border-bottom: 1px solid var(--package-border);
    }

    .booking-summary-item:last-child {
        border-bottom: 0;
    }

    .summary-icon {
        width: 34px;
        height: 34px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--package-light-green);
        color: var(--package-gold);
        font-size: 14px;
    }

    .booking-summary-item small {
        display: block;
        margin-bottom: 3px;
        color: #8c9995;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: .8px;
        text-transform: uppercase;
    }

    .booking-summary-item strong {
        display: block;
        color: var(--package-heading);
        font-size: 11px;
        line-height: 1.45;
    }

    .sidebar-reserve-button {
        min-height: 54px;
        margin: 12px 29px 0;
        padding: 0 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        background: var(--package-gold);
        color: var(--package-deep-green);
        font-size: 9px;
        font-weight: 900;
        letter-spacing: .7px;
        text-decoration: none;
        text-transform: uppercase;
        transition:
            background .25s ease,
            color .25s ease,
            transform .25s ease;
    }

    .sidebar-reserve-button:hover {
        background: var(--package-green);
        color: #ffffff;
        transform: translateY(-2px);
    }

    .sidebar-back-button {
        padding: 17px 20px 23px;
        display: block;
        color: var(--package-green);
        font-size: 10px;
        font-weight: 800;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
    }

    .package-help-card {
        padding: 29px;
        border: 1px solid var(--package-border);
        background: var(--package-light-green);
    }

    .help-card-icon {
        width: 45px;
        height: 45px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: #ffffff;
        color: var(--package-gold);
        font-size: 20px;
    }

    .package-help-card h3 {
        margin: 16px 0 9px;
        color: var(--package-heading);
        font-family: "Playfair Display", Georgia, serif;
        font-size: 22px;
        font-weight: 500;
    }

    .package-help-card p {
        margin: 0;
        color: var(--package-text);
        font-size: 12px;
        line-height: 1.7;
    }

    .package-help-card a {
        margin-top: 15px;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: var(--package-green);
        font-size: 9px;
        font-weight: 900;
        letter-spacing: .6px;
        text-decoration: none;
        text-transform: uppercase;
    }

    /*
     * Related Packages
     */
    .related-packages-section {
        padding: 95px 0 105px;
        background: #ffffff;
    }

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

    .related-section-heading h2 {
        margin: 14px 0 0;
        color: var(--package-heading);
        font-family: "Playfair Display", Georgia, serif;
        font-size: clamp(34px, 5vw, 51px);
        font-weight: 500;
        line-height: 1.15;
    }

    .view-all-packages-button {
        min-height: 45px;
        padding: 0 16px;
        display: inline-flex;
        align-items: center;
        gap: 13px;
        border: 1px solid var(--package-green);
        color: var(--package-green);
        font-size: 9px;
        font-weight: 900;
        letter-spacing: .7px;
        text-decoration: none;
        text-transform: uppercase;
        transition:
            background .25s ease,
            color .25s ease;
    }

    .view-all-packages-button:hover {
        background: var(--package-green);
        color: #ffffff;
    }

    .related-packages-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px;
    }

    .related-package-card {
        min-width: 0;
        overflow: hidden;
        border: 1px solid var(--package-border);
        background: #ffffff;
        transition:
            border-color .3s ease,
            box-shadow .3s ease,
            transform .3s ease;
    }

    .related-package-card:hover {
        border-color: rgba(199, 163, 90, .55);
        box-shadow: var(--package-shadow);
        transform: translateY(-7px);
    }

    .related-package-image {
        position: relative;
        height: 235px;
        overflow: hidden;
        display: block;
        background: var(--package-deep-green);
    }

    .related-package-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform .65s ease;
    }

    .related-package-card:hover
    .related-package-image img {
        transform: scale(1.06);
    }

    .related-image-placeholder {
        width: 100%;
        height: 100%;
        display: grid;
        place-content: center;
        gap: 8px;
        background:
            radial-gradient(
                circle at 70% 25%,
                rgba(199, 163, 90, .3),
                transparent 28%
            ),
            linear-gradient(
                145deg,
                var(--package-deep-green),
                var(--package-green)
            );
        color: var(--package-gold-light);
        text-align: center;
    }

    .related-image-placeholder span {
        font-family: "Playfair Display", Georgia, serif;
        font-size: 47px;
    }

    .related-image-placeholder small {
        color: rgba(255, 255, 255, .65);
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .related-image-overlay {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(
                to bottom,
                rgba(7, 31, 25, .03) 35%,
                rgba(7, 31, 25, .64) 100%
            );
    }

    .related-package-type,
    .related-discount-badge {
        position: absolute;
        bottom: 15px;
        z-index: 2;
        padding: 8px 10px;
        font-size: 8px;
        font-weight: 900;
        letter-spacing: .8px;
        line-height: 1;
        text-transform: uppercase;
    }

    .related-package-type {
        left: 15px;
        background: rgba(13, 48, 41, .82);
        color: #ffffff;
    }

    .related-discount-badge {
        right: 15px;
        border-radius: 30px;
        background: var(--package-gold);
        color: var(--package-deep-green);
    }

    .related-package-content {
        padding: 24px 23px 22px;
    }

    .related-small-title {
        display: block;
        margin-bottom: 7px;
        color: var(--package-gold);
        font-size: 8px;
        font-weight: 900;
        letter-spacing: 1.4px;
        text-transform: uppercase;
    }

    .related-package-content h3 {
        margin: 0;
        font-family: "Playfair Display", Georgia, serif;
        font-size: 23px;
        font-weight: 500;
        line-height: 1.3;
    }

    .related-package-content h3 a {
        color: var(--package-heading);
        text-decoration: none;
        transition: color .25s ease;
    }

    .related-package-content h3 a:hover {
        color: var(--package-gold);
    }

    .related-package-footer {
        margin-top: 20px;
        padding-top: 17px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 15px;
        border-top: 1px solid var(--package-border);
    }

    .related-package-footer small {
        display: block;
        margin-bottom: 3px;
        color: #8b9995;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: .8px;
        text-transform: uppercase;
    }

    .related-package-footer strong {
        color: var(--package-green);
        font-family: "Playfair Display", Georgia, serif;
        font-size: 22px;
        font-weight: 600;
    }

    .related-package-footer > a {
        width: 40px;
        height: 40px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        background: var(--package-green);
        color: #ffffff;
        font-size: 17px;
        text-decoration: none;
        transition:
            background .25s ease,
            color .25s ease;
    }

    .related-package-footer > a:hover {
        background: var(--package-gold);
        color: var(--package-deep-green);
    }

    /*
     * Bottom CTA
     */
    .package-bottom-cta {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        padding: 84px 0;
        background:
            linear-gradient(
                110deg,
                var(--package-deep-green),
                var(--package-green)
            );
    }

    .package-bottom-cta::after {
        position: absolute;
        top: -220px;
        right: -110px;
        width: 520px;
        height: 520px;
        z-index: -1;
        border: 1px solid rgba(227, 203, 148, .17);
        border-radius: 50%;
        content: "";
        box-shadow:
            0 0 0 65px rgba(227, 203, 148, .025),
            0 0 0 130px rgba(227, 203, 148, .018);
    }

    .package-cta-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 50px;
    }

    .package-cta-container > div {
        max-width: 730px;
    }

    .package-cta-container h2 {
        margin: 16px 0 16px;
        color: #ffffff;
        font-family: "Playfair Display", Georgia, serif;
        font-size: clamp(34px, 4.8vw, 55px);
        font-weight: 500;
        line-height: 1.14;
    }

    .package-cta-container p {
        max-width: 640px;
        margin: 0;
        color: rgba(255, 255, 255, .7);
        font-size: 14px;
        line-height: 1.8;
    }

    .package-cta-button {
        min-width: 225px;
        min-height: 54px;
        padding: 0 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        border: 1px solid var(--package-gold-light);
        background: var(--package-gold);
        color: var(--package-deep-green);
        font-size: 9px;
        font-weight: 900;
        letter-spacing: .8px;
        text-decoration: none;
        text-transform: uppercase;
        transition:
            background .25s ease,
            color .25s ease,
            transform .25s ease;
    }

    .package-cta-button:hover {
        background: transparent;
        color: #ffffff;
        transform: translateY(-2px);
    }

    /*
     * Responsive
     */
    @media (max-width: 1100px) {
        .package-information-card {
            grid-template-columns:
                repeat(2, minmax(0, 1fr));
        }

        .package-price-block,
        .information-item,
        .information-action {
            padding: 20px;
        }

        .package-price-block {
            border-bottom: 1px solid
                var(--package-border);
        }

        .information-item {
            border-bottom: 1px solid
                var(--package-border);
        }

        .information-action {
            justify-content: stretch;
        }

        .package-book-button {
            width: 100%;
        }
    }

    @media (max-width: 991px) {
        .package-main-grid {
            grid-template-columns: 1fr;
        }

        .package-booking-card {
    position: static;
}

.package-sidebar {
    position: static;
}

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

        .package-cta-container {
            align-items: flex-start;
            flex-direction: column;
        }
    }

    @media (max-width: 767px) {
        .package-details-hero {
            min-height: 610px;
        }

        .package-hero-container {
            padding-top: 105px;
            padding-bottom: 100px;
        }

        .package-breadcrumb {
            margin-bottom: 45px;
        }

        .package-breadcrumb span:last-child {
            max-width: 190px;
        }

        .package-hero-content h1 {
            font-size: clamp(39px, 13vw, 58px);
        }

        .package-hero-content p {
            font-size: 14px;
        }

        .package-information-card {
            top: -31px;
            padding: 8px 18px;
            grid-template-columns: 1fr;
        }

        .package-price-block,
        .information-item,
        .information-action {
            min-height: 0;
            padding: 19px 0;
            border-right: 0;
            border-bottom: 1px solid
                var(--package-border);
        }

        .information-action {
            border-bottom: 0;
        }

        .package-main-section {
            padding-top: 18px;
            padding-bottom: 75px;
        }

        .package-content-card {
            padding: 31px 23px;
        }

        .content-heading-row {
            align-items: flex-start;
            flex-direction: column;
            gap: 14px;
        }

        .package-inclusion-grid {
            grid-template-columns: 1fr;
        }

        .related-packages-section {
            padding: 73px 0 80px;
        }

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

        .related-packages-grid {
            grid-template-columns: 1fr;
        }

        .package-bottom-cta {
            padding: 68px 0;
        }

        .package-cta-button {
            width: 100%;
            min-width: 0;
        }
    }

    @media (max-width: 480px) {
        .package-hero-badges {
            align-items: flex-start;
        }

        .package-hero-content h1 {
            font-size: 39px;
        }

        .package-content-card {
            padding: 28px 18px;
        }

        .booking-card-top,
        .booking-price-area,
        .package-help-card {
            padding-right: 22px;
            padding-left: 22px;
        }

        .booking-summary-list {
            padding-right: 22px;
            padding-left: 22px;
        }

        .sidebar-reserve-button {
            margin-right: 22px;
            margin-left: 22px;
        }

        .related-package-image {
            height: 225px;
        }
    }
</style>
@endpush