:root {
    --ifm-accent: #ff6e00;
    --ifm-accent-hover: #ff8500;
    --ifm-accent-active: #e86100;

    --ifm-text: #ffffff;

    --ifm-shadow:
        0 10px 30px rgba(255,110,0,.25);

    --ifm-shadow-hover:
        0 15px 40px rgba(255,110,0,.35);
}

/* =========================
   Основная кнопка
========================= */

.ifm-btn {

    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 52px;
    padding: 0 32px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            var(--ifm-accent),
            #ff8a00
        );

    color: var(--ifm-text)!important;

    font-size: 16px;
    font-weight: 600;

    text-decoration: none;

    border: none;

    cursor: pointer;

    overflow: hidden;

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

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease,
        color .25s ease;

}


/* =========================
   Блик при наведении
========================= */


.ifm-btn::before {

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:80%;
    height:100%;


    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );


    transform:skewX(-25deg);

    transition:
        left .6s ease;

}


.ifm-btn:hover::before {

    left:140%;

}



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


.ifm-btn:hover {

    background:
        linear-gradient(
            135deg,
            var(--ifm-accent-hover),
            #ff9b22
        );


    transform:
        translateY(-3px);


    box-shadow:
        var(--ifm-shadow-hover);
        color: #fff;

}



/* =========================
   Active
========================= */


.ifm-btn:active {


    transform:
        translateY(0)
        scale(.97);


    background:
        var(--ifm-accent-active);


    box-shadow:
        0 5px 15px rgba(255,110,0,.25);

}



/* =========================
   Focus
========================= */


.ifm-btn:focus-visible {

    outline:none;


    box-shadow:

        0 0 0 4px
        rgba(255,110,0,.25),

        var(--ifm-shadow-hover);

}



/* =========================
   Иконка
========================= */


.ifm-btn__icon {

    transition:
        transform .25s ease;

}



.ifm-btn:hover 
.ifm-btn__icon {

    transform:
        translateX(5px);

}



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


.ifm-btn.disabled,
.ifm-btn:disabled {


    cursor:not-allowed;

    opacity:.45;


    background:#999;


    box-shadow:none;


    transform:none;

}



.ifm-btn.disabled:hover::before {

    display:none;

}



/* =========================
   Loading состояние
========================= */


.ifm-btn.loading {


    pointer-events:none;

}



.ifm-btn.loading
.ifm-btn__text {


    opacity:0;

}



.ifm-btn.loading::after {


    content:"";


    position:absolute;


    width:20px;
    height:20px;


    border-radius:50%;


    border:

        3px solid rgba(255,255,255,.35);


    border-top-color:#fff;


    animation:

        ifm-spin .8s linear infinite;

}



@keyframes ifm-spin {

    from {
        transform:rotate(0deg);
    }

    to {
        transform:rotate(360deg);
    }

}



/* =========================
   Маленькая версия
========================= */


.ifm-btn--small {

    min-height:42px;

    padding:

        0 22px;

    font-size:14px;

}



/* =========================
   Большая версия
========================= */


.ifm-btn--large {

    min-height:62px;

    padding:

        0 42px;

    font-size:18px;

}



/* =========================
   На мобильных
========================= */


@media(max-width:576px){

    .ifm-btn {

        width:100%;

        justify-content:center;

    }

}