/* =========================================================
   WILLSMARG COMPONENT SYSTEM — BUTTONS FINAL
   File: wwwroot/css/Buttons.css
========================================================= */

.wsm-btn,
.wsm-action,
.wsm-portal-pill {
    appearance: none;
    border: 1px solid transparent;
    text-decoration: none !important;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    padding: 0 22px;
    border-radius: 12px;
    font-family: Inter, Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .94rem;
    font-weight: 900;
    line-height: 1;
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease, color .24s ease;
}

    .wsm-btn:hover,
    .wsm-action:hover,
    .wsm-portal-pill:hover {
        transform: translateY(-3px);
        text-decoration: none !important;
    }

    .wsm-btn:focus-visible,
    .wsm-action:focus-visible,
    .wsm-portal-pill:focus-visible {
        outline: 3px solid rgba(0,168,200,.24);
        outline-offset: 3px;
    }

.wsm-btn-primary {
    color: #fff !important;
    background: #00a8c8;
    border-color: rgba(0,168,200,.55);
    box-shadow: 0 18px 42px rgba(0,168,200,.22);
}

    .wsm-btn-primary:hover {
        color: #fff !important;
        background: #008fac;
        box-shadow: 0 24px 58px rgba(0,168,200,.30);
    }

.wsm-btn-outline,
.wsm-btn-light {
    color: #0b1f3a !important;
    background: #fff;
    border-color: #dfe7ef;
    box-shadow: 0 10px 26px rgba(11,31,58,.06);
}

    .wsm-btn-outline:hover,
    .wsm-btn-light:hover {
        color: #0b1f3a !important;
        border-color: rgba(0,168,200,.38);
        box-shadow: 0 18px 44px rgba(11,31,58,.10);
    }

.wsm-btn-dark {
    color: #fff !important;
    background: #0b1f3a;
    border-color: rgba(11,31,58,.70);
    box-shadow: 0 18px 42px rgba(11,31,58,.18);
}

    .wsm-btn-dark:hover {
        color: #fff !important;
        background: #102b4e;
    }

.wsm-action {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: .84rem;
    color: #0b1f3a;
    background: #fff;
    border-color: #dfe7ef;
}

.wsm-portal-pill {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: .78rem;
    color: #0b1f3a;
    background: #fff;
    border-color: #dfe7ef;
    box-shadow: none;
}

    .wsm-portal-pill:hover {
        border-color: rgba(0,168,200,.40);
        color: #007d95;
    }

.wsm-btn i,
.wsm-action i {
    transition: transform .24s ease;
}

.wsm-btn:hover i,
.wsm-action:hover i {
    transform: translate(2px, -2px);
}

@media (max-width: 767.98px) {
    .wsm-btn {
        width: 100%;
    }
}