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

.png-actions{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

    margin-top:10px;

}

/* ==========================================================
   BASE BUTTON
========================================================== */

.png-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

    border-radius:14px;

    border:none;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:all .22s ease;

    text-decoration:none;

    user-select:none;

}

/* ==========================================================
   PRIMARY
========================================================== */

.png-button-primary{

    background:#7C3AED;

    color:#fff;

}

.png-button-primary:hover{

    background:#6D28D9;

    transform:translateY(-2px);

    box-shadow:
        0 12px 28px rgba(124,58,237,.28);

}

.png-button-primary:active{

    transform:translateY(0);

}

/* ==========================================================
   SECONDARY
========================================================== */

.png-button-secondary{

    background:#fff;

    color:#0E6544;

    border:1px solid #D8E4DE;

}

.png-button-secondary:hover{

    background:#F3F8F6;

    border-color:#0E6544;

}

/* ==========================================================
   COPY BUTTON
========================================================== */

.copy-button{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:10px;

    border:1px solid #E5E7EB;

    background:#fff;

    cursor:pointer;

    font-size:13px;

    font-weight:600;

    color:#475569;

    transition:.2s;

}

.copy-button:hover{

    background:#F8FAFC;

    color:#111827;

    border-color:#CBD5E1;

}

/* ==========================================================
   SUCCESS
========================================================== */

.copy-button.copied{

    background:#0E6544;

    color:#fff;

    border-color:#0E6544;

}

/* ==========================================================
   DISABLED
========================================================== */

.png-button:disabled{

    opacity:.55;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}