/*
|--------------------------------------------------------------------------
| Lego Kubik UI Kit
| buttons.css
|--------------------------------------------------------------------------
| Кнопки Lego Kubik
|--------------------------------------------------------------------------
*/


/* ==========================================================
   Базовая кнопка
========================================================== */

.lk-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.6rem;

    padding:.9rem 1.5rem;

    border:none;

    border-radius:999px;

    font-size:1rem;

    font-weight:700;

    line-height:1;

    text-decoration:none;

    cursor:pointer;

    transition:all var(--kubik-transition);

}


/* ==========================================================
   Желтая (основная)
========================================================== */

.lk-button-primary{

    background:var(--kubik-primary);

    color:#1f1f1f;

    box-shadow:0 10px 24px rgba(255,213,2,.25);

}

.lk-button-primary:hover{

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

    transform:translateY(-2px);

    box-shadow:0 16px 32px rgba(255,213,2,.35);

}


/* ==========================================================
   Синяя
========================================================== */

.lk-button-blue{

    background:var(--kubik-blue);

    color:#fff;

    box-shadow:0 10px 24px rgba(14,63,126,.25);

}

.lk-button-blue:hover{

    background:#114b95;

    transform:translateY(-2px);

}


/* ==========================================================
   Красная
========================================================== */

.lk-button-red{

    background:var(--kubik-red);

    color:#fff;

    box-shadow:0 10px 24px rgba(229,57,53,.25);

}

.lk-button-red:hover{

    background:#cc2f2b;

    transform:translateY(-2px);

}


/* ==========================================================
   Белая
========================================================== */

.lk-button-light{

    background:var(--kubik-surface);

    color:var(--kubik-text);

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

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

}

.lk-button-light:hover{

    transform:translateY(-2px);

}


/* ==========================================================
   Темная
========================================================== */

.lk-button-dark{

    background:#2d333d;

    color:#fff;

}

.lk-button-dark:hover{

    background:#39414d;

    transform:translateY(-2px);

}


/* ==========================================================
   Кнопка "Где купить"
========================================================== */

.lk-buy{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:1rem;

    width:100%;

    margin:1rem 0;

    padding:1rem 1.4rem;

    background:var(--kubik-surface);

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

    border-radius:18px;

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

    color:var(--kubik-text);

    text-decoration:none;

    transition:all var(--kubik-transition);

}

.lk-buy:hover{

    transform:translateY(-2px);

}

.lk-buy-title{

    font-weight:700;

}

.lk-buy-arrow{

    font-size:1.2rem;

    opacity:.6;

}


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

@media (max-width:768px){

    .lk-button{

        width:100%;

    }

}