/* FitUI V2 — Buttons */

.fit-btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 12px 22px;
    overflow: hidden;
    border: 1px solid var(--fit-border-strong);
    border-radius: var(--fit-radius-pill);
    background: rgba(255, 255, 255, .045);
    box-shadow: var(--fit-shadow-sm), var(--fit-shadow-inset);
    color: var(--fit-text) !important;
    font-size: var(--fit-text-md);
    font-weight: var(--fit-weight-bold);
    line-height: 1;
    text-align: center;
    text-decoration: none !important;
    transition:
        transform var(--fit-duration) var(--fit-ease),
        color var(--fit-duration) var(--fit-ease),
        background var(--fit-duration) var(--fit-ease),
        border-color var(--fit-duration) var(--fit-ease),
        box-shadow var(--fit-duration) var(--fit-ease);
}

.fit-btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .22) 48%, transparent 76%);
    opacity: 0;
    transform: translateX(-100%);
    transition: transform .7s var(--fit-ease), opacity .2s ease;
}

.fit-btn:hover {
    border-color: var(--fit-border-gold);
    box-shadow: var(--fit-shadow-card), var(--fit-glow-gold);
    transform: translateY(-2px);
}

.fit-btn:hover::before {
    opacity: 1;
    transform: translateX(100%);
}

.fit-btn:active {
    transform: translateY(0);
}

.fit-btn-yellow,
.fit-btn-gold,
.fit-btn--primary {
    border-color: var(--fit-gold);
    background: linear-gradient(135deg, var(--fit-gold-light), var(--fit-gold));
    box-shadow: 0 14px 40px rgba(var(--fit-gold-rgb), .18);
    color: var(--fit-on-gold) !important;
}

.fit-btn-yellow:hover,
.fit-btn-gold:hover,
.fit-btn--primary:hover {
    border-color: var(--fit-gold-light);
    box-shadow: 0 18px 48px rgba(var(--fit-gold-rgb), .25), var(--fit-glow-gold);
    color: var(--fit-on-gold) !important;
}

.fit-btn--secondary,
.fit-btn-outline,
.fit-btn-ghost,
.fit-btn--ghost {
    border-color: var(--fit-border);
    background: rgba(255, 255, 255, .035);
    color: var(--fit-text) !important;
}

.fit-btn--sm {
    min-height: 42px;
    padding: 10px 17px;
    font-size: var(--fit-text-md);
}

.fit-btn--lg {
    min-height: 58px;
    padding: 15px 28px;
    font-size: var(--fit-text-base);
}

.fit-btn[disabled],
.fit-btn.is-disabled {
    cursor: not-allowed;
    opacity: .48;
    pointer-events: none;
}

/*
 * V2 hover color lock.
 * Salient and the legacy theme both include broad anchor/button hover rules.
 * These scoped declarations preserve the complete foreground/background pair.
 */

body.fitui-v2-active .fit-btn,
body.fitui-v2-active .fit-btn:hover,
body.fitui-v2-active .fit-btn:focus-visible {
    color: var(--fit-text) !important;
    -webkit-text-fill-color: var(--fit-text);
}

body.fitui-v2-active .fit-btn > span,
body.fitui-v2-active .fit-btn > strong,
body.fitui-v2-active .fit-btn:hover > span,
body.fitui-v2-active .fit-btn:hover > strong,
body.fitui-v2-active .fit-btn:focus-visible > span,
body.fitui-v2-active .fit-btn:focus-visible > strong {
    color: inherit !important;
    -webkit-text-fill-color: currentColor;
}

body.fitui-v2-active .fit-btn--secondary:hover,
body.fitui-v2-active .fit-btn-outline:hover,
body.fitui-v2-active .fit-btn-ghost:hover,
body.fitui-v2-active .fit-btn--ghost:hover,
body.fitui-v2-active .fit-btn--secondary:focus-visible,
body.fitui-v2-active .fit-btn-outline:focus-visible,
body.fitui-v2-active .fit-btn-ghost:focus-visible,
body.fitui-v2-active .fit-btn--ghost:focus-visible {
    border-color: var(--fit-border-gold) !important;
    background: rgba(var(--fit-gold-rgb), .085) !important;
    color: var(--fit-text) !important;
    -webkit-text-fill-color: var(--fit-text);
}

body.fitui-v2-active .fit-btn-yellow,
body.fitui-v2-active .fit-btn-gold,
body.fitui-v2-active .fit-btn--primary,
body.fitui-v2-active .fit-btn-yellow:hover,
body.fitui-v2-active .fit-btn-gold:hover,
body.fitui-v2-active .fit-btn--primary:hover,
body.fitui-v2-active .fit-btn-yellow:focus-visible,
body.fitui-v2-active .fit-btn-gold:focus-visible,
body.fitui-v2-active .fit-btn--primary:focus-visible {
    border-color: var(--fit-gold-light) !important;
    background: linear-gradient(135deg, var(--fit-gold-light), var(--fit-gold)) !important;
    color: var(--fit-on-gold) !important;
    -webkit-text-fill-color: var(--fit-on-gold);
}

body.fitui-v2-active .fit-btn-yellow > span,
body.fitui-v2-active .fit-btn-yellow > strong,
body.fitui-v2-active .fit-btn-gold > span,
body.fitui-v2-active .fit-btn-gold > strong,
body.fitui-v2-active .fit-btn--primary > span,
body.fitui-v2-active .fit-btn--primary > strong {
    color: inherit !important;
    -webkit-text-fill-color: currentColor;
}