/* ══════════════════════════════════════════════════════════════════════════
   MYND FINTECH - SHARED REUSABLE COMPONENTS
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Text Slide-Up Animated Buttons ── */
.mynd-slide-btn {
    position: relative !important;
    overflow: hidden !important;
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 0 !important;
    cursor: pointer;
    transition: background 0.42s ease, border-color 0.42s ease, transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.35s ease !important;
}

.mynd-slide-btn .btn-face {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    flex-shrink: 0 !important;
    transition: transform 0.42s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-sizing: border-box;
    white-space: nowrap;
    padding: inherit;
}

/* Primary blue button */
.mynd-slide-btn.mynd-btn-primary {
    background-color: #0f3cd9 !important;
}
.mynd-slide-btn.mynd-btn-primary .btn-face--back {
    color: #0f3cd9 !important;
}
.mynd-slide-btn.mynd-btn-primary:hover {
    background-color: #ffffff !important;
    border-color: #0f3cd9 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(15, 60, 217, 0.25) !important;
}
.mynd-slide-btn.mynd-btn-primary:hover .btn-face {
    transform: translateY(-100%) !important;
}

/* Secondary / White button */
.mynd-slide-btn.mynd-btn-secondary {
    background-color: #ffffff !important;
    border: 1px solid #0f3cd9 !important;
    color: #0f3cd9 !important;
}
.mynd-slide-btn.mynd-btn-secondary .btn-face--back {
    color: #ffffff !important;
}
.mynd-slide-btn.mynd-btn-secondary:hover {
    background-color: #0f3cd9 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(15, 60, 217, 0.2) !important;
}

/* ── Sticky Scroll Stacking Panels Engine ── */
.mynd-sticky-scroll-panel {
    position: sticky !important;
    z-index: 10 !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.05) !important;
}
.mynd-sticky-scroll-panel--1 {
    top: 80px !important;
    z-index: 10 !important;
}
.mynd-sticky-scroll-panel--2 {
    top: 112px !important;
    z-index: 20 !important;
}
.mynd-sticky-scroll-panel--3 {
    top: 144px !important;
    z-index: 30 !important;
}

#root > div,
.mynd-sticky-scroll-panel-container {
    overflow: visible !important;
}

/* ── Common Pill Badges ── */
.h1-badge,
.mynd-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #E8EDFF !important;
    color: #0F3CD9 !important;
    font-family: 'Urbanist', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 6px 16px !important;
    border-radius: 9999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}