@extends('layout.front.master')

@section('title', ($product->name ?? 'Producto') . ' | ' . config('site.name', 'CD-System'))
@section('description', \Illuminate\Support\Str::limit($product->description ?? '', 160))

@push('head')
{{-- Structured Data para SEO --}}
<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "{{ $product->name }}",
  "description": "{{ addslashes($product->description) }}",
  @if($product->category)
  "category": "{{ $product->category->name }}",
  @endif
  @if($product->images->count() > 0)
  "image": [
    @foreach($product->images as $key => $image)
    "{{ asset($image->image_path) }}"@if(!$loop->last),@endif
    @endforeach
  ],
  @endif
  "offers": {
    "@type": "Offer",
    "availability": "{{ $product->is_active ? 'https://schema.org/InStock' : 'https://schema.org/OutOfStock' }}",
    "priceSpecification": {
      "@type": "PriceSpecification",
      "priceCurrency": "ARS",
      "price": "{{ $product->price ?? 0 }}",
      "valueAddedTaxIncluded": true
    }
  },
  "additionalProperty": [
    @foreach($product->tags as $tag)
    {
      "@type": "PropertyValue",
      "name": "Característica",
      "value": "{{ $tag->name }}"
    }@if(!$loop->last),@endif
    @endforeach
  ]
}
</script>
@endpush

@section('content')

@php
    // Detectar si el demo activo es demo-photography-3 para personalizar la vista
    $activeDemo = get_active_demo();
    $isPhotography3 = ($activeDemo === 'demo-photography-3');
    // Determinar clases CSS según si hay sidebar o no
    $sidebarColClass = $isPhotography3 ? 'd-none' : 'col-lg-3 order-2 order-lg-1 d-none d-lg-block';
    $contentColClass = $isPhotography3 ? 'col-12' : 'col-lg-9 order-1 order-lg-2';

    $moduleConfig = get_module_page_header_config('products');
    $pageTitle = $product->name ?? $moduleConfig['title'];
    $pageSubtitle = isset($product->category) ? 'Equipo de ' . $product->category->name : $moduleConfig['subtitle'];

    // Sin imagen de fondo por defecto - usar color sólido
    $backgroundImage = null;
@endphp

@if(view()->exists('modules.products.frontend.partials.dynamic-header'))
    @include('modules.products.frontend.partials.dynamic-header', [
        'product' => $product,
        'backgroundImage' => $backgroundImage
    ])
@else
    {{-- Fallback a header moderno si no existe el dinámico --}}
    <x-page-header
        :title="$pageTitle"
        :subtitle="$pageSubtitle"
        :icon="$moduleConfig['icon'] ?? 'fas fa-box'"
        :breadcrumbs="get_module_breadcrumbs('products', $product->name ?? null)"
        background="primary" />
@endif

<div class="custom-page-wrapper pb-1">
    <div class="container container-xl-custom pt-5 mt-5">
        <div class="shop py-4">
            <div class="container-fluid">
        {{-- Mobile Filter Button (oculto en demo-photography-3) --}}
        @if(!$isPhotography3)
        <div class="row mb-3 d-lg-none">
            <div class="col-12">
                        <button class="btn btn-outline-primary btn-modern w-100 d-flex align-items-center justify-content-center products-filter-btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#productsFiltersOffcanvas" aria-controls="productsFiltersOffcanvas">
                    <i class="fas fa-filter me-2"></i>
                            <span>{{ __('Filtros') }}</span>
                </button>
            </div>
        </div>
        @endif

        <div class="row">
            {{-- Sidebar Filters for Products (oculto en demo-photography-3) --}}
            @if(!$isPhotography3)
                    <div class="{{ $sidebarColClass }}">
                <div class="card border-0 shadow-modern rounded-lg mb-4 products-sidebar-sticky">
                    <div class="card-header bg-color-grey-scale-1 border-bottom border-color-grey-scale-2 p-4">
                        <h5 class="mb-0 font-weight-bold text-color-dark">
                                    <i class="fas fa-filter me-2 text-color-grey"></i>{{ __('Filtros') }}
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        @include('modules.products.frontend.partials.filters-content')
                    </div>
                </div>
            </div>

            {{-- Mobile Offcanvas Filters (oculto en demo-photography-3) --}}
            <div class="offcanvas offcanvas-start" tabindex="-1" id="productsFiltersOffcanvas" aria-labelledby="productsFiltersOffcanvasLabel">
                <div class="offcanvas-header border-bottom">
                    <h5 class="offcanvas-title font-weight-bold" id="productsFiltersOffcanvasLabel">
                                <i class="fas fa-filter me-2"></i>{{ __('Filtros') }}
                    </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="{{ __('Cerrar') }}"></button>
                </div>
                <div class="offcanvas-body p-0">
                    <div class="p-4">
                        @include('modules.products.frontend.partials.filters-content')
                    </div>
                </div>
            </div>
            @endif

            {{-- Main Content Area --}}
                    <div class="{{ $contentColClass }}">
                <div class="row">
                    <div class="col-lg-8">
                            @if($product->images->count() > 0)
                                    {{-- Galería con Lightbox --}}
                                    <div class="thumb-gallery-wrapper lightbox" data-plugin-options="{'delegate': 'a.shop-gallery', 'type': 'image', 'gallery': {'enabled': true}, 'mainClass': 'mfp-with-zoom', 'zoom': {'enabled': true, 'duration': 300}}">
                                        {{-- Galería principal usando Bootstrap Carousel --}}
                                        <div id="productGalleryMain" class="carousel slide mb-3" data-bs-ride="carousel">
                                    <div class="carousel-inner">
                                        @foreach($product->images as $key => $image)
                                                    @php
                                                        $imagePath = $image->image_path;
                                                        if (!\Illuminate\Support\Str::startsWith($imagePath, ['http://', 'https://', '/'])) {
                                                            $imagePath = asset($imagePath);
                                                        }
                                                    @endphp
                                                    <div class="carousel-item {{ $key === 0 ? 'active' : '' }}">
                                                        <a href="{{ $imagePath }}" class="shop-gallery d-block" title="{{ $product->name }}">
                                                            <img alt="{{ $product->name }}" class="img-fluid w-100" src="{{ $imagePath }}" loading="lazy" onerror="this.onerror=null; this.src='{{ asset('cd-project/img/demos/transportation-logistic/generic/generic-1.jpg') }}';">
                                                        </a>
                                            </div>
                                        @endforeach
                                    </div>
                                    @if($product->images->count() > 1)
                                                <button class="carousel-control-prev" type="button" data-bs-target="#productGalleryMain" data-bs-slide="prev">
                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                    <span class="visually-hidden">{{ __('Anterior') }}</span>
                                        </button>
                                                <button class="carousel-control-next" type="button" data-bs-target="#productGalleryMain" data-bs-slide="next">
                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                    <span class="visually-hidden">{{ __('Siguiente') }}</span>
                                        </button>
                                    @endif
                                        </div>

                                        @if($product->images->count() > 1)
                                            {{-- Miniaturas --}}
                                            <div class="thumb-gallery-thumbs d-flex gap-2 flex-wrap">
                                        @foreach($product->images as $key => $image)
                                                    @php
                                                        $imagePath = $image->image_path;
                                                        if (!\Illuminate\Support\Str::startsWith($imagePath, ['http://', 'https://', '/'])) {
                                                            $imagePath = asset($imagePath);
                                                        }
                                                    @endphp
                                                    <div class="thumb-item cur-pointer {{ $key === 0 ? 'active' : '' }}" data-slide-to="{{ $key }}" style="width: calc(20% - 8px); max-width: 100px; cursor: pointer; opacity: 0.7; transition: opacity 0.3s;">
                                                        <img alt="{{ $product->name }}" class="img-fluid w-100 border rounded" src="{{ $imagePath }}" loading="lazy" onerror="this.onerror=null; this.src='{{ asset('cd-project/img/demos/transportation-logistic/generic/generic-1.jpg') }}';">
                                                    </div>
                                        @endforeach
                                            </div>
                                        @endif
                                    </div>
                                @else
                                    {{-- Placeholder cuando no hay imágenes --}}
                                    <div class="thumb-gallery-wrapper">
                                        <div class="d-flex align-items-center justify-content-center bg-light border rounded" style="height: 400px;">
                                            <div class="text-center text-muted">
                                                <i class="fas fa-image fa-4x mb-3"></i>
                                                <h5>{{ $product->name }}</h5>
                                                <p class="mb-0">{{ __('Imagen no disponible') }}</p>
                                            </div>
                                    </div>
                                </div>
                            @endif
                    </div>
                    <div class="col-lg-4">
                        <div class="summary entry-summary position-relative">
                            <h1 class="mb-0 font-weight-bold text-7">{{ $product->name }}</h1>
                            <div class="pb-0 clearfix d-flex align-items-center">
                                <div title="Rated 5 out of 5" class="float-start">
                                    <input type="text" class="d-none" value="5" title="" data-plugin-star-rating data-plugin-options="{'displayOnly': true, 'color': 'primary', 'size':'xs'}">
                                </div>
                            </div>

                            <div class="divider divider-small">
                                <hr class="bg-color-grey-400">
                            </div>

                            <p class="text-3-5 my-3">{{ $product->description }}</p>

                            <ul class="list list-unstyled text-2">
                                        <li class="mb-2">{{ __('DISPONIBILIDAD') }}:
                                    <strong class="text-color-dark">
                                                {{ $product->is_active ? __('DISPONIBLE') : __('AGOTADO') }}
                                    </strong>
                                        </li>
                                        @if(isset($product->official_link) && $product->official_link)
                                        <li class="mb-2">
                                            <i class="fas fa-external-link-alt text-color-primary me-2"></i>
                                            <a href="{{ $product->official_link }}" target="_blank" class="text-color-primary text-decoration-none">
                                                <strong>{{ __('Ver Documentación Técnica Oficial') }}</strong>
                                            </a>
                                            <br><small class="text-muted">{{ __('Especificaciones completas') }}</small>
                                        </li>
                                        @endif
                                    </ul>

                                    <hr>
                                    <div class="d-flex flex-wrap gap-2 mb-3">
                                        <a href="{{ config('site.contact.phone') ? 'tel:' . config('site.contact.phone') : '#' }}" class="btn btn-primary btn-modern text-uppercase">
                                            <i class="fas fa-phone me-2"></i>{{ __('Llamar para Cotizar') }}
                                        </a>
                                        <a href="mailto:{{ config('site.contact.email', 'info@example.com') }}?subject={{ __('Consulta sobre') }} {{ $product->name }}&body={{ __('Hola, me interesa obtener más información y cotización sobre el producto:') }} {{ $product->name }}"
                                           class="btn btn-dark btn-modern text-uppercase">
                                            <i class="fas fa-envelope me-2"></i>{{ __('Solicitar Cotización') }}
                                        </a>
                                    </div>
                                    <hr>

                                    <div class="d-flex align-items-center">
                                        <a href="#" class="d-flex align-items-center text-decoration-none text-color-dark text-color-hover-primary font-weight-semibold text-2 me-3">
                                            {{ __('COMPARTIR EN') }}:
                                        </a>
                                        <ul class="social-icons social-icons-medium social-icons-clean-with-border social-icons-clean-with-border-border-grey social-icons-clean-with-border-icon-dark me-3 mb-0">
                                            <li class="social-icons-facebook">
                                                <a href="http://www.facebook.com/sharer.php?u={{ urlencode(request()->url()) }}" target="_blank" data-bs-toggle="tooltip" data-bs-animation="false" data-bs-placement="top" title="{{ __('Share On Facebook') }}">
                                                    <i class="fab fa-facebook-f"></i>
                                                </a>
                                            </li>
                                            <li class="social-icons-twitter">
                                                <a href="https://twitter.com/share?url={{ urlencode(request()->url()) }}&text={{ urlencode($product->name) }}" target="_blank" data-bs-toggle="tooltip" data-bs-animation="false" data-bs-placement="top" title="{{ __('Share On Twitter') }}">
                                                    <i class="fab fa-x-twitter"></i>
                                                </a>
                                            </li>
                                            <li class="social-icons-email">
                                                <a href="mailto:?Subject={{ urlencode($product->name) }}&Body={{ urlencode(request()->url()) }}" data-bs-toggle="tooltip" data-bs-animation="false" data-bs-placement="top" title="{{ __('Share By Email') }}">
                                                    <i class="far fa-envelope"></i>
                                                </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                        </div>
                        <div class="row">
                    <div class="col">
                        <div id="description" class="tabs tabs-simple tabs-simple-full-width-line tabs-product tabs-dark mb-2">
                            <ul class="nav nav-tabs justify-content-start">
                                        <li class="nav-item"><a class="nav-link active font-weight-bold text-3 text-uppercase py-2 px-3" href="#productDescription" data-bs-toggle="tab">{{ __('Descripción') }}</a></li>
                                        <li class="nav-item"><a class="nav-link font-weight-bold text-3 text-uppercase py-2 px-3" href="#productInfo" data-bs-toggle="tab">{{ __('Información Técnica') }}</a></li>
                            </ul>
                            <div class="tab-content p-0">
                                <div class="tab-pane px-0 py-3 active" id="productDescription">
                                            <div class="text-3-5">
                                    {{ $product->description }}
                                </div>

                                            @if($product->tags->count() > 0)
                                            <div class="mt-4">
                                                <h6 class="font-weight-bold text-color-dark mb-2">{{ __('Características Principales') }}:</h6>
                                                <div class="d-flex flex-wrap">
                                                    @foreach($product->tags as $tag)
                                                        <span class="badge badge-primary badge-lg rounded-pill me-2 mb-2">{{ $tag->name }}</span>
                                                    @endforeach
                                                </div>
                                            </div>
                                            @endif
                                        </div>
                                        <div class="tab-pane px-0 py-3" id="productInfo">
                                            <table class="table table-striped m-0">
                                                <tbody>
                                                    <tr>
                                                        <th class="border-top-0">{{ __('Categoría') }}:</th>
                                                        <td class="border-top-0">{{ $product->category->name ?? 'N/A' }}</td>
                                                    </tr>
                                                    @if($product->tags->count() > 0)
                                                    <tr>
                                                        <th>{{ __('Características') }}:</th>
                                                        <td>
                                                            @foreach($product->tags as $tag)
                                                                <span class="badge badge-dark me-1">{{ $tag->name }}</span>
                                                            @endforeach
                                                        </td>
                                                    </tr>
                                                    @endif
                                                    @if(isset($product->official_link) && $product->official_link)
                                                    <tr>
                                                        <th>{{ __('Documentación') }}:</th>
                                                        <td>
                                                            <a href="{{ $product->official_link }}" target="_blank" class="text-color-primary">
                                                                {{ __('Ver especificaciones técnicas completas') }}
                                                                <i class="fas fa-external-link-alt ms-1"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    @endif
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                        </div>
                    </div>
                </div>

                <hr class="solid my-5">

                        <h4 class="mb-3">{{ __('Productos') }} <strong>{{ __('Relacionados') }}</strong></h4>
                <div class="products row">
                    <div class="col">
                        @if($relatedProducts->count() > 0)
                            <div class="owl-carousel owl-theme show-nav-title nav-dark mb-0" data-plugin-options="{'loop': false, 'autoplay': false,'items': 4, 'nav': true, 'dots': false, 'margin': 20, 'autoplayHoverPause': true, 'autoHeight': true}">
                                @foreach($relatedProducts as $relatedProduct)
                                    <div class="product mb-0">
                                        <div class="product-thumb-info border-0 mb-3">
                                            <a href="{{ route('front.products.show', $relatedProduct->slug) }}">
                                                <div class="product-thumb-info-image">
                                                    @if($relatedProduct->images->count() > 0)
                                                                @php
                                                                    $relatedImage = $relatedProduct->images->first();
                                                                    $relatedImagePath = $relatedImage->image_path;
                                                                    if (!\Illuminate\Support\Str::startsWith($relatedImagePath, ['http://', 'https://', '/'])) {
                                                                        $relatedImagePath = asset($relatedImagePath);
                                                                    }
                                                                @endphp
                                                                <img alt="{{ $relatedProduct->name }}" class="img-fluid" src="{{ $relatedImagePath }}" loading="lazy" onerror="this.onerror=null; this.src='{{ asset('cd-project/img/demos/transportation-logistic/generic/generic-1.jpg') }}';">
                                                    @else
                                                                <div class="d-flex align-items-center justify-content-center bg-light" style="height: 200px;">
                                                                    <div class="text-center text-muted">
                                                                        <i class="fas fa-image fa-2x mb-2"></i>
                                                                        <p class="mb-0 text-1">{{ \Illuminate\Support\Str::limit($relatedProduct->name, 20) }}</p>
                                                                    </div>
                                                                </div>
                                                    @endif
                                                </div>
                                            </a>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                        <a href="{{ route('front.products.index', ['category' => $relatedProduct->category->slug ?? '']) }}" class="d-block text-uppercase text-decoration-none text-color-default text-color-hover-primary line-height-1 text-0 mb-1">
                                                            {{ $relatedProduct->category->name ?? __('Categoría') }}
                                                </a>
                                                <h3 class="text-3-5 font-weight-medium font-alternative text-transform-none line-height-3 mb-0">
                                                    <a href="{{ route('front.products.show', $relatedProduct->slug) }}" class="text-color-dark text-color-hover-primary">
                                                        {{ $relatedProduct->name }}
                                                    </a>
                                                </h3>
                                            </div>
                                        </div>
                                        <div class="mb-2">
                                                    @foreach ($relatedProduct->tags->take(3) as $tag)
                                                <span class="badge badge-dark badge-sm rounded-pill text-uppercase px-2 py-1 me-1">{{ $tag->name }}</span>
                                            @endforeach
                                                    @if($relatedProduct->tags->count() > 3)
                                                        <span class="badge badge-secondary badge-sm rounded-pill text-uppercase px-2 py-1 me-1">+{{ $relatedProduct->tags->count() - 3 }}</span>
                                                    @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="text-center py-5">
                                <div class="alert alert-info border-0 shadow-sm">
                                    <i class="fas fa-info-circle me-2"></i>
                                            <strong>{{ __('No hay productos relacionados para este producto') }}</strong>
                                            <p class="mb-0 mt-2 text-muted">{{ __('Explora otras categorías para descubrir más productos.') }}</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
        </div>
    </div>
</div>

{{-- CTA Flotante para Móviles --}}
<div class="floating-cta d-lg-none position-fixed bottom-0 start-0 w-100 bg-white border-top shadow-lg p-3" style="z-index: 1050;">
    <div class="container-fluid">
        <div class="row g-2">
            <div class="col-6">
                <a href="{{ config('site.contact.phone') ? 'tel:' . config('site.contact.phone') : '#' }}" class="btn btn-primary btn-sm w-100">
                    <i class="fas fa-phone me-1"></i>{{ __('Llamar') }}
                </a>
            </div>
            <div class="col-6">
                <a href="mailto:{{ config('site.contact.email', 'info@example.com') }}?subject={{ __('Consulta sobre') }} {{ $product->name }}" class="btn btn-dark btn-sm w-100">
                    <i class="fas fa-envelope me-1"></i>{{ __('Email') }}
                </a>
            </div>
        </div>
        <div class="text-center mt-2">
            <small class="text-muted">{{ $product->name }} - {{ __('Cotización gratuita') }}</small>
        </div>
    </div>
</div>

{{-- JavaScript específico para galería de productos --}}
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Sincronizar miniaturas con carousel principal
    const mainCarousel = document.getElementById('productGalleryMain');
    const thumbItems = document.querySelectorAll('.thumb-item');

    if (mainCarousel && thumbItems.length > 0) {
        // Click en miniatura para cambiar slide
        thumbItems.forEach((thumb, index) => {
            thumb.addEventListener('click', function() {
                const carousel = bootstrap.Carousel.getInstance(mainCarousel) || new bootstrap.Carousel(mainCarousel);
                carousel.to(index);

                // Actualizar clase active en miniaturas
                thumbItems.forEach(t => t.classList.remove('active'));
                thumb.classList.add('active');
            });
        });

        // Actualizar miniatura activa cuando cambia el carousel principal
        mainCarousel.addEventListener('slid.bs.carousel', function(event) {
            const activeIndex = event.to;
            thumbItems.forEach(t => t.classList.remove('active'));
            if (thumbItems[activeIndex]) {
                thumbItems[activeIndex].classList.add('active');
            }
        });
    }

    // Mejorar CTA flotante
    const floatingCta = document.querySelector('.floating-cta');
    if (floatingCta) {
        // Ocultar/mostrar según scroll
        let lastScrollTop = 0;
        window.addEventListener('scroll', function() {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

            if (scrollTop > lastScrollTop && scrollTop > 200) {
                // Scrolling down
                floatingCta.style.transform = 'translateY(100%)';
            } else {
                // Scrolling up
                floatingCta.style.transform = 'translateY(0)';
            }
            lastScrollTop = scrollTop;
        });
    }

    // Cerrar offcanvas al hacer click en un filtro en mobile
    const filterLinks = document.querySelectorAll('#productsFiltersOffcanvas .products-filter-link, #productsFiltersOffcanvas .products-tag-link');
    const offcanvas = document.getElementById('productsFiltersOffcanvas');

    if (offcanvas && filterLinks.length > 0) {
        filterLinks.forEach(link => {
            link.addEventListener('click', function() {
                setTimeout(function() {
                    const bsOffcanvas = bootstrap.Offcanvas.getInstance(offcanvas);
                    if (bsOffcanvas) {
                        bsOffcanvas.hide();
                    }
                }, 100);
            });
        });
    }

    // Initialize Porto animations if available
    if (typeof theme !== 'undefined' && theme.PluginAnimateViewport) {
        theme.PluginAnimateViewport.initialize();
    }
});
</script>
@endpush

@push('styles')
<style>
/* ===== OPTIMIZACIONES ESPECÍFICAS PRODUCTO INDIVIDUAL ===== */

/* Galería de producto optimizada */
.thumb-gallery-wrapper {
    position: relative;
}

#productGalleryMain {
    position: relative;
}

#productGalleryMain .carousel-control-prev,
#productGalleryMain .carousel-control-next {
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
    transition: all 0.3s ease;
}

#productGalleryMain:hover .carousel-control-prev,
#productGalleryMain:hover .carousel-control-next {
    opacity: 1;
}

#productGalleryMain .carousel-control-prev {
    left: 15px;
}

#productGalleryMain .carousel-control-next {
    right: 15px;
}

#productGalleryMain .carousel-control-prev:hover,
#productGalleryMain .carousel-control-next:hover {
    background: var(--bs-primary);
    transform: translateY(-50%) scale(1.1);
}

/* Miniaturas optimizadas */
.thumb-gallery-thumbs {
    margin-top: 10px;
}

.thumb-item {
    cursor: pointer;
    transition: all 0.3s ease;
}

.thumb-item:hover {
    opacity: 1 !important;
    transform: scale(1.05);
}

.thumb-item.active {
    opacity: 1 !important;
}

.thumb-item.active img,
.thumb-item:hover img {
    border-color: var(--bs-primary) !important;
    border-width: 2px !important;
}

.thumb-item img {
    border: 2px solid transparent;
    border-radius: 4px;
    transition: border-color 0.3s ease;
}

/* Productos relacionados optimizados */
.products .product {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.products .product:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* CTA flotante mejorado */
.floating-cta {
    animation: slideUp 0.3s ease-out;
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.95) !important;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.floating-cta .btn {
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.floating-cta .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Responsive optimizations */
@media (max-width: 991.98px) {
    body {
        padding-bottom: 100px;
    }

    .thumb-gallery-detail .owl-nav button {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }

    .thumb-gallery-detail .owl-nav .owl-prev {
        left: 10px;
    }

    .thumb-gallery-detail .owl-nav .owl-next {
        right: 10px;
    }
}

@media (max-width: 576px) {
    .badge {
        font-size: 0.7rem;
        margin-bottom: 0.25rem;
    }

    .thumb-gallery-detail .owl-nav {
        display: none;
    }
}

/* Lightbox optimizations */
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
    opacity: 0;
    transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}

.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container,
.mfp-with-zoom.mfp-removing.mfp-bg {
    opacity: 0;
}
</style>
@endpush

@endsection