/* =====================================================
   FORMS
===================================================== */

.fgroup{
    margin-bottom:14px;
}

.flabel{
    display:block;
    margin-bottom:4px;
    font-size:11px;
    font-weight:500;
    color:var(--ink3);
    text-transform:uppercase;
    letter-spacing:.5px;
    font-family:var(--mono);
}

.finput,
.fselect,
.ftextarea{
    width:100%;
    padding:9px 12px;
    border:1px solid var(--rule-md);
    border-radius:var(--r);
    background:var(--surface);
    color:var(--ink);
    font-family:var(--sans);
    font-size:13px;
    outline:none;
    transition:.15s;
}

.finput:focus,
.fselect:focus,
.ftextarea:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(200,80,10,.10);
}

.ftextarea{
    resize:vertical;
    min-height:72px;
}

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

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;

    padding:8px 16px;

    border:none;
    border-radius:var(--r);

    cursor:pointer;

    font-size:13px;
    font-weight:500;
    font-family:var(--sans);

    transition:.15s;
    white-space:nowrap;
}

.btn i{
    font-size:14px;
}

/* Primary */

.btn-primary{
    background:var(--accent);
    color:#fff;
}

.btn-primary:hover{
    background:#b34508;
}

/* Outline */

.btn-outline{
    background:transparent;
    color:var(--ink);
    border:1px solid var(--rule-md);
}

.btn-outline:hover{
    background:var(--paper);
}

/* Green */

.btn-green{
    background:var(--accent2);
    color:#fff;
}

.btn-green:hover{
    background:#155535;
}

/* Danger */

.btn-danger{
    background:var(--danger);
    color:#fff;
}

.btn-danger:hover{
    filter:brightness(.95);
}

/* Steel */

.btn-steel{
    background:var(--steel);
    color:#fff;
}

.btn-steel:hover{
    filter:brightness(.95);
}

/* Sizes */

.btn-sm{
    padding:5px 10px;
    font-size:12px;
}

.btn-block{
    width:100%;
}

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

.icon-btn{

    width:32px;
    height:32px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--rule-md);
    border-radius:var(--r);

    background:transparent;

    cursor:pointer;

    color:var(--ink2);

    transition:.15s;
}

.icon-btn:hover{
    background:var(--paper);
}