/* ============================================================
   MiniUX Floating Buttons — Frontend CSS
   ============================================================ */

/* ---- Reset / Base ---- */
#mfb-wrap,
#mfb-wrap *,
#mfb-wrap *::before,
#mfb-wrap *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

/* ---- Wrapper ---- */
.mfb-wrap {
    position:   fixed;
    bottom:     var(--mfb-bottom);
    top:        var(--mfb-top);
    right:      var(--mfb-right);
    left:       var(--mfb-left);
    z-index:    99999;
    display:    flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap:        12px;
    pointer-events: none;
}

.mfb-wrap.mfb-dir-left  { flex-direction: row-reverse; align-items: flex-end; }

/* ---- Base button ---- */
.mfb-btn,
.mfb-trigger {
    width:          var(--mfb-size);
    height:         var(--mfb-size);
    border-radius:  var(--mfb-radius);
    display:        flex;
    align-items:    center;
    justify-content: center;
    cursor:         pointer;
    text-decoration: none;
    border:         none;
    outline:        none;
    position:       relative;
    flex-shrink:    0;
    pointer-events: all;
    transition:     transform var(--mfb-speed) cubic-bezier(.34,1.56,.64,1),
                    box-shadow var(--mfb-speed) ease,
                    opacity var(--mfb-speed) ease;
    -webkit-tap-highlight-color: transparent;
}

/* ---- Icon ---- */
.mfb-btn__icon,
.mfb-trigger__icon {
    display:    flex;
    align-items: center;
    justify-content: center;
    width:      var(--mfb-icon);
    height:     var(--mfb-icon);
    color:      #fff;
    transition: transform var(--mfb-speed) ease, opacity var(--mfb-speed) ease;
}

.mfb-btn__icon svg,
.mfb-trigger__icon svg {
    width:  100%;
    height: 100%;
}

/* ---- Child buttons hidden state ---- */
.mfb-menu {
    display:        flex;
    flex-direction: column-reverse;
    align-items:    flex-end;
    gap:            10px;
    pointer-events: none;
}

.mfb-dir-left .mfb-menu {
    flex-direction: row-reverse;
    align-items:    flex-end;
}

.mfb-menu .mfb-btn {
    opacity:    0;
    transform:  scale(0.6) translateY(10px);
    pointer-events: none;
    transition: opacity var(--mfb-speed) ease,
                transform var(--mfb-speed) cubic-bezier(.34,1.56,.64,1),
                box-shadow var(--mfb-speed) ease;
}

.mfb-dir-left .mfb-menu .mfb-btn {
    transform: scale(0.6) translateX(10px);
}

/* Open state */
.mfb-wrap.is-open .mfb-menu {
    pointer-events: all;
}

.mfb-wrap.is-open .mfb-menu .mfb-btn {
    opacity:    1;
    transform:  scale(1) translateY(0);
    pointer-events: all;
}

/* Arc fan direction */
.mfb-dir-arc .mfb-menu {
    position: absolute;
    bottom: calc(var(--mfb-size) + 8px);
    right: 0;
}

.mfb-dir-arc .mfb-menu .mfb-btn:nth-child(1) { --arc-angle: -30deg; }
.mfb-dir-arc .mfb-menu .mfb-btn:nth-child(2) { --arc-angle: -60deg; }
.mfb-dir-arc .mfb-menu .mfb-btn:nth-child(3) { --arc-angle: -90deg; }
.mfb-dir-arc .mfb-menu .mfb-btn:nth-child(4) { --arc-angle: -110deg; }
.mfb-dir-arc .mfb-menu .mfb-btn:nth-child(5) { --arc-angle: -125deg; }
.mfb-dir-arc .mfb-menu .mfb-btn:nth-child(6) { --arc-angle: -140deg; }

.mfb-wrap.is-open.mfb-dir-arc .mfb-menu .mfb-btn {
    transform: rotate(var(--arc-angle, -45deg)) translateX(-70px) rotate(calc(-1 * var(--arc-angle, -45deg)));
}

/* Stagger delay */
.mfb-menu .mfb-btn:nth-child(1) { transition-delay: 0ms; }
.mfb-menu .mfb-btn:nth-child(2) { transition-delay: 30ms; }
.mfb-menu .mfb-btn:nth-child(3) { transition-delay: 60ms; }
.mfb-menu .mfb-btn:nth-child(4) { transition-delay: 90ms; }
.mfb-menu .mfb-btn:nth-child(5) { transition-delay: 120ms; }
.mfb-menu .mfb-btn:nth-child(6) { transition-delay: 150ms; }

/* ---- Style Variants ---- */

/* Gradient */
.mfb-btn.mfb-style--gradient {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mfb-btn-color) 90%, #fff 10%) 0%,
        color-mix(in srgb, var(--mfb-btn-color) 70%, #000 30%) 100%
    );
    box-shadow: var(--mfb-shadow), 0 2px 8px color-mix(in srgb, var(--mfb-btn-color) 50%, transparent 50%);
}

.mfb-trigger.mfb-style--gradient {
    background: linear-gradient(135deg, var(--mfb-main) 0%, var(--mfb-accent) 100%);
    box-shadow: var(--mfb-shadow), 0 4px 15px color-mix(in srgb, var(--mfb-main) 50%, transparent 50%);
}

/* Glassmorphism */
.mfb-btn.mfb-style--glassmorphism {
    background: color-mix(in srgb, var(--mfb-btn-color) 35%, transparent 65%);
    backdrop-filter: blur(12px) saturate(1.8);
    -webkit-backdrop-filter: blur(12px) saturate(1.8);
    border: 1px solid color-mix(in srgb, var(--mfb-btn-color) 40%, white 30%);
    box-shadow: var(--mfb-shadow),
                inset 0 1px 1px rgba(255,255,255,0.25);
}

.mfb-trigger.mfb-style--glassmorphism {
    background: color-mix(in srgb, var(--mfb-main) 35%, transparent 65%);
    backdrop-filter: blur(12px) saturate(1.8);
    -webkit-backdrop-filter: blur(12px) saturate(1.8);
    border: 1px solid color-mix(in srgb, var(--mfb-main) 40%, white 30%);
    box-shadow: var(--mfb-shadow),
                inset 0 1px 1px rgba(255,255,255,0.25);
}

/* Solid */
.mfb-btn.mfb-style--solid {
    background: var(--mfb-btn-color);
    box-shadow: var(--mfb-shadow);
}

.mfb-trigger.mfb-style--solid {
    background: var(--mfb-main);
    box-shadow: var(--mfb-shadow);
}

/* Neon */
.mfb-btn.mfb-style--neon {
    background: #0d0d0d;
    border: 2px solid var(--mfb-btn-color);
    box-shadow: 0 0 8px var(--mfb-btn-color),
                0 0 20px color-mix(in srgb, var(--mfb-btn-color) 50%, transparent 50%),
                inset 0 0 8px color-mix(in srgb, var(--mfb-btn-color) 20%, transparent 80%);
}

.mfb-trigger.mfb-style--neon {
    background: #0d0d0d;
    border: 2px solid var(--mfb-main);
    box-shadow: 0 0 8px var(--mfb-main),
                0 0 20px color-mix(in srgb, var(--mfb-main) 50%, transparent 50%);
}

/* ---- Hover Animations ---- */

/* Scale (default) */
.mfb-btn:hover,
.mfb-trigger:hover {
    transform: scale(1.12);
}

[data-mfb-animation="bounce"] .mfb-btn:hover,
[data-mfb-animation="bounce"] .mfb-trigger:hover {
    animation: mfb-bounce 0.5s ease;
}

[data-mfb-animation="rotate"] .mfb-btn:hover,
[data-mfb-animation="rotate"] .mfb-trigger:hover {
    transform: rotate(15deg) scale(1.08);
}

[data-mfb-animation="shake"] .mfb-btn:hover,
[data-mfb-animation="shake"] .mfb-trigger:hover {
    animation: mfb-shake 0.4s ease;
}

[data-mfb-animation="pulse"] .mfb-btn:hover,
[data-mfb-animation="pulse"] .mfb-trigger:hover {
    animation: mfb-pulse 0.6s ease infinite;
}

/* Neon glow boost on hover */
.mfb-btn.mfb-style--neon:hover {
    box-shadow: 0 0 15px var(--mfb-btn-color),
                0 0 35px color-mix(in srgb, var(--mfb-btn-color) 60%, transparent 40%),
                inset 0 0 15px color-mix(in srgb, var(--mfb-btn-color) 30%, transparent 70%);
}

/* ---- Trigger icons toggle ---- */
.mfb-trigger__icon--close { display: none; opacity: 0; }
.mfb-trigger__icon--open  { display: flex; opacity: 1; }

.mfb-wrap.is-open .mfb-trigger__icon--close {
    display:  flex;
    opacity:  1;
    animation: mfb-spin-in var(--mfb-speed) ease forwards;
}

.mfb-wrap.is-open .mfb-trigger__icon--open {
    display: none;
    opacity: 0;
}

/* Trigger rotation when open */
.mfb-wrap.is-open .mfb-trigger {
    transform: scale(1.05) rotate(45deg);
}

/* ---- Tooltip ---- */
.mfb-tooltip {
    position:     absolute;
    background:   rgba(10, 10, 20, 0.9);
    color:        #fff;
    font-size:    13px;
    font-family:  -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight:  500;
    line-height:  1;
    white-space:  nowrap;
    padding:      7px 12px;
    border-radius: 6px;
    pointer-events: none;
    opacity:      0;
    transform:    scale(0.85);
    transition:   opacity 0.18s ease, transform 0.18s ease;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 1;
}

.mfb-tooltip::after {
    content:  '';
    position: absolute;
    border:   5px solid transparent;
}

/* Left tooltip */
.mfb-tooltip--left {
    right:  calc(100% + 12px);
    top:    50%;
    transform: translateY(-50%) scale(0.85);
}
.mfb-tooltip--left::after {
    left:        100%;
    top:         50%;
    margin-top:  -5px;
    border-left-color: rgba(10, 10, 20, 0.9);
}

/* Right tooltip */
.mfb-tooltip--right {
    left:   calc(100% + 12px);
    top:    50%;
    transform: translateY(-50%) scale(0.85);
}
.mfb-tooltip--right::after {
    right:       100%;
    top:         50%;
    margin-top:  -5px;
    border-right-color: rgba(10, 10, 20, 0.9);
}

/* Top tooltip */
.mfb-tooltip--top {
    bottom: calc(100% + 12px);
    left:   50%;
    transform: translateX(-50%) scale(0.85);
}
.mfb-tooltip--top::after {
    top:         100%;
    left:        50%;
    margin-left: -5px;
    border-top-color: rgba(10, 10, 20, 0.9);
}

/* Bottom tooltip */
.mfb-tooltip--bottom {
    top:  calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) scale(0.85);
}
.mfb-tooltip--bottom::after {
    bottom:      100%;
    left:        50%;
    margin-left: -5px;
    border-bottom-color: rgba(10, 10, 20, 0.9);
}

/* Show tooltip on hover */
.mfb-btn:hover .mfb-tooltip--left   { opacity: 1; transform: translateY(-50%) scale(1); }
.mfb-btn:hover .mfb-tooltip--right  { opacity: 1; transform: translateY(-50%) scale(1); }
.mfb-btn:hover .mfb-tooltip--top    { opacity: 1; transform: translateX(-50%) scale(1); }
.mfb-btn:hover .mfb-tooltip--bottom { opacity: 1; transform: translateX(-50%) scale(1); }

/* ---- Entrance animations ---- */
.mfb-entrance-slide-up {
    animation: mfb-enter-slide-up 0.5s cubic-bezier(.34,1.56,.64,1) forwards;
}

.mfb-entrance-fade {
    animation: mfb-enter-fade 0.4s ease forwards;
}

.mfb-entrance-zoom {
    animation: mfb-enter-zoom 0.4s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* ---- Keyframes ---- */
@keyframes mfb-enter-slide-up {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes mfb-enter-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes mfb-enter-zoom {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

@keyframes mfb-bounce {
    0%,100% { transform: scale(1.12); }
    30%      { transform: scale(1.22); }
    60%      { transform: scale(1.06); }
}

@keyframes mfb-shake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-4px); }
    40%     { transform: translateX(4px); }
    60%     { transform: translateX(-3px); }
    80%     { transform: translateX(3px); }
}

@keyframes mfb-pulse {
    0%,100% { transform: scale(1.12); box-shadow: var(--mfb-shadow); }
    50%     { transform: scale(1.18); box-shadow: var(--mfb-shadow), 0 0 0 8px color-mix(in srgb, var(--mfb-main) 25%, transparent 75%); }
}

@keyframes mfb-spin-in {
    from { transform: rotate(-90deg); opacity: 0; }
    to   { transform: rotate(0deg);   opacity: 1; }
}

/* ---- Dark mode ---- */
@media (prefers-color-scheme: dark) {
    .mfb-tooltip {
        background: rgba(240, 240, 255, 0.92);
        color: #111;
        border-color: rgba(0,0,0,0.08);
    }
    .mfb-tooltip--left::after   { border-left-color:   rgba(240,240,255,0.92); }
    .mfb-tooltip--right::after  { border-right-color:  rgba(240,240,255,0.92); }
    .mfb-tooltip--top::after    { border-top-color:    rgba(240,240,255,0.92); }
    .mfb-tooltip--bottom::after { border-bottom-color: rgba(240,240,255,0.92); }
}

/* ---- Mobile ---- */
@media (hover: none) {
    .mfb-tooltip { display: none !important; }
}

/* Pulse ring effect for trigger button */
.mfb-trigger::before {
    content:    '';
    position:   absolute;
    inset:      -4px;
    border-radius: inherit;
    background: color-mix(in srgb, var(--mfb-main) 30%, transparent 70%);
    animation:  mfb-ring 2.5s ease-in-out infinite;
    z-index:    -1;
}

.mfb-wrap.is-open .mfb-trigger::before {
    animation: none;
    opacity: 0;
}

@keyframes mfb-ring {
    0%,100% { transform: scale(1);    opacity: 0.7; }
    50%      { transform: scale(1.25); opacity: 0; }
}

/* ---- v1.0.1 patch: ensure hidden state on load ---- */
.mfb-menu .mfb-btn {
    transition: opacity var(--mfb-speed, .28s) ease,
                transform var(--mfb-speed, .28s) cubic-bezier(.34,1.56,.64,1),
                box-shadow var(--mfb-speed, .28s) ease !important;
}

/* ---- Branding (Free plan) ---- */
.mfb-branding {
    position:    absolute;
    bottom:      calc(100% + 8px);
    right:       0;
    font-size:   10px;
    color:       rgba(120,120,150,0.7);
    text-decoration: none;
    white-space: nowrap;
    pointer-events: all;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 0.02em;
    transition:  color 0.2s;
}
.mfb-branding:hover { color: rgba(124,58,237,0.9); }