.btn {
appearance: none;
display: inline-flex; align-items: center; justify-content: center;
gap: 0.5ch;
padding: 0.55rem 0.9rem;
border-radius: 0.3125rem;
/* border: 2.5px solid transparent; */
color: #FDFDFD;
line-height: 1.2;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.04);
text-transform: uppercase;
transition: all .2s ease-out;
font-family: "Roboto", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
font-weight: 500;
font-size: 16px;
line-height: 19px;
max-height: 32px;
text-decoration: none !important;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06); }
.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.04); }
.btn:focus-visible { 
    outline: 2.5px solid #0067E7 !important; 
    outline-offset: 2.5px !important;
}
.btn:focus { 
    outline: 2.5px solid #0067E7 !important; 
    outline-offset: 2.5px !important;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; pointer-events: none; }

/* Primary */
.btn-primary { background-color: #004C97; color: #FDFDFD; border: none !important;}
.btn-primary:hover { background-color: #003466; color: #FDFDFD; }

.btn-primary:active,
.btn-primary[aria-pressed="true"] {
background-color:#011F3D !important;
color: #EAEBEC !important;
}

/* Secondary */
.btn-secondary { 
background-color: #FDFDFD;
border: 2.5px solid #004C97;
color: #004C97;
}

.btn-secondary:hover {
background-color: #EAEBEC;
border: 2.5px solid #003466;
color: #003466;
}

.btn-secondary:active,
.btn-secondary[aria-pressed="true"] { 
background-color: #CCD0D4 !important;
color: #011F3D !important;
}

.btn-secondary:focus, 
.btn-secondary:focus-visible {
    background-color: #FDFDFD;
}
/* If we want focus off when clicking?! */
.btn-secondary:focus:not(:focus-visible) {
    outline: none !important;
}

.btn-primary:focus, 
.btn-primary:focus-visible {
    background-color: #004C97;
}
/* If we want focus off when clicking?! */
.btn-primary:focus:not(:focus-visible) {
    outline: none !important;
}

.btn-outline-primary:focus, 
.btn-outline-primary:focus-visible {
    background-color: #FDFDFD;
}
/* If we want focus off when clicking?! */
.btn-outline-primary:focus:not(:focus-visible) {
    outline: none !important;
}

.btn-outline:focus, 
.btn-outline:focus-visible {
    background-color: #FDFDFD;
}
/* If we want focus off when clicking?! */
.btn-outline:focus:not(:focus-visible) {
    outline: none !important;
}

/* Link */
.btn-link {
background-color: transparent; 
color: #004C97; 
border-color: transparent;
padding: 0; box-shadow: none; 
text-decoration: underline;
}

/* Outline primary */
.btn-outline-primary {
background-color: transparent;
color: #004C97;
border: 2.5px solid #004C97;
box-shadow: none;
}

.btn-outline-primary:hover {
background-color: #EAEBEC;
border: 2.5px solid #003466;
color: #003466;
}

.btn-outline-primary:active,
.btn-outline-primary[aria-pressed="true"] { 
    background-color: #CCD0D4 !important;
    color: #011F3D !important;
}


.btn.btn-outline {
    background-color: transparent;
    border: 2.5px solid #FDFDFD;
    color: #FDFDFD;
    max-height: 48px;
    white-space: normal;

    @media (min-width: 576px) {
        white-space: nowrap;
        max-height: 32px;
    }


    &:hover {
        background-color: #FDFDFD;
        border: 2.5px solid #004C97;
        color: #004C97;
    }

    &:active {
        background-color: #EAEBEC !important;
        border: 2.5px solid #003466;
        color: #003466;
    }
}


/* Full-width helper */
.btn-block { display: inline-flex; width: 100%; }



/* Polish CSS */
:root{--ease:cubic-bezier(.22,.61,.36,1);--spd1:.2s;--spd2:.35s;--spd3:.8s}

.btn{
position:relative;overflow:hidden;will-change:transform;
transition:transform var(--spd2) var(--ease),box-shadow var(--spd2) var(--ease),background-color var(--spd1) var(--ease),color var(--spd1) var(--ease),border-color var(--spd1) var(--ease)
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn::after{
content:"";position:absolute;left:50%;top:50%;width:220%;height:220%;
pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.35),rgba(255,255,255,0));
transform:translate(-50%,-50%) scale(0);opacity:0;transition:transform var(--spd1) var(--ease),opacity var(--spd1) var(--ease)
}
.btn:active::after{transform:translate(-50%,-50%) scale(1);opacity:.7;transition:none}

@media (prefers-reduced-motion:reduce){.btn,.btn::after{transition:none}}