/*=========================================================
    KKF BUTTON SYSTEM v2.0
=========================================================*/

/*=========================================================
    Base Button
=========================================================*/

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

.kk-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 30px;

    border:none;

    border-radius:var(--kk-radius-pill);

    font-weight:600;

    font-size:15px;

    line-height:1;

    cursor:pointer;

    text-decoration:none;

    overflow:hidden;

    transition:

        transform var(--kk-transition),

        box-shadow var(--kk-transition),

        background var(--kk-transition),

        color var(--kk-transition);

}

/*=========================================================
    Hover
=========================================================*/

.kk-btn:hover{

    transform:translateY(-3px);

    box-shadow:var(--kk-shadow-hover);

}

.kk-btn:active{

    transform:translateY(0);

}
.kk-btn:focus-visible{

    outline:3px solid rgba(255,179,0,.35);

    outline-offset:4px;

}

/*=========================================================
    BUTTON SHINE
=========================================================*/

.kk-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,.35),

            transparent

        );

    transition:left .7s ease;

}

.kk-btn:hover::before{

    left:140%;

}

/*=========================================================
    Disabled
=========================================================*/

.kk-btn:disabled,
.kk-btn.disabled{

    opacity:.65;

    cursor:not-allowed;

    pointer-events:none;

}

/*=========================================================
    Primary
=========================================================*/

.kk-btn-primary{

    background:linear-gradient(

        135deg,

        var(--kk-primary),

        #B71C1C

    );

    color:#fff;

}

.kk-btn-primary:hover{

    background:var(--kk-primary-dark);

    box-shadow:var(--kk-shadow-lg);

}

/*=========================================================
    Secondary
=========================================================*/

.kk-btn-secondary{

    background:var(--kk-secondary);

    color:var(--kk-text);

    box-shadow:var(--kk-shadow-sm);

}

.kk-btn-secondary:hover{

    box-shadow:var(--kk-shadow);

}

/*=========================================================
    Outline
=========================================================*/

.kk-btn-outline{

     border:2px solid var(--kk-primary);

    color:var(--kk-primary);

    background:#fff;

}

.kk-btn-outline:hover{

     background:var(--kk-primary);

    color:#fff;

}

/*=========================================================
    WhatsApp
=========================================================*/

.kk-btn-whatsapp{

    background:linear-gradient(

        135deg,

        #25D366,

        #1EBE5D

    );

    color:#fff;

}

.kk-btn-whatsapp:hover{

    background:#1EBE5D;

}

/*=========================================================
    Gold
=========================================================*/

.kk-btn-gold{

    background:var(--kk-gold);

    color:var(--kk-text);

    box-shadow:var(--kk-shadow);

}

.kk-btn-gold:hover{

    filter:brightness(.96);

}

/*=========================================================
    Sizes
=========================================================*/

.kk-btn-sm{

    padding:10px 22px;

    font-size:14px;

}

.kk-btn-lg{

    padding:18px 38px;

    font-size:18px;

}

/*=========================================================
    Full Width
=========================================================*/

.kk-btn-block{

    width:100%;

}

/*=========================================================
    Icon
=========================================================*/

.kk-btn i{

    font-size:16px;

    line-height:1;

}

/*=========================================================
    Icon Only
=========================================================*/

.kk-btn-icon{

    width:52px;

    height:52px;

    padding:0;

}
@media(max-width:768px){

    .kk-btn{

        width:100%;

    }

}