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

.btn,
button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:42px;

    padding:0 18px;

    border:none;

    border-radius:10px;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    text-decoration:none;

    transition:.18s;

}

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

.btn-primary{

    background:#C9A227;

    color:#fff;

}

.btn-primary:hover{

    background:#B38F1F;

    color:#fff;

    transform:translateY(-1px);

}

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

.btn-secondary{

    background:var(--surface-alt);

    color:var(--text-strong);

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

}

.btn-secondary:hover{

    background:var(--border);

}

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

.btn-success{

    background:#16A34A;

    color:#fff;

}

.btn-success:hover{

    background:#15803D;

}

/* ==========================================================
   DANGER
========================================================== */

.btn-danger{

    background:#DC2626;

    color:#fff;

}

.btn-danger:hover{

    background:#B91C1C;

}

/* ==========================================================
   WARNING
========================================================== */

.btn-warning{

    background:#F59E0B;

    color:#fff;

}

.btn-warning:hover{

    background:#D97706;

}

/* ==========================================================
   LIGHT
========================================================== */

.btn-light{

    background:var(--card);

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

    color:var(--text-strong);

}

.btn-light:hover{

    background:var(--surface-alt);

}

/* ==========================================================
   ICON BUTTON
========================================================== */

.btn-icon{

    width:40px;

    height:40px;

    padding:0;

}

.btn-icon svg,
.btn-icon i{

    width:18px;

    height:18px;

}

/* ==========================================================
   SMALL
========================================================== */

.btn-sm{

    height:34px;

    padding:0 14px;

    font-size:13px;

}

/* ==========================================================
   LARGE
========================================================== */

.btn-lg{

    height:48px;

    padding:0 24px;

    font-size:15px;

}

/* ==========================================================
   TOOLBAR
========================================================== */

.toolbar-actions{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

/* ==========================================================
   GROUP
========================================================== */

.btn-group{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}

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

.btn:disabled,
button:disabled{

    opacity:.55;

    cursor:not-allowed;

    transform:none;

}

/* ==========================================================
   FOCUS
========================================================== */

.btn:focus-visible,
button:focus-visible{

    outline:none;

    box-shadow:0 0 0 4px rgba(201,162,39,.25);

}