/**
 * Styles for the "Floating Buttons" Elementor widget.
 */

.fahana-fab {
    --fahana-fab-offset-x: 20px;
    --fahana-fab-offset-y: 20px;
    --fahana-fab-wa-size: 56px;

    position: fixed;
    bottom: calc(var(--fahana-fab-offset-y) + env(safe-area-inset-bottom, 0px));
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.fahana-fab--right {
    right: var(--fahana-fab-offset-x);
    align-items: flex-end;
}

.fahana-fab--left {
    left: var(--fahana-fab-offset-x);
    align-items: flex-start;
}

/* En el editor se pinta en el flujo normal para poder seleccionarlo. */
.fahana-fab--editor {
    position: static;
    padding: 10px;
}

.fahana-fab__btn {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
}

/* Antes de llegar al scroll configurado (lo quita floating-buttons.js). */
.fahana-fab.is-before-reveal .fahana-fab__btn {
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    pointer-events: none;
}

.fahana-fab__btn:hover,
.fahana-fab__btn:focus-visible {
    transform: translateY(-2px);
    text-decoration: none;
}

.fahana-fab__btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* WhatsApp */
.fahana-fab__wa {
    width: var(--fahana-fab-wa-size);
    height: var(--fahana-fab-wa-size);
    border-radius: 50%;
    background-color: #25d366;
    color: #fff;
}

.fahana-fab__wa:hover,
.fahana-fab__wa:focus-visible {
    background-color: #1ebe5b;
    color: #fff;
}

/* Icono de Font Awesome (como <i> o como SVG inline según Elementor). */
.fahana-fab__wa-icon {
    display: inline-flex;
    font-size: calc(var(--fahana-fab-wa-size) * 0.55);
    line-height: 1;
}

.fahana-fab__wa-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* Book now: mismo formato que el botón "Search" del buscador de NeoBooking
   (ver .neo-mask-widget-button y --nm-button-search-* en main.scss). */
.fahana-fab__book {
    gap: 8px;
    min-height: 48px;
    padding: 14px 32px;
    border-radius: 9999px;
    background-color: #AC613E;
    color: #fff;
    font-family: "Degular", sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
}

.fahana-fab__book:hover,
.fahana-fab__book:focus-visible {
    background-color: #AC613E;
    color: #fff;
}

/*
 * "Book now" arriba a la derecha, justo debajo del header. La distancia
 * --fahana-fab-top la calcula floating-buttons.js (parte inferior del
 * header en pantalla); WhatsApp se queda abajo en el contenedor.
 */
.fahana-fab--book-top:not(.fahana-fab--editor) .fahana-fab__book {
    position: fixed;
    top: calc(var(--fahana-fab-top, 0px) + var(--fahana-fab-top-gap, 16px));
}

.fahana-fab--book-top.fahana-fab--right:not(.fahana-fab--editor) .fahana-fab__book {
    right: var(--fahana-fab-offset-x);
}

.fahana-fab--book-top.fahana-fab--left:not(.fahana-fab--editor) .fahana-fab__book {
    left: var(--fahana-fab-offset-x);
}

/* Arriba aparece bajando, no subiendo. */
.fahana-fab--book-top.is-before-reveal .fahana-fab__book {
    transform: translateY(-16px);
}

.fahana-fab__book-icon {
    display: inline-flex;
    font-size: 1.1em;
}

.fahana-fab__book-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

@media (max-width: 767px) {
    .fahana-fab--mobile-icon-only .fahana-fab__book {
        width: var(--fahana-fab-wa-size);
        height: var(--fahana-fab-wa-size);
        padding: 0;
        border-radius: 50%;
    }

    .fahana-fab--mobile-icon-only .fahana-fab__book-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/*
 * Móvil: "Book now" como barra a todo el ancho fijada abajo y WhatsApp
 * flotando justo encima. Al final de la página (clase "is-at-end", la pone
 * floating-buttons.js) la barra se desvanece para dejar ver el footer y
 * WhatsApp baja a su posición normal. Mismo corte que el buscador (768px).
 * Los !important ganan a los controles de estilo de Elementor (padding,
 * radio), pensados para la versión píldora de escritorio.
 */
@media (max-width: 768px) {
    /* La altura medida de la barra ya incluye la zona segura del iPhone:
       WhatsApp va justo encima + la distancia configurada. */
    .fahana-fab--mobile-bar:not(.fahana-fab--editor) {
        --fahana-fab-bar-height: 52px;
        --fahana-fab-bar-gap: 12px;

        bottom: calc(var(--fahana-fab-bar-height) + var(--fahana-fab-bar-gap));
        transition: bottom 0.3s ease;
    }

    .fahana-fab--mobile-bar:not(.fahana-fab--editor) .fahana-fab__book {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        min-height: var(--fahana-fab-bar-height);
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 0 !important;
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.15);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    }

    /* La barra móvil manda sobre la posición "arriba" de escritorio. */
    .fahana-fab--mobile-bar.fahana-fab--book-top:not(.fahana-fab--editor) .fahana-fab__book {
        top: auto;
        left: 0;
        right: 0;
    }

    .fahana-fab--mobile-bar:not(.fahana-fab--editor) .fahana-fab__book:hover,
    .fahana-fab--mobile-bar:not(.fahana-fab--editor) .fahana-fab__book:focus-visible {
        transform: none;
    }

    .fahana-fab--mobile-bar.is-at-end {
        bottom: calc(var(--fahana-fab-offset-y) + env(safe-area-inset-bottom, 0px));
    }

    .fahana-fab--mobile-bar.is-at-end .fahana-fab__book,
    .fahana-fab--mobile-bar.is-at-end .fahana-fab__book:hover,
    .fahana-fab--mobile-bar.is-before-reveal .fahana-fab__book,
    .fahana-fab--mobile-bar.is-before-reveal .fahana-fab__book:hover {
        opacity: 0;
        visibility: hidden;
        transform: translateY(100%);
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fahana-fab__btn {
        transition: none;
    }

    .fahana-fab__btn:hover,
    .fahana-fab__btn:focus-visible {
        transform: none;
    }
}