/* =========================================================
   KN BUTTON
========================================================= */


/* =========================================================
   BASE
========================================================= */

.kn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: auto;
    max-width: 100%;

    font-family: inherit;
    font-weight: 700;
    line-height: 1.2;

    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;

    border: 1px solid transparent;

    cursor: pointer;

    white-space: nowrap;

    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* Hover */
.kn-btn:hover {
    text-decoration: none;
    transform: translateY(-1px) scale(1.02);
}


/* Active */
.kn-btn:active {
    transform: translateY(0) scale(0.99);
}


/* Focus */
.kn-btn:focus-visible {
    outline: 3px solid rgba(210, 248, 50, 0.35);
    outline-offset: 3px;
}


/* =========================================================
   TYPE - MAIN
========================================================= */

.kn-btn--main {
    background-color: #D2F832;
    color: #0f172a;

    border-color: #D2F832;

    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.10);
}


.kn-btn--main:hover {
    background-color: #BDE525;
    color: #0f172a;

    border-color: #BDE525;

    box-shadow:
        0 8px 22px rgba(190, 230, 37, 0.35);
}


/* =========================================================
   TYPE - SECONDARY
========================================================= */

.kn-btn--secondary {
    background-color: #0f172a;
    color: #ffffff;

    border-color: #0f172a;

    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.15);
}


.kn-btn--secondary:hover {
    background-color: #1e293b;
    color: #ffffff;

    border-color: #1e293b;

    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.22);
}


/* =========================================================
   TYPE - OUTLINE
========================================================= */

.kn-btn--outline {
    background-color: #fff;
    color: #0f172a;
    border: 1px solid var(--slate-200);
    box-shadow: none;
}


.kn-btn--outline:hover {
    background-color: #0f172a;
    color: #ffffff;

    border-color: #0f172a;
}


/* =========================================================
   SIZE - SMALL
========================================================= */

.kn-btn--s {
    padding: 9px 18px;

    font-size: 11px;

    border-radius: 8px;

    gap: 6px;
}


.kn-btn--s .kn-btn__icon {
    font-size: 17px;
}


/* =========================================================
   SIZE - MEDIUM
========================================================= */

.kn-btn--m {
    padding: 14px 26px;
    font-size: 12px;

    border-radius: 12px;

    gap: 10px;
}


.kn-btn--m .kn-btn__icon {
    font-size: 19px;
}


/* =========================================================
   SIZE - LARGE
========================================================= */

.kn-btn--l {
    padding: 16px 32px;

    font-size: 14px;

    border-radius: 14px;

    gap: 12px;
}


.kn-btn--l .kn-btn__icon {
    font-size: 22px;
}


/* =========================================================
   TEXT
========================================================= */

.kn-btn__text {
    display: inline-block;
}


/* =========================================================
   ICON
========================================================= */

.kn-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 1em;
    height: 1em;

    line-height: 1;

    flex-shrink: 0;

    transition:
        transform 0.25s ease;
}




/* =========================================================
   ICON RIGHT ANIMATION
========================================================= */

.kn-btn--icon-right:hover .kn-btn__icon {
    transform: translateX(5px);
}


/* =========================================================
   ICON LEFT ANIMATION
========================================================= */

.kn-btn--icon-left:hover .kn-btn__icon {
    transform: translateX(-5px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 767px) {

    .kn-btn--m {
        padding: 10px 20px;
    }


    .kn-btn--l {
        padding: 12px 20px;
        font-size: 12px;
        border-radius: 8px;
    }
    .banner-layer .kn-btn {
        width: 100%;
    }
    .banner-layer .kn-btn--main {
        margin-bottom: 10px;
    }

}