/* ============================================
   Bootstrap buttons in the site's look
   About 40 views (mostly admin) use Bootstrap's .btn classes. Instead of editing each one, the classes are re-skinned
   here to match .mp-button-modern: pills, gold gradient for the main action, dark ghost for the rest, red-tinted for
   danger. Loaded after bootstrap and components.css (Views/Shared/Main/_Styles.cshtml).
   ============================================ */

.btn {
    --bs-btn-border-radius: var(--mp-r-pill);
    --bs-btn-font-weight: 800;
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-focus-box-shadow: 0 0 0 .2rem rgba(247, 211, 122, .3);
    border-radius: var(--mp-r-pill);
    font-weight: 800;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease, background-color .2s ease;
}

.btn-sm {
    --bs-btn-padding-x: .8rem;
    --bs-btn-padding-y: .3rem;
}

/* Main actions: the gold gradient */
.btn-primary,
.btn-success,
.btn-warning {
    --bs-btn-color: var(--mp-ink-on-gold);
    --bs-btn-hover-color: var(--mp-ink-on-gold);
    --bs-btn-active-color: var(--mp-ink-on-gold);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-active-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    background-image: linear-gradient(135deg, var(--mp-gold-deep), var(--mp-gold-hi));
    box-shadow: 0 0 18px rgba(247, 211, 122, .25);
}

    .btn-primary:hover,
    .btn-success:hover,
    .btn-warning:hover {
        transform: translateY(-1px);
        filter: brightness(1.08);
        box-shadow: 0 0 26px rgba(247, 211, 122, .35);
    }

/* Everything else that is not a danger: a dark ghost with a gold hairline */
.btn-secondary,
.btn-outline-secondary,
.btn-outline-light,
.btn-outline-primary,
.btn-light,
.btn-dark {
    --bs-btn-color: var(--mp-gold);
    --bs-btn-hover-color: var(--mp-gold-soft);
    --bs-btn-active-color: var(--mp-gold-soft);
    --bs-btn-bg: rgba(0, 0, 0, .4);
    --bs-btn-hover-bg: rgba(247, 211, 122, .12);
    --bs-btn-active-bg: rgba(247, 211, 122, .18);
    --bs-btn-border-color: rgba(247, 211, 122, .35);
    --bs-btn-hover-border-color: rgba(247, 211, 122, .75);
    --bs-btn-active-border-color: rgba(247, 211, 122, .75);
    --bs-btn-disabled-color: var(--mp-muted);
    --bs-btn-disabled-bg: rgba(0, 0, 0, .3);
    --bs-btn-disabled-border-color: var(--mp-border);
}

/* Danger: dark red-tinted pill, so it still reads as destructive */
.btn-danger,
.btn-outline-danger {
    --bs-btn-color: #ffb3b9;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-bg: rgba(255, 77, 90, .14);
    --bs-btn-hover-bg: rgba(255, 77, 90, .32);
    --bs-btn-active-bg: rgba(255, 77, 90, .4);
    --bs-btn-border-color: rgba(255, 77, 90, .5);
    --bs-btn-hover-border-color: rgba(255, 77, 90, .8);
    --bs-btn-active-border-color: rgba(255, 77, 90, .8);
}

.btn-link {
    --bs-btn-color: var(--mp-gold);
    --bs-btn-hover-color: var(--mp-gold-soft);
    --bs-btn-active-color: var(--mp-gold-soft);
    font-weight: 700;
}

.btn:disabled,
.btn.disabled {
    opacity: .55;
    filter: none;
    transform: none;
}

/* Bootstrap tabs and pills: gold, not link blue */
.nav-tabs,
.nav-pills {
    --bs-nav-link-color: var(--mp-muted);
    --bs-nav-link-hover-color: var(--mp-gold-soft);
    --bs-nav-link-font-weight: 700;
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--mp-border);
    --bs-nav-tabs-border-radius: var(--mp-r-sm);
    --bs-nav-tabs-link-hover-border-color: var(--mp-border) var(--mp-border) transparent;
    --bs-nav-tabs-link-active-color: var(--mp-gold-soft);
    --bs-nav-tabs-link-active-bg: rgba(247, 211, 122, .1);
    --bs-nav-tabs-link-active-border-color: var(--mp-border-strong) var(--mp-border-strong) transparent;
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--mp-r-pill);
    --bs-nav-pills-link-active-color: var(--mp-ink-on-gold);
    --bs-nav-pills-link-active-bg: var(--mp-gold);
}

/* Plain links inside page content are gold too */
.glass-panel a:not([class]) {
    color: var(--mp-gold);
}