/* ==========================================================
   Bootstrap buttons - portal-safe override
   ========================================================== */

.portal .btn,
.portal a.btn,
.portal button.btn,
.portal input.btn{
    font-weight: 500;
    border-radius: 999px;
    text-decoration: none;
    color: var(--bs-btn-color);
}

.portal .btn:hover,
.portal a.btn:hover,
.portal button.btn:hover,
.portal input.btn:hover{
    color: var(--bs-btn-hover-color);
    text-decoration: none;
}

.portal .btn:focus,
.portal .btn:focus-visible{
    box-shadow: var(--p-ring);
}



/* ----------------------------------------------------------
   Theme toggle button
   ---------------------------------------------------------- */

.portal .mp-theme-toggle .mp-theme-toggle__btn{
    --bs-btn-color: var(--p-text-strong);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;

    --bs-btn-hover-color: var(--p-text-strong);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;

    --bs-btn-active-color: var(--p-text-strong);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;

    color: var(--bs-btn-color);
    background: transparent;
    border-color: transparent;
    opacity: 1;
    filter: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    padding: 0;
}

.portal .mp-theme-toggle .mp-theme-toggle__btn i{
    color: currentColor;
    opacity: 1;
}

.portal .mp-theme-toggle .mp-theme-toggle__btn:hover,
.portal .mp-theme-toggle .mp-theme-toggle__btn:focus-visible{
    color: var(--bs-btn-hover-color);
    background: transparent;
    border-color: transparent;
    opacity: 1;
}

.portal .mp-theme-toggle .mp-theme-toggle__btn:focus{
    box-shadow: none;
}

.portal .mp-theme-toggle .mp-theme-toggle__btn:focus-visible{
    box-shadow: var(--p-ring);
}

.portal .mp-theme-toggle .mp-theme-toggle__btn:active{
    color: var(--bs-btn-active-color);
    background: transparent;
    border-color: transparent;
}

.portal[data-theme="dark"] .mp-theme-toggle .mp-theme-toggle__btn{
    --bs-btn-color: #ffffff;
}

.portal[data-theme="light"] .mp-theme-toggle .mp-theme-toggle__btn{
    --bs-btn-color: rgba(15,23,42,.92);
}

/* ----------------------------------------------------------
   Support / contact buttons
   ---------------------------------------------------------- */

.portal .mp-support__btn,
.portal .mp-app-top__supportBtn{
    --bs-btn-color: var(--p-text-strong);
    --bs-btn-bg: color-mix(in srgb, var(--p-primary) 10%, transparent);
    --bs-btn-border-color: color-mix(in srgb, var(--p-primary) 42%, var(--p-border));

    --bs-btn-hover-color: var(--p-text-strong);
    --bs-btn-hover-bg: color-mix(in srgb, var(--p-primary) 18%, transparent);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--p-primary) 65%, var(--p-border-strong));

    --bs-btn-active-color: var(--p-text-strong);
    --bs-btn-active-bg: color-mix(in srgb, var(--p-primary) 24%, transparent);
    --bs-btn-active-border-color: color-mix(in srgb, var(--p-primary) 75%, var(--p-border-strong));

    color: var(--bs-btn-color);
    background: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    opacity: 1;
    filter: none;

    align-items: center;
    justify-content: center;
}

.portal .mp-app-top__supportBtn{
    display: inline-flex;
    width: 40px;
    height: 40px;
    padding: 0;
}

.portal .mp-support__btn{
    display: inline-flex;
    gap: .45rem;
}

.portal .mp-support__btn i,
.portal .mp-app-top__supportBtn i{
    color: currentColor;
    opacity: 1;
}

.portal .mp-support__btn:hover,
.portal .mp-support__btn:focus-visible,
.portal .mp-app-top__supportBtn:hover,
.portal .mp-app-top__supportBtn:focus-visible{
    color: var(--bs-btn-hover-color);
    background: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    opacity: 1;
}

.portal .mp-support__btn:active,
.portal .mp-app-top__supportBtn:active{
    color: var(--bs-btn-active-color);
    background: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
}

.portal[data-theme="dark"] .mp-support__btn,
.portal[data-theme="dark"] .mp-app-top__supportBtn{
    --bs-btn-color: #ffffff;
}

.portal[data-theme="light"] .mp-support__btn,
.portal[data-theme="light"] .mp-app-top__supportBtn{
    --bs-btn-color: rgba(15,23,42,.92);
}

/* Dark theme: keep outline/toggle button text visible without hover */
.portal[data-theme="dark"] .btn-outline-primary,
.portal[data-theme="dark"] .mp-toggleBtn{
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
    color: #ffffff;
}

.portal[data-theme="dark"] .btn-outline-primary i,
.portal[data-theme="dark"] .mp-toggleBtn i{
    color: currentColor;
}

/* Safety: primary/danger/success buttons should never inherit link blue */
.portal .btn-primary,
.portal .btn-success,
.portal .btn-danger,
.portal .btn-warning,
.portal .btn-info,
.portal a.btn-primary,
.portal a.btn-success,
.portal a.btn-danger,
.portal a.btn-warning,
.portal a.btn-info{
    color: var(--bs-btn-color) !important;
}