/* ==========================================================
   Sepnex Design System
========================================================== */

/* 01 - Variables */

/* 02 - Buttons */

/* ==========================================================
   Sepnex Design System
   Buttons
========================================================== */

/* ===== Base ===== */

.elementor-button.spx-btn{

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

    min-width:170px;
    height:54px;

    padding:0 28px;

    border:none;
    border-radius:16px;

    font-family:"Peyda",sans-serif;
    font-size:16px;
    font-weight:600;
    line-height:1;

    text-decoration:none;

    transition:
        all .25s ease;

}

/* متن داخل دکمه */

.elementor-button.spx-btn
.elementor-button-content-wrapper{

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

}

/* ===== Primary ===== */

.elementor-button.spx-btn-primary{

    background:#5D3FD3;

    color:#fff;

    box-shadow:
        0 10px 30px rgba(93,63,211,.18);

}

.elementor-button.spx-btn-primary:hover{

    background:#4C32B3;

    color:#fff;

    transform:translateY(-2px);

    box-shadow:
        0 18px 40px rgba(93,63,211,.25);

}

.elementor-button.spx-btn-primary:active{

    transform:translateY(0);

}

/* ===== Secondary ===== */

.elementor-button.spx-btn-secondary{

    background:#fff;

    color:#5D3FD3;

    border:1px solid #5D3FD3;

}

.elementor-button.spx-btn-secondary:hover{

    background:#F5F3FF;

    transform:translateY(-2px);

}

/* ===== Ghost ===== */

.elementor-button.spx-btn-ghost{

    background:transparent;

    color:#5D3FD3;

}

.elementor-button.spx-btn-ghost:hover{

    background:rgba(93,63,211,.08);

}

/* ===== White ===== */

.elementor-button.spx-btn-white{

    background:#fff;

    color:#5D3FD3;

    box-shadow:
        0 10px 30px rgba(0,0,0,.08);

}

.elementor-button.spx-btn-white:hover{

    transform:translateY(-2px);

}

/* ===== Dark ===== */

.elementor-button.spx-btn-dark{

    background:#1E1B4B;

    color:#fff;

}

.elementor-button.spx-btn-dark:hover{

    background:#2A2666;

}

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

.elementor-button.spx-btn:disabled{

    opacity:.45;

    pointer-events:none;

}



/* 03 - Navigation */

/* 04 - Header */

/* 05 - Hero */

/* 06 - Cards */

/* 07 - Forms */

/* 08 - Utilities */

/* 09 - Animations */

/* 10 - Responsive */