/*
|--------------------------------------------------------------------------
| Floating Destination CTA
|--------------------------------------------------------------------------
*/

.destination-floating-cta {

    position: fixed;

    right: 1.5rem;
    bottom: 1.5rem;

    z-index: 1000;

    display: flex;

    align-items: center;

    gap: 1.25rem;

    max-width: calc(100vw - 3rem);

    padding: .75rem .75rem .75rem 1.15rem;

    background: rgba(255, 255, 255, .96);

    border: 1px solid var(--border);

    border-radius: var(--radius-pill);

    box-shadow: 0 12px 35px rgba(15, 23, 42, .14);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

}


/*
|--------------------------------------------------------------------------
| CTA Content
|--------------------------------------------------------------------------
*/

.destination-floating-cta__content {

    display: flex;

    flex-direction: column;

    min-width: 0;

}


.destination-floating-cta__eyebrow {

    margin-bottom: .15rem;

    color: var(--secondary-dark);

    font-size: .58rem;

    font-weight: var(--fw-semibold);

    line-height: 1.2;

    letter-spacing: .06em;

    text-transform: uppercase;

}


.destination-floating-cta__content strong {

    color: var(--text);

    font-size: .78rem;

    font-weight: var(--fw-semibold);

    line-height: 1.3;

    white-space: nowrap;

}


/*
|--------------------------------------------------------------------------
| CTA Actions
|--------------------------------------------------------------------------
*/

.destination-floating-cta__actions {

    display: flex;

    align-items: center;

    gap: .45rem;

}


/*
|--------------------------------------------------------------------------
| CTA Button
|--------------------------------------------------------------------------
*/

.destination-floating-cta__button {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: .4rem;

    flex: 0 0 auto;

    padding: .68rem .95rem;

    border-radius: var(--radius-pill);

    font-size: .72rem;

    font-weight: var(--fw-semibold);

    line-height: 1;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;

}


/*
|--------------------------------------------------------------------------
| View Tours
|--------------------------------------------------------------------------
*/

.destination-floating-cta__button--tour {

    color: var(--white);

    background: var(--secondary-dark);

    border: 1px solid var(--secondary-dark);

}


.destination-floating-cta__button--tour:hover {

    color: var(--white);

    background: var(--secondary);

    border-color: var(--secondary);

    transform: translateY(-1px);

}


/*
|--------------------------------------------------------------------------
| WhatsApp
|--------------------------------------------------------------------------
*/

.destination-floating-cta__button--whatsapp {

    color: var(--text);

    background: var(--white);

    border: 1px solid var(--border);

}


.destination-floating-cta__button--whatsapp:hover {

    color: var(--text);

    border-color: var(--secondary);

    transform: translateY(-1px);

}


.destination-floating-cta__button--whatsapp i {

    font-size: .9rem;

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 767.98px) {

    .destination-floating-cta {

        right: .75rem;
        bottom: .75rem;
        left: .75rem;

        max-width: none;

        gap: .65rem;

        padding: .6rem;

        border-radius: 1rem;

    }


    .destination-floating-cta__content {

        min-width: 0;

        flex: 1;

    }


    .destination-floating-cta__eyebrow {

        font-size: .5rem;

    }


    .destination-floating-cta__content strong {

        max-width: 170px;

        overflow: hidden;

        font-size: .68rem;

        text-overflow: ellipsis;

        white-space: nowrap;

    }


    .destination-floating-cta__actions {

        gap: .35rem;

    }


    .destination-floating-cta__button {

        padding: .65rem .75rem;

        font-size: .66rem;

    }


    .destination-floating-cta__button--whatsapp {

        padding-left: .7rem;

        padding-right: .7rem;

    }

}