/* ==========================================================
   Evercore Invoices
   buttons.css
   Modern SaaS button system (2026 fintech style)
   ========================================================== */

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

button{

    font-family:var(--font);

    font-size:.95rem;

    border:none;

    cursor:pointer;

    transition:var(--transition);

}

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

.primary-btn{

    width:100%;

    padding:14px 16px;

    background:var(--primary);

    color:#fff;

    border-radius:14px;

    font-weight:600;

    box-shadow:0 10px 20px rgba(37,99,235,.18);

    margin-bottom:12px;

}

.primary-btn:hover{

    background:var(--primary-hover);

    transform:translateY(-1px);

    box-shadow:0 14px 28px rgba(37,99,235,.25);

}

.primary-btn:active{

    transform:translateY(0px);

    box-shadow:0 8px 16px rgba(37,99,235,.18);

}

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

.secondary-btn{

    width:100%;

    padding:14px 16px;

    background:#f3f4f6;

    color:var(--text);

    border-radius:14px;

    font-weight:600;

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

    margin-bottom:12px;

}

.secondary-btn:hover{

    background:#e5e7eb;

    transform:translateY(-1px);

}

.secondary-btn:active{

    transform:translateY(0px);

}

/* =========================
   DANGER BUTTON (DELETE ITEM)
   ========================= */

.danger-btn{

    background:#fee2e2;

    color:#b91c1c;

    border-radius:10px;

    padding:10px;

    font-weight:700;

    transition:var(--transition);

}

.danger-btn:hover{

    background:#fecaca;

}

/* =========================
   ADD ITEM BUTTON (ALREADY IN FORMS, ENHANCED HERE)
   ========================= */

.add-item{

    width:100%;

    padding:12px;

    border-radius:12px;

    background:linear-gradient(
        135deg,
        #eef2ff,
        #e0e7ff
    );

    color:var(--primary);

    font-weight:600;

    border:1px solid #dbeafe;

    transition:var(--transition);

    margin-top:12px;

}

.add-item:hover{

    transform:translateY(-1px);

    box-shadow:0 8px 18px rgba(37,99,235,.12);

}

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

.icon-btn{

    width:38px;

    height:38px;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f3f4f6;

    color:var(--text);

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

}

.icon-btn:hover{

    background:#e5e7eb;

}

/* =========================
   LOADING STATE (FOR PDF EXPORT)
   ========================= */

button.loading{

    position:relative;

    pointer-events:none;

    opacity:.8;

}

button.loading::after{

    content:"";

    position:absolute;

    right:14px;

    top:50%;

    transform:translateY(-50%);

    width:14px;

    height:14px;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.4);

    border-top-color:#fff;

    animation:spin .7s linear infinite;

}

@keyframes spin{

    to{
        transform:translateY(-50%) rotate(360deg);
    }

}

/* =========================
   FOCUS STATES (ACCESSIBILITY)
   ========================= */

button:focus-visible{

    outline:3px solid rgba(37,99,235,.25);

    outline-offset:3px;

}

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

button:disabled{

    opacity:.5;

    cursor:not-allowed;

    transform:none !important;

}