/* ================== BUTTONS ================== */
.btn {
  padding: 0.55rem 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--btn-radius);
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: background-color 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, color 0.18s ease;
}

.btn-sm {
  padding: 0.25rem 0.65rem;
  font-size: 0.8125rem;
}

.btn-span {
  color: #aaa;
}

/* Primary — blue */
.btn-outline-primary {
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}
.btn-outline-primary:hover {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
  color: #fff;
  box-shadow: 0 2px 10px rgba(13, 110, 253, 0.25);
}

/* Success — green (Download, Donate, Enable All) */
.btn-outline-success {
  border-color: var(--success-green);
  color: var(--success-green);
}
.btn-outline-success:hover {
  background-color: var(--success-green);
  border-color: var(--success-green);
  color: #fff;
  box-shadow: 0 2px 10px rgba(25, 135, 84, 0.25);
}

/* Warning — amber (Edit, Buy Me a Coffee) */
.btn-outline-warning {
  border-color: var(--warning-yellow);
  color: #856404;
}
.btn-outline-warning:hover {
  background-color: var(--warning-yellow);
  border-color: var(--warning-yellow);
  color: #000;
  box-shadow: 0 2px 10px rgba(255, 193, 7, 0.35);
}

/* Danger — red (Delete, Clear, Start Over) */
.btn-outline-danger {
  border-color: var(--danger-red);
  color: var(--danger-red);
}
.btn-outline-danger:hover {
  background-color: var(--danger-red);
  border-color: var(--danger-red);
  color: #fff;
  box-shadow: 0 2px 10px rgba(220, 53, 69, 0.25);
}

/* Secondary — grey (theme toggle, cancel, back) */
.btn-outline-secondary {
  border-color: #6c757d;
  color: #6c757d;
}
.btn-outline-secondary:hover {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
  box-shadow: 0 2px 10px rgba(108, 117, 125, 0.25);
}

/* Info — cyan (OCR, upload image, help) */
.btn-outline-info {
  border-color: #0dcaf0;
  color: #0a7aab;
}
.btn-outline-info:hover {
  background-color: #0dcaf0;
  border-color: #0dcaf0;
  color: #000;
  box-shadow: 0 2px 10px rgba(13, 202, 240, 0.3);
}

/* Solid Bootstrap buttons — transition + colored hover shadow */
.btn-primary, .btn-success, .btn-danger,
.btn-warning, .btn-secondary, .btn-info {
  transition: background-color 0.18s ease, border-color 0.18s ease,
              box-shadow 0.18s ease, color 0.18s ease;
}
.btn-primary:hover   { box-shadow: 0 2px 10px rgba(13, 110, 253, 0.35); }
.btn-success:hover   { box-shadow: 0 2px 10px rgba(25, 135, 84, 0.35); }
.btn-danger:hover    { box-shadow: 0 2px 10px rgba(220, 53, 69, 0.35); }
.btn-warning:hover   { box-shadow: 0 2px 10px rgba(255, 193, 7, 0.4); }
.btn-secondary:hover { box-shadow: 0 2px 10px rgba(108, 117, 125, 0.3); }
.btn-info:hover      { box-shadow: 0 2px 10px rgba(13, 202, 240, 0.35); }