/* Floating Button by Foxco - Frontend CSS v1.0.0 */

/* ------------------------------------------------------------------
   CUSTOM PROPERTIES (set inline per instance)
------------------------------------------------------------------ */
:root {
    --fbf-bg:         #1a1a2e;
    --fbf-text:       #ffffff;
    --fbf-accent:     #df6737;
    --fbf-border:     none;
    --fbf-shadow:     0 4px 20px rgba(0,0,0,0.3);
    --fbf-hover-bg:   #df6737;
    --fbf-hover-text: #ffffff;
    --fbf-radius:     50px;
    --fbf-backdrop:   none;
    --fbf-v-offset:   50%;
    --fbf-z:          9999;
}

/* ------------------------------------------------------------------
   WRAPPER
------------------------------------------------------------------ */
.fbf-wrap {
    position: fixed;
    top:       var(--fbf-v-offset);
    transform: translateY(-50%);
    z-index:   var(--fbf-z);
    pointer-events: none;
}

.fbf-right { right: 0; }
.fbf-left  { left:  0; }

/* ------------------------------------------------------------------
   BUTTON
------------------------------------------------------------------ */
.fbf-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             7px;
    padding:         12px 18px;
    background:      var(--fbf-bg);
    color:           var(--fbf-text);
    border:          var(--fbf-border);
    border-radius:   var(--fbf-radius);
    box-shadow:      var(--fbf-shadow);
    text-decoration: none;
    font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size:       13px;
    font-weight:     600;
    line-height:     1;
    letter-spacing:  0.02em;
    white-space:     nowrap;
    cursor:          pointer;
    pointer-events:  all;
    user-select:     none;
    transition:      background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
    -webkit-font-smoothing: antialiased;
    /* backdrop-filter set via JS where supported */
}

/* Backdrop filter for ghost */
.fbf-wrap[style*="--fbf-backdrop"] .fbf-btn {
    -webkit-backdrop-filter: var(--fbf-backdrop);
    backdrop-filter: var(--fbf-backdrop);
}

/* Right: extend past edge, peek in */
.fbf-right .fbf-btn {
    border-top-right-radius:    0;
    border-bottom-right-radius: 0;
    transform: translateX(0);
}

/* Left: same treatment mirrored */
.fbf-left .fbf-btn {
    border-top-left-radius:    0;
    border-bottom-left-radius: 0;
    transform: translateX(0);
}

/* HOVER */
.fbf-btn:hover,
.fbf-btn:focus-visible {
    background:  var(--fbf-hover-bg);
    color:       var(--fbf-hover-text);
    outline:     2px solid var(--fbf-accent);
    outline-offset: 2px;
}

.fbf-right .fbf-btn:hover,
.fbf-right .fbf-btn:focus-visible {
    transform: translateX(-4px);
}

.fbf-left .fbf-btn:hover,
.fbf-left .fbf-btn:focus-visible {
    transform: translateX(4px);
}

/* Circle / icon-only: equal padding */
.fbf-wrap[style*="radius:50%"] .fbf-btn,
.fbf-right [style*="radius:50%"],
.fbf-left  [style*="radius:50%"] {
    padding: 14px;
    border-radius: 50%;
}

/* ------------------------------------------------------------------
   ICON
------------------------------------------------------------------ */
.fbf-icon {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
}

.fbf-icon-svg svg,
.fbf-icon-img img {
    width:  20px;
    height: 20px;
    display: block;
}

.fbf-icon-img img {
    object-fit: contain;
    border-radius: 2px;
}

/* ------------------------------------------------------------------
   LABEL
------------------------------------------------------------------ */
.fbf-label {
    line-height: 1;
}

/* ------------------------------------------------------------------
   NEW TAB MINI ICON
------------------------------------------------------------------ */
.fbf-newtab {
    display:     flex;
    align-items: center;
    opacity:     0.6;
}

.fbf-newtab svg {
    width:  10px;
    height: 10px;
}

/* ------------------------------------------------------------------
   RESPONSIVE HIDE
------------------------------------------------------------------ */
@media (max-width: 767px) {
    .fbf-hide-mobile { display: none !important; }
}

@media (max-width: 1023px) {
    .fbf-hide-tablet { display: none !important; }
}

/* ------------------------------------------------------------------
   REDUCED MOTION
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .fbf-btn { transition: none; }
}