/**
 * Floating Ticket Button — ftb-button.css
 *
 * This stylesheet handles:
 *  - Base button layout & display
 *  - Entrance animations (slide-up, fade)
 *  - Pulse / glow ring animation
 *  - Hover motion variants (class-driven so JS can swap them)
 *  - Responsive adjustments
 *  - Elementor widget in-canvas styles
 *
 * Dynamic values (colours, size, position) are injected as
 * an inline <style> block by FTB_Frontend::generate_inline_css().
 */

/* ── Reset & Base ─────────────────────────────────────────── */

#ftb-floating-btn-wrap {
    /* Wrapper is transparent; the <a> is the visible element */
    pointer-events: none; /* clicks pass through the wrapper */
}

#ftb-floating-btn {
    /* Layout */
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    white-space:     nowrap;
    text-decoration: none;
    cursor:          pointer;
    pointer-events:  all; /* re-enable on the link itself */
    user-select:     none;

    /* Smooth transitions for colour, shadow, transform */
    transition:
        background-color 0.25s ease,
        color            0.25s ease,
        transform        0.30s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow       0.30s ease;

    /* Stacking context for the ::before pulse ring */
    position: relative;
    isolation: isolate;

    /* Prevent Elementor column padding from shifting position */
    line-height: 1.3;
}

/* Focus ring — accessibility */
#ftb-floating-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* Icon vertical alignment */
#ftb-floating-btn .dashicons {
    font-size: 1.15em;
    width:     1.15em;
    height:    1.15em;
    line-height: 1;
    flex-shrink: 0;
}

/* ── Pulse / Glow Ring ────────────────────────────────────── */

/*
 * A ::before pseudo-element sits behind the button and pulses outward.
 * The ring colour is injected by inline CSS (matching bg_color).
 */
#ftb-floating-btn.ftb-pulse::before {
    content:       '';
    position:      absolute;
    inset:         0;
    border-radius: inherit;        /* matches the button's border-radius */
    z-index:       -1;
    opacity:       0;
    animation:     ftb-pulse-ring 2.4s ease-out infinite;
}

@keyframes ftb-pulse-ring {
    0%   { transform: scale(1);    opacity: 0.70; }
    60%  { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}

/* ── Entrance Animations ──────────────────────────────────── */

/*
 * .ftb-hidden is applied by JS on page-load when display_rule='scroll'.
 * Without scroll-based display, the class is removed immediately so the
 * entrance animation plays once on load.
 */

/* Slide-up entrance */
#ftb-floating-btn.ftb-entrance-slide-up {
    animation: ftb-slide-up 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#ftb-floating-btn.ftb-entrance-slide-up.ftb-hidden {
    animation: none;
    transform: translateY(80px);
    opacity:   0;
}
#ftb-floating-btn.ftb-entrance-slide-up.ftb-reveal {
    animation: ftb-slide-up 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes ftb-slide-up {
    from { transform: translateY(80px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Fade entrance */
#ftb-floating-btn.ftb-entrance-fade {
    animation: ftb-fade-in 0.55s ease both;
}
#ftb-floating-btn.ftb-entrance-fade.ftb-hidden {
    animation: none;
    opacity:   0;
}
#ftb-floating-btn.ftb-entrance-fade.ftb-reveal {
    animation: ftb-fade-in 0.55s ease both;
}

@keyframes ftb-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Hover Effect Variants ────────────────────────────────── */

/*
 * When hover_effect is set via the admin page, the matching CSS is
 * injected inline. For the Elementor widget, class-based overrides
 * are used so Elementor's style engine does not conflict.
 */

/* Elementor widget — lift */
.ftb-el-btn.ftb-hover-lift {
    transition:
        background-color 0.25s ease,
        color            0.25s ease,
        transform        0.30s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow       0.30s ease;
}
.ftb-el-btn.ftb-hover-lift:hover {
    transform: translateY(-4px);
}

/* Elementor widget — grow */
.ftb-el-btn.ftb-hover-grow {
    transition:
        background-color 0.25s ease,
        color            0.25s ease,
        transform        0.30s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow       0.30s ease;
}
.ftb-el-btn.ftb-hover-grow:hover {
    transform: scale(1.07);
}

/* ── Elementor Widget Container ───────────────────────────── */

.ftb-elementor-wrap {
    display:     flex;
    align-items: center;
}

/* Base styles shared with the standalone button */
.ftb-el-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    text-decoration: none;
    cursor:          pointer;
    white-space:     nowrap;
    transition:
        background-color 0.25s ease,
        color            0.25s ease,
        transform        0.30s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow       0.30s ease;

    /* Pulse ring support */
    position:  relative;
    isolation: isolate;
}

.ftb-el-btn.ftb-pulse::before {
    content:       '';
    position:      absolute;
    inset:         0;
    border-radius: inherit;
    z-index:       -1;
    opacity:       0;
    background:    currentColor;
    animation:     ftb-pulse-ring 2.4s ease-out infinite;
}

/* ── Responsive Mobile Adjustments ───────────────────────── */

@media ( max-width: 480px ) {
    #ftb-floating-btn {
        /* Slightly smaller on very small screens */
        font-size: 13px !important;
        padding:   11px 18px !important;
    }
}

/* ── Elementor Editor Compatibility ──────────────────────── */

/*
 * In the Elementor editor, fixed-position elements can obscure
 * the panel controls. We disable fixed positioning inside the
 * editor canvas so editing remains comfortable.
 */
.elementor-editor-active #ftb-floating-btn-wrap {
    display: none;
}