/* ==========================================
   NX ATOMIC BUTTON BASE
========================================== */

button.nx-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.625rem;

    width:100%;
    min-height:60px;
    padding:0 2rem;

    border:0;
    border-radius:999px !important;

    font:inherit;
    font-weight:600;
    line-height:1;
    text-decoration:none;

    cursor:pointer;
    isolation:isolate;

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        background .35s cubic-bezier(.22,1,.36,1),
        border-color .35s cubic-bezier(.22,1,.36,1),
        color .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s cubic-bezier(.22,1,.36,1);
}


/* ==========================================
   NX BUTTON PRIMARY • GOLD
========================================== */

button.nx-btn-primary{
    color:var(--nx-color-dark) !important;

    background:
        linear-gradient(
            180deg,
            #E3C06B 0%,
            var(--nx-color-primary) 55%,
            #B88A2D 100%
        ) !important;

    box-shadow:
        0 8px 20px rgba(200,162,74,.22),
        0 20px 40px rgba(200,162,74,.14);
}

button.nx-btn-primary:hover{
    color:var(--nx-color-dark) !important;

    background:
        linear-gradient(
            180deg,
            #EBCD7E 0%,
            #C8A24A 55%,
            #A97820 100%
        ) !important;

    transform:translateY(-2px);

    box-shadow:
        0 12px 28px rgba(200,162,74,.30),
        0 24px 48px rgba(200,162,74,.20);
}


/* ==========================================
   NX BUTTON SECONDARY • NAVY GHOST
========================================== */

button.nx-btn-secondary{
    color:var(--nx-color-secondary) !important;
    background:transparent !important;

    border:1px solid rgba(8,42,77,.55) !important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.04);
}

button.nx-btn-secondary:hover{
    color:#fff !important;
    background:var(--nx-color-secondary) !important;

    border-color:var(--nx-color-secondary) !important;

    transform:translateY(-2px);

    box-shadow:
        0 10px 24px rgba(8,42,77,.22);
}


/* ==========================================
   NX BUTTON GLASS • DARK HERO
========================================== */

button.nx-btn-glass{
    color:#fff !important;
    background:rgba(8,42,77,.34) !important;

    border:1px solid rgba(255,255,255,.14) !important;

    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 12px 28px rgba(0,0,0,.22);
}

button.nx-btn-glass:hover{
    background:rgba(8,42,77,.52) !important;
    border-color:rgba(227,192,107,.50) !important;

    transform:translateY(-2px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 16px 34px rgba(0,0,0,.28);
}


/* ==========================================
   ACCESSIBILITY
========================================== */

button.nx-btn:focus-visible{
    outline:2px solid var(--nx-color-primary);
    outline-offset:4px;
}


/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion:reduce){
    button.nx-btn{
        transition:none;
    }

    button.nx-btn:hover{
        transform:none;
    }
}