/*
 * components/button.css — single source for all .btn rules
 *
 * Extracted in Milestone 3 from:
 *   main.v28.css   lines 201, 2007 (split from .popup), 2159 (split), 2986-3049
 *   auth.v5.css    lines 553-569 (was inside @media block — see media query below)
 *
 * NOT YET MIGRATED (still in source files, will move in later milestones):
 *   jack.v15.css   ~15 .btn rules — moves with Milestone 10 (jackpot page split)
 *
 * Loaded AFTER main.v28.css in layout to preserve cascade.
 */

/* === Base .btn structure (was main.v28:2007 + 2986) === */
.btn {
    height: 48px;
    border-radius: 12px;
    padding: 17px 31px !important;
    color: #030914;
    font-weight: 600;
    overflow: hidden;
    position: relative;
}

.btn .icon {
    margin-right: 13px;
}

.btn span {
    pointer-events: none;
}

.btn.disabled {
    cursor: not-allowed;
}

/* === Color modifiers === */
.btn.white {
    background: #fff;
    color: #3b7be6;
}

.btn--gray {
    background: var(--color-btn-bg, #272d40);
}

.btn--gray-border {
    background: 0 0;
    border: 2px solid #d8dbef;
    color: #7d8ebb;
}

.btn--gray-border:hover {
    border: 2px solid #cccfe3;
    color: #475a89;
}

.btn--blue {
    border-bottom: 0;
}

.btn--blue span {
    text-shadow: none !important;
}

.btn--red {
    background: var(--color-btn-accent, #ce4b45);
    border-bottom: 0 solid var(--color-btn-accent-dark, #d22780);
}

.btn--red span {
    text-shadow: 0 1px 0 rgba(var(--color-accent-rgb, 136, 21, 43), .38);
}

.btn--orange {
    background: linear-gradient(101.85deg, #f66b95 13.32%, #f79e6c 58.67%), #c4c4c4;
}

.btn--purple {
    background: linear-gradient(101.85deg, #6b71f6 13.32%, #8851e2 58.67%), #c4c4c4;
}

.btn--green {
    background: linear-gradient(101.85deg, #29d195 13.32%, #479bca 58.67%), #c4c4c4;
}

.btn--pink {
    background: linear-gradient(101.85deg, #ff4ed8 13.32%, #aa1b82 58.67%), #c4c4c4;
}

/* === Auth-page specifics (was auth.v5.css inside @media (max-width:767px)) === */
@media (max-width: 767px) {
    .btn svg {
        width: 24px;
        height: 24px;
        display: block;
    }

    .btn.only_icon {
        padding: 0;
    }

    .btn.only_icon .icon {
        margin-right: 0;
    }

    .auth__tabs .btn {
        padding: 0;
    }
}