/* =========================================================
   BUTTONS
   ========================================================= */

.button {
    position: relative;

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

    min-height: 58px;
    padding: 0 25px;

    overflow: hidden;

    color: #ffffff;

    font-size: 0.95rem;
    font-weight: 700;

    border: 1px solid transparent;
    border-radius: 18px;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease,
        background 180ms ease;
}

.button:hover {
    transform: translateY(-3px);
}

.button--primary {
    background:
        linear-gradient(
            135deg,
            #ff3737,
            #ff7d00
        );

    border-color: rgba(255, 255, 255, 0.2);

    box-shadow:
        0 18px 40px rgba(255, 83, 13, 0.27),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.button--primary::before {
    content: "";

    position: absolute;
    top: -100%;
    left: -40%;

    width: 35%;
    height: 300%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.27),
            transparent
        );

    transform: rotate(24deg);

    transition: left 500ms ease;
}

.button--primary:hover::before {
    left: 125%;
}

.button--primary:hover {
    box-shadow:
        0 22px 52px rgba(255, 83, 13, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.button--glass {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.035)
        );

    border-color: rgba(255, 255, 255, 0.13);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 15px 35px rgba(0, 0, 0, 0.28);

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

.button--glass:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.22);
}

.button__icon {
    font-size: 1.15rem;

    transition: transform 180ms ease;
}

.button:hover .button__icon {
    transform: translateX(4px);
}