@extends('frontend.layouts.app')

@section('title', 'Offers & Packages | CCULB Resort')

@section('content')
    {{-- Hero Section --}}
    <section class="offers-hero">
        <div class="offers-hero-pattern"></div>
        <div class="offers-hero-glow offers-hero-glow-one"></div>
        <div class="offers-hero-glow offers-hero-glow-two"></div>

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

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

                <span>Offers & Packages</span>
            </nav>

            <div class="offers-hero-content">
                <span class="section-eyebrow section-eyebrow-light">
                    Exclusive Resort Experiences
                </span>

                <h1>
                    Offers Designed for
                    <span>Memorable Moments</span>
                </h1>

                <p>
                    Discover thoughtfully curated stays, dining
                    experiences and event packages created to make
                    every visit to CCULB Resort truly exceptional.
                </p>

                <a
                    href="#available-packages"
                    class="hero-explore-button"
                >
                    <span>Explore Packages</span>
                    <span aria-hidden="true">↓</span>
                </a>
            </div>
        </div>

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

    {{-- Filter Section --}}
    <section
        class="package-filter-section"
        aria-label="Package filters"
    >
        <div class="container">
            <div class="package-filter-wrap">
                <div class="package-filter-heading">
                    <div>
                        <span class="filter-label">
                            Browse Experiences
                        </span>

                        <h2>Find Your Perfect Package</h2>
                    </div>

                    <div class="package-result-count">
                        <strong>{{ $offerPackages->total() }}</strong>
                        <span>
                            {{
                                Str::plural(
                                    'package',
                                    $offerPackages->total()
                                )
                            }}
                            available
                        </span>
                    </div>
                </div>

                <div class="package-filter-list">
                    <a
                        href="{{ route('offers.index') }}"
                        class="package-filter-button {{
                            $selectedType === '' ? 'active' : ''
                        }}"
                    >
                        <span class="filter-icon">✦</span>
                        <span>All Packages</span>
                    </a>

                    @foreach($packageTypes as $type => $label)
                        @php
                            $filterIcons = [
                                'room' => '⌂',
                                'event' => '◇',
                                'dining' => '♨',
                                'general' => '★',
                            ];
                        @endphp

                        <a
                            href="{{ route('offers.index', [
                                'type' => $type,
                            ]) }}"
                            class="package-filter-button {{
                                $selectedType === $type
                                    ? 'active'
                                    : ''
                            }}"
                        >
                            <span class="filter-icon">
                                {{ $filterIcons[$type] ?? '✦' }}
                            </span>

                            <span>{{ $label }}</span>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    {{-- Package Listing --}}
    <section
        class="offers-listing-section"
        id="available-packages"
    >
        <div class="container">
            @if($selectedType)
                <div class="selected-filter-info">
                    <div>
                        Showing
                        <strong>
                            {{ $packageTypes[$selectedType] }}
                        </strong>
                    </div>

                    <a href="{{ route('offers.index') }}">
                        Clear Filter
                    </a>
                </div>
            @endif

            @if($offerPackages->count())
                <div class="offers-grid">
                    @foreach($offerPackages as $offerPackage)
                        @php
                            $relationName = match(
                                $offerPackage->package_type
                            ) {
                                'room' => optional(
                                    $offerPackage->roomType
                                )->name,

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

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

                                default => null,
                            };

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

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

                            $packageInclusions = collect(
                                $offerPackage->inclusions ?? []
                            )
                                ->filter()
                                ->take(4);
                        @endphp

                        <article class="offer-card">
                            <div class="offer-card-image">
                                @if($offerPackage->featured_image)
                                    <img
                                        src="{{ asset(
                                            'storage/' .
                                            $offerPackage->featured_image
                                        ) }}"
                                        alt="{{ $offerPackage->name }}"
                                        loading="lazy"
                                    >
                                @else
                                    <div class="offer-image-placeholder">
                                        <span>
                                            {{
                                                $typeIcons[
                                                    $offerPackage
                                                        ->package_type
                                                ] ?? '✦'
                                            }}
                                        </span>

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

                                <div class="offer-image-overlay"></div>

                                <div class="offer-card-badges">
                                    <span class="offer-type-badge type-{{
                                        $offerPackage->package_type
                                    }}">
                                        {{
                                            $typeLabels[
                                                $offerPackage
                                                    ->package_type
                                            ] ?? 'Package'
                                        }}
                                    </span>

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

                                @if($offerPackage->is_featured)
                                    <span class="featured-ribbon">
                                        Featured
                                    </span>
                                @endif
                            </div>

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

                                <h2 class="offer-card-title">
                                    <a
                                        href="{{ route(
                                            'offers.show',
                                            $offerPackage->slug
                                        ) }}"
                                    >
                                        {{ $offerPackage->name }}
                                    </a>
                                </h2>

                                @if($relationName)
                                    <div class="offer-relation">
                                        <span class="relation-mark">
                                            {{
                                                $typeIcons[
                                                    $offerPackage
                                                        ->package_type
                                                ] ?? '✦'
                                            }}
                                        </span>

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

                                @if($offerPackage->short_description)
                                    <p class="offer-description">
                                        {{
                                            Str::limit(
                                                strip_tags(
                                                    $offerPackage
                                                        ->short_description
                                                ),
                                                145
                                            )
                                        }}
                                    </p>
                                @elseif($offerPackage->description)
                                    <p class="offer-description">
                                        {{
                                            Str::limit(
                                                strip_tags(
                                                    $offerPackage
                                                        ->description
                                                ),
                                                145
                                            )
                                        }}
                                    </p>
                                @endif

                                @if($packageInclusions->isNotEmpty())
                                    <ul class="offer-inclusions">
                                        @foreach(
                                            $packageInclusions
                                            as $inclusion
                                        )
                                            <li>
                                                <span aria-hidden="true">
                                                    ✓
                                                </span>

                                                <span>
                                                    {{ $inclusion }}
                                                </span>
                                            </li>
                                        @endforeach
                                    </ul>
                                @endif

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

                                        <span>
                                            Valid

                                            @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
                                        </span>
                                    </div>
                                @endif

                                <div class="offer-card-footer">
                                    <div class="offer-price-wrap">
                                        <span class="price-caption">
                                            Package Price
                                        </span>

                                        <div class="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>
                                    </div>

                                    <a
                                        href="{{ route(
                                            'offers.show',
                                            $offerPackage->slug
                                        ) }}"
                                        class="offer-details-button"
                                        aria-label="View details of {{
                                            $offerPackage->name
                                        }}"
                                    >
                                        <span>
                                            {{
                                                $offerPackage->button_text
                                                    ?: 'View Details'
                                            }}
                                        </span>

                                        <span
                                            class="button-arrow"
                                            aria-hidden="true"
                                        >
                                            →
                                        </span>
                                    </a>
                                </div>
                            </div>
                        </article>
                    @endforeach
                </div>

                @if($offerPackages->hasPages())
                    <div class="offers-pagination">
                        {{ $offerPackages->links() }}
                    </div>
                @endif
            @else
                <div class="offers-empty-state">
                    <div class="empty-state-icon">
                        ✦
                    </div>

                    <span class="section-eyebrow">
                        New Experiences Coming Soon
                    </span>

                    <h2>No Package Available</h2>

                    <p>
                        There are currently no available packages in
                        this category. Explore all packages or contact
                        our team for a personalised resort experience.
                    </p>

                    <div class="empty-state-actions">
                        @if($selectedType)
                            <a
                                href="{{ route('offers.index') }}"
                                class="primary-action-button"
                            >
                                View All Packages
                            </a>
                        @endif

                        <a
                            href="{{ route('home') }}#contact"
                            class="secondary-action-button"
                        >
                            Contact Our Team
                        </a>
                    </div>
                </div>
            @endif
        </div>
    </section>

    {{-- CTA Section --}}
    <section class="offers-cta-section">
        <div class="offers-cta-pattern"></div>

        <div class="container offers-cta-container">
            <div class="offers-cta-content">
                <span class="section-eyebrow section-eyebrow-light">
                    Tailored for You
                </span>

                <h2>
                    Looking for a Custom
                    <span>Resort Experience?</span>
                </h2>

                <p>
                    Speak with our hospitality team to create a
                    personalised stay, celebration or corporate
                    experience at CCULB Resort.
                </p>
            </div>

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

@push('styles')
<style>
    :root {
        --offers-deep-green: #0d3029;
        --offers-green: #174a3d;
        --offers-light-green: #eaf2ee;
        --offers-gold: #c7a35a;
        --offers-gold-light: #e3cb94;
        --offers-cream: #f7f4ed;
        --offers-white: #ffffff;
        --offers-heading: #17352e;
        --offers-text: #61716c;
        --offers-border: #e1e8e4;
        --offers-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(--offers-gold);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 2.2px;
        line-height: 1.4;
        text-transform: uppercase;
    }

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

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

    /*
     * Hero
     */
    .offers-hero {
        position: relative;
        min-height: 600px;
        overflow: hidden;
        display: flex;
        align-items: center;
        isolation: isolate;
        background:
            radial-gradient(
                circle at 78% 34%,
                rgba(199, 163, 90, .18),
                transparent 25%
            ),
            linear-gradient(
                125deg,
                #09251f 0%,
                #103b31 53%,
                #174a3d 100%
            );
    }

    .offers-hero-pattern,
    .offers-cta-pattern {
        position: absolute;
        inset: 0;
        z-index: -1;
        opacity: .12;
        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;
    }

    .offers-hero::after {
        position: absolute;
        right: -120px;
        bottom: -260px;
        width: 650px;
        height: 650px;
        z-index: -1;
        border: 1px solid rgba(227, 203, 148, .18);
        border-radius: 50%;
        content: "";
        box-shadow:
            0 0 0 70px rgba(227, 203, 148, .025),
            0 0 0 140px rgba(227, 203, 148, .02);
    }

    .offers-hero-glow {
        position: absolute;
        z-index: -1;
        border-radius: 50%;
        filter: blur(5px);
    }

    .offers-hero-glow-one {
        top: 70px;
        right: 11%;
        width: 230px;
        height: 230px;
        background: rgba(199, 163, 90, .09);
    }

    .offers-hero-glow-two {
        bottom: 50px;
        left: 5%;
        width: 160px;
        height: 160px;
        background: rgba(255, 255, 255, .035);
    }

    .offers-hero-container {
        position: relative;
        padding-top: 115px;
        padding-bottom: 105px;
    }

    .offers-breadcrumb {
        margin-bottom: 55px;
        display: flex;
        align-items: center;
        gap: 11px;
        color: rgba(255, 255, 255, .62);
        font-size: 13px;
    }

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

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

    .offers-hero-content {
        max-width: 820px;
    }

    .offers-hero-content h1 {
        margin: 19px 0 23px;
        color: #ffffff;
        font-family: "Playfair Display", Georgia, serif;
        font-size: clamp(44px, 6vw, 78px);
        font-weight: 500;
        letter-spacing: -1.7px;
        line-height: 1.08;
    }

    .offers-hero-content h1 span,
    .offers-cta-content h2 span {
        color: var(--offers-gold-light);
        font-style: italic;
    }

    .offers-hero-content p {
        max-width: 680px;
        margin: 0;
        color: rgba(255, 255, 255, .72);
        font-size: 17px;
        line-height: 1.85;
    }

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

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

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

    /*
     * Filters
     */
    .package-filter-section {
        position: relative;
        z-index: 5;
        background: var(--offers-cream);
    }

    .package-filter-wrap {
        position: relative;
        top: -42px;
        padding: 28px 32px;
        border: 1px solid rgba(199, 163, 90, .22);
        background: #ffffff;
        box-shadow: 0 18px 50px rgba(11, 48, 40, .09);
    }

    .package-filter-heading {
        margin-bottom: 22px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 25px;
    }

    .filter-label {
        color: var(--offers-gold);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.8px;
        text-transform: uppercase;
    }

    .package-filter-heading h2 {
        margin: 6px 0 0;
        color: var(--offers-heading);
        font-family: "Playfair Display", Georgia, serif;
        font-size: 25px;
        font-weight: 500;
    }

    .package-result-count {
        display: flex;
        align-items: baseline;
        gap: 7px;
        color: var(--offers-text);
        font-size: 12px;
    }

    .package-result-count strong {
        color: var(--offers-green);
        font-family: "Playfair Display", Georgia, serif;
        font-size: 25px;
    }

    .package-filter-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .package-filter-button {
        min-height: 44px;
        padding: 9px 15px;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        border: 1px solid var(--offers-border);
        background: #ffffff;
        color: #536761;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        transition:
            border-color .25s ease,
            background .25s ease,
            color .25s ease,
            transform .25s ease;
    }

    .package-filter-button:hover,
    .package-filter-button.active {
        border-color: var(--offers-green);
        background: var(--offers-green);
        color: #ffffff;
        transform: translateY(-1px);
    }

    .filter-icon {
        width: 25px;
        height: 25px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--offers-light-green);
        color: var(--offers-green);
        font-size: 13px;
        transition:
            background .25s ease,
            color .25s ease;
    }

    .package-filter-button:hover .filter-icon,
    .package-filter-button.active .filter-icon {
        background: rgba(255, 255, 255, .14);
        color: var(--offers-gold-light);
    }

    /*
     * Listing
     */
    .offers-listing-section {
        padding: 45px 0 105px;
        background: var(--offers-cream);
        scroll-margin-top: 100px;
    }

    .selected-filter-info {
        margin-bottom: 25px;
        padding: 13px 17px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        border-left: 3px solid var(--offers-gold);
        background: #ffffff;
        color: var(--offers-text);
        font-size: 13px;
    }

    .selected-filter-info strong {
        color: var(--offers-heading);
    }

    .selected-filter-info a {
        color: var(--offers-green);
        font-weight: 700;
        text-decoration: none;
    }

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

    .offer-card {
        min-width: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid var(--offers-border);
        background: #ffffff;
        box-shadow: 0 8px 30px rgba(19, 59, 49, .055);
        transition:
            transform .35s ease,
            box-shadow .35s ease,
            border-color .35s ease;
    }

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

    .offer-card-image {
        position: relative;
        height: 268px;
        overflow: hidden;
        background: var(--offers-deep-green);
    }

    .offer-card-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform .7s ease;
    }

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

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

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

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

    .offer-image-overlay {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(
                to bottom,
                rgba(5, 28, 23, .03) 35%,
                rgba(5, 28, 23, .62) 100%
            );
        pointer-events: none;
    }

    .offer-card-badges {
        position: absolute;
        right: 16px;
        bottom: 16px;
        left: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .offer-type-badge,
    .offer-discount-badge,
    .featured-ribbon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .75px;
        line-height: 1;
        text-transform: uppercase;
    }

    .offer-type-badge {
        min-height: 29px;
        padding: 7px 11px;
        color: #ffffff;
        backdrop-filter: blur(8px);
        background: rgba(13, 48, 41, .78);
    }

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

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

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

    .offer-discount-badge {
        min-height: 34px;
        padding: 8px 12px;
        border-radius: 50px;
        background: var(--offers-gold);
        color: var(--offers-deep-green);
    }

    .featured-ribbon {
        position: absolute;
        top: 18px;
        left: -34px;
        width: 135px;
        min-height: 28px;
        color: var(--offers-deep-green);
        background: var(--offers-gold-light);
        transform: rotate(-42deg);
        box-shadow: 0 5px 15px rgba(0, 0, 0, .13);
    }

    .offer-card-content {
        flex: 1;
        padding: 27px 26px 25px;
        display: flex;
        flex-direction: column;
    }

    .offer-small-title {
        margin-bottom: 8px;
        color: var(--offers-gold);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.45px;
        line-height: 1.5;
        text-transform: uppercase;
    }

    .offer-card-title {
        margin: 0;
        font-family: "Playfair Display", Georgia, serif;
        font-size: 25px;
        font-weight: 500;
        line-height: 1.25;
    }

    .offer-card-title a {
        color: var(--offers-heading);
        text-decoration: none;
        transition: color .25s ease;
    }

    .offer-card-title a:hover {
        color: var(--offers-gold);
    }

    .offer-relation {
        margin-top: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        color: #61736d;
        font-size: 12px;
        font-weight: 600;
    }

    .relation-mark {
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        background: var(--offers-light-green);
        color: var(--offers-green);
    }

    .offer-description {
        margin: 17px 0 0;
        color: var(--offers-text);
        font-size: 13px;
        line-height: 1.75;
    }

    .offer-inclusions {
        margin: 19px 0 0;
        padding: 17px 0 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 14px;
        border-top: 1px solid var(--offers-border);
        list-style: none;
    }

    .offer-inclusions li {
        min-width: 0;
        display: flex;
        align-items: flex-start;
        gap: 7px;
        color: #536761;
        font-size: 11px;
        line-height: 1.45;
    }

    .offer-inclusions li > span:first-child {
        flex: 0 0 auto;
        color: var(--offers-gold);
        font-weight: 800;
    }

    .offer-validity {
        margin-top: 18px;
        padding: 10px 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--offers-light-green);
        color: #536b63;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .15px;
    }

    .validity-icon {
        color: var(--offers-gold);
        font-size: 16px;
    }

    .offer-card-footer {
        margin-top: auto;
        padding-top: 23px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 18px;
    }

    .offer-price-wrap {
        min-width: 0;
    }

    .price-caption {
        display: block;
        margin-bottom: 4px;
        color: #8a9994;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

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

    .price-line strong {
        color: var(--offers-green);
        font-family: "Playfair Display", Georgia, serif;
        font-size: 24px;
        font-weight: 600;
        white-space: nowrap;
    }

    .price-line del {
        color: #9aa7a3;
        font-size: 11px;
        white-space: nowrap;
    }

    .offer-details-button {
        min-height: 43px;
        padding: 0 15px;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 11px;
        border: 1px solid var(--offers-green);
        background: var(--offers-green);
        color: #ffffff;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .55px;
        text-decoration: none;
        text-transform: uppercase;
        transition:
            background .25s ease,
            border-color .25s ease,
            transform .25s ease;
    }

    .offer-details-button:hover {
        border-color: var(--offers-gold);
        background: var(--offers-gold);
        color: var(--offers-deep-green);
        transform: translateX(2px);
    }

    .button-arrow {
        font-size: 16px;
        line-height: 1;
    }

    /*
     * Pagination
     */
    .offers-pagination {
        margin-top: 50px;
    }

    .offers-pagination nav {
        width: 100%;
    }

    .offers-pagination nav > div:first-child {
        display: none;
    }

    .offers-pagination nav > div:last-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .offers-pagination nav p {
        margin: 0;
        color: var(--offers-text);
        font-size: 12px;
    }

    .offers-pagination nav span[aria-current="page"] > span,
    .offers-pagination nav a {
        min-width: 38px;
        min-height: 38px;
        padding: 8px 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--offers-border) !important;
        border-radius: 0 !important;
        background: #ffffff !important;
        color: var(--offers-green) !important;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        box-shadow: none !important;
    }

    .offers-pagination nav span[aria-current="page"] > span {
        border-color: var(--offers-green) !important;
        background: var(--offers-green) !important;
        color: #ffffff !important;
    }

    .offers-pagination svg {
        width: 16px;
        height: 16px;
    }

    /*
     * Empty state
     */
    .offers-empty-state {
        max-width: 760px;
        margin: 10px auto;
        padding: 75px 35px;
        border: 1px solid var(--offers-border);
        background: #ffffff;
        text-align: center;
        box-shadow: 0 16px 45px rgba(18, 58, 48, .07);
    }

    .empty-state-icon {
        width: 76px;
        height: 76px;
        margin: 0 auto 25px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(199, 163, 90, .4);
        border-radius: 50%;
        background: var(--offers-cream);
        color: var(--offers-gold);
        font-family: "Playfair Display", Georgia, serif;
        font-size: 30px;
    }

    .offers-empty-state h2 {
        margin: 16px 0 13px;
        color: var(--offers-heading);
        font-family: "Playfair Display", Georgia, serif;
        font-size: clamp(31px, 5vw, 45px);
        font-weight: 500;
    }

    .offers-empty-state p {
        max-width: 560px;
        margin: 0 auto;
        color: var(--offers-text);
        font-size: 14px;
        line-height: 1.8;
    }

    .empty-state-actions {
        margin-top: 27px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .primary-action-button,
    .secondary-action-button {
        min-height: 47px;
        padding: 0 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .7px;
        text-decoration: none;
        text-transform: uppercase;
    }

    .primary-action-button {
        background: var(--offers-green);
        color: #ffffff;
    }

    .secondary-action-button {
        border: 1px solid var(--offers-green);
        color: var(--offers-green);
    }

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

    .offers-cta-section::after {
        position: absolute;
        top: -210px;
        right: -120px;
        width: 500px;
        height: 500px;
        z-index: -1;
        border: 1px solid rgba(227, 203, 148, .17);
        border-radius: 50%;
        content: "";
        box-shadow:
            0 0 0 60px rgba(227, 203, 148, .025),
            0 0 0 120px rgba(227, 203, 148, .018);
    }

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

    .offers-cta-content {
        max-width: 720px;
    }

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

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

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

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

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

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

    @media (max-width: 767px) {
        .offers-hero {
            min-height: 540px;
        }

        .offers-hero-container {
            padding-top: 95px;
            padding-bottom: 80px;
        }

        .offers-breadcrumb {
            margin-bottom: 38px;
        }

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

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

        .package-filter-wrap {
            top: -30px;
            padding: 23px 18px;
        }

        .package-filter-heading {
            align-items: flex-start;
            flex-direction: column;
            gap: 12px;
        }

        .package-filter-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .package-filter-button {
            width: 100%;
            padding: 9px 10px;
        }

        .offers-listing-section {
            padding-top: 25px;
            padding-bottom: 75px;
        }

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

        .offer-card-image {
            height: 250px;
        }

        .offer-card-content {
            padding: 24px 20px 22px;
        }

        .offer-card-footer {
            align-items: stretch;
            flex-direction: column;
        }

        .offer-details-button {
            width: 100%;
            justify-content: center;
        }

        .offers-pagination nav > div:last-child {
            align-items: flex-start;
            flex-direction: column;
        }

        .offers-cta-section {
            padding: 68px 0;
        }

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

    @media (max-width: 480px) {
        .package-filter-list {
            grid-template-columns: 1fr;
        }

        .selected-filter-info {
            align-items: flex-start;
            flex-direction: column;
            gap: 8px;
        }

        .offer-inclusions {
            grid-template-columns: 1fr;
        }

        .offer-card-image {
            height: 225px;
        }

        .offer-card-badges {
            align-items: flex-start;
            flex-direction: column;
        }

        .offers-empty-state {
            padding: 55px 20px;
        }

        .empty-state-actions,
        .primary-action-button,
        .secondary-action-button {
            width: 100%;
        }
    }
</style>
@endpush