/* ============================================================
   MindX Floating Button – Styles
   ============================================================ */

/* ── Wrapper (fixed overlay) ── */
.mindx-floating-btn-wrapper {
    position: fixed;
    bottom: 32px;
    z-index: 999999;
    pointer-events: none;          /* wrapper is click-through */
}

/* Positions */
.mindx-pos-bottom-center {
    left: 50%;
    transform: translateX(-50%);
}
.mindx-pos-bottom-right {
    right: 32px;
}
.mindx-pos-bottom-left {
    left: 32px;
}

/* ── Button base ── */
.mindx-floating-btn {
    display: inline-block;
    pointer-events: auto;          /* button itself IS clickable */
    padding: 18px 48px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none !important;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.45s ease,
                color            0.45s ease,
                box-shadow       0.45s ease,
                transform        0.18s ease;
}

.mindx-floating-btn:hover {
    transform: scale(1.04);
}
.mindx-floating-btn:active {
    transform: scale(0.97);
}

/* ── Light mode → white button (shown over DARK backgrounds) ── */
.mindx-floating-btn-wrapper[data-mode="light"] .mindx-floating-btn {
    background-color: #ffffff;
    color: #000000;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}
.mindx-floating-btn-wrapper[data-mode="light"] .mindx-floating-btn:hover {
    background-color: #f2f2f2;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.22);
}

/* ── Dark mode → black button (shown over LIGHT backgrounds) ── */
.mindx-floating-btn-wrapper[data-mode="dark"] .mindx-floating-btn {
    background-color: #000000;
    color: #ffffff;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}
.mindx-floating-btn-wrapper[data-mode="dark"] .mindx-floating-btn:hover {
    background-color: #1a1a1a;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.32);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .mindx-floating-btn-wrapper {
        bottom: 24px;
    }
    .mindx-floating-btn {
        padding: 15px 36px;
        font-size: 13px;
        letter-spacing: 1.5px;
    }
    .mindx-pos-bottom-right { right: 20px; }
    .mindx-pos-bottom-left  { left:  20px; }
}

@media (max-width: 480px) {
    .mindx-floating-btn {
        padding: 13px 30px;
        font-size: 12px;
        letter-spacing: 1.2px;
    }
}