/* =========================================================
   ОБЩИЕ КНОПКИ ПЛАТФОРМЫ
   ========================================================= */


/* =========================================================
   ОБЩАЯ КНОПКА
   ========================================================= */

.general-button {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 220px;

    margin: 0;

    padding: 8px 15px;

    box-sizing: border-box;

    border-radius: 8px;

    font-family:
        Inter,
        system-ui,
        sans-serif;

    font-size: 17px;

    font-weight: 500;

    line-height: 1.3;

    color: #FFFFFF;

    cursor: pointer;

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

}


/* =========================================================
   СИНЯЯ КНОПКА
   ========================================================= */

.general-button-blue {

    background: var(--blue);

    color: #FFFFFF;

    border: 1px solid var(--blue);

    box-shadow:
        0 1px 3px rgba(30, 64, 175, .15);

}


/* =========================================================
   СИНЯЯ КНОПКА — HOVER
   ========================================================= */

.general-button-blue:hover {

    background: var(--blue-dark);

    border-color: var(--blue-dark);

    box-shadow:
        0 5px 12px rgba(30, 64, 175, .22);

    transform: translateY(-1px);

}


/* =========================================================
   СИНЯЯ КНОПКА — ACTIVE
   ========================================================= */

.general-button-blue:active {

    transform: translateY(0);

}


/* =========================================================
   СИНЯЯ КНОПКА — FOCUS
   ========================================================= */

.general-button-blue:focus-visible {

    outline: 2px solid var(--blue);

    outline-offset: 2px;

}


/* =========================================================
   ТЕМНО-СЕРАЯ КНОПКА
   ========================================================= */

.general-button-gray {

    background: #6B7280;

    color: #FFFFFF;

    border: 1px solid #6B7280;

    box-shadow:
        0 1px 3px rgba(17, 24, 39, .12);

}


/* =========================================================
   ТЕМНО-СЕРАЯ КНОПКА — HOVER
   ========================================================= */

.general-button-gray:hover {

    background: #4B5563;

    border-color: #4B5563;

    color: #FFFFFF;

    box-shadow:
        0 4px 10px rgba(17, 24, 39, .18);

    transform: translateY(-1px);

}


/* =========================================================
   ТЕМНО-СЕРАЯ КНОПКА — ACTIVE
   ========================================================= */

.general-button-gray:active {

    transform: translateY(0);

}


/* =========================================================
   ТЕМНО-СЕРАЯ КНОПКА — FOCUS
   ========================================================= */

.general-button-gray:focus-visible {

    outline: 2px solid #6B7280;

    outline-offset: 2px;

}



/* =========================================================
   КОНТЕЙНЕР ОБЩИХ КНОПОК
   ========================================================= */

.general-buttons {

    display: flex;

    align-items: flex-start;

    margin-top: 30px;

    margin-left: 150px;

    margin-bottom: 30px;

    gap: 10px;

}



/* =========================================================
   ОДНОСТРОЧНАЯ СИНЯЯ КНОПКА
   ========================================================= */

.general-button-blue-single {

    height: 60px;

}


/* =========================================================
   ОДНОСТРОЧНАЯ СЕРАЯ КНОПКА
   ========================================================= */

.general-button-gray-single {

    height: 60px;

}