<style>

    html, body {
        height: 100%;
        margin: 0;
    }

    body {
        display: flex;
        flex-direction: column;
    }

    main {
        flex: 1;
    }

    .glass-background-footer {
        background-color: rgba(13, 104, 137, 0.85) !important;
        border: none;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(8px);
        transition: background-color 0.2s ease, backdrop-filter 0.2s ease;
        z-index: 10;
    }

    .link-buttons {
        padding-left: 0.45rem;
        padding-right: 0.45rem;
    }

    .special-link-buttons {
        padding-left: 0.52rem;
        padding-right: 0.52rem;
    }

    @media print {
        footer {
            display: none;
        }
    }
</style>

<footer class="py-3 shadow-sm border-top glass-background-footer">
    <div class="gap-2 container-fluid d-flex flex-column flex-md-row justify-content-center align-items-center">

        @if ($display_social_media)
            <!-- Texto -->
            <div class="mx-4 text-muted small">
                <strong style="color: #ccdde0;">
                    {{ __('errors')['503']['support'] }}
                </strong>
            </div>

            <!-- Íconos -->
            <div class="gap-2 d-flex">
                <a href="https://wa.me/529511298899" class="btn btn-outline-light link-buttons rounded-circle" title="WhatsApp">
                    <i class="fa-brands fa-whatsapp"></i>
                </a>

                <a href="mailto:harsisoftware@gmail.com" class="btn btn-outline-light link-buttons rounded-circle" title="Correo">
                    <i class="fa-regular fa-envelope"></i>
                </a>

                <a href="https://harsi.mx" class="ms-3 btn btn-outline-light link-buttons rounded-circle" title="Sitio web">
                    <i class="fa-solid fa-globe"></i>
                </a>

                <a href="https://www.facebook.com/p/Harsi-100082961120846/" class="btn btn-outline-light special-link-buttons rounded-circle" title="Facebook">
                    <i class="fa-brands fa-facebook-f"></i>
                </a>

                <a href="http://instagram.com/_u/harsimx/" class="btn btn-outline-light link-buttons rounded-circle" title="Instagram">
                    <i class="fa-brands fa-instagram"></i>
                </a>
            </div>

        @else
            <div class="col-12 col-md text-muted small">
                <strong style="color: #000000a9 !important">© Copyright {{ date('Y') }} Harsi Hotelería</strong>
                <span style="color: #ccdde0">&nbsp;|&nbsp; {{ __('footer')['copyright'] }}</span>
            </div>

            <div class="col-12 col-md text-muted small">
                <strong style="color: #000000a9 !important">{{ __('footer')['creator'] }}</strong>&nbsp;
                <a href="https://harsi.mx/" target="_blank" class="text-muted" style="color: #ccdde0 !important">
                    <span class="text-white font-weight-bold">HARSI</span> &nbsp;|&nbsp; HAZLO SIMPLE, HAZLO ÚTIL ®
                </a>
            </div>
        @endif

    </div>
</footer>

