/* ================================
   Algemene layout & typografie
================================ */
body {
  background-color: #f7f7f7;
  font-family: "Inter", "Segoe UI", sans-serif;
  color: #333;
}

/* Container spacing */
.container {
  max-width: 1100px;
}

/* Titels */
h1, h5 {
  font-weight: 600;
  color: #4f7f71; /* kopergroen */
}

/* ================================
   Recepten overzicht (cards)
================================ */
.card {
  border: 1px solid #d8c2a8; /* lichte koper tint */
  border-radius: 10px;
  transition: transform .15s ease, box-shadow .15s ease;
  background-color: #fff;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(75, 110, 100, 0.25); /* kopergroen schaduw */
}

.card-title {
  font-size: 1.1rem;
  margin-bottom: .5rem;
  color: #4f7f71; /* kopergroen */
}

.card-text small {
  color: #6b6b6b;
}

/* Buttons in cards */
.card .btn-primary {
  background-color: #b87333; /* koper */
  border-color: #a5652d;
}

.card .btn-primary:hover {
  background-color: #8f5c29; /* donker koper */
}

/* ================================
   Refresh button
================================ */
#refreshBtn {
  padding: .35rem .75rem;
  background-color: #4f7f71; /* kopergroen */
  border: none;
  color: #fff;
}

#refreshBtn:hover {
  background-color: #3d6459; /* donker kopergroen */
}

/* ================================
   Modal styling
================================ */
.modal-content {
  border-radius: 12px;
  border: 1px solid #d8c2a8; /* koper */
}

.modal-header {
  background: #b87333; /* koper */
  border-bottom: 1px solid #e5e5e5;
  color: #fff;
}

.modal-body p {
  margin-bottom: .5rem;
}

.modal-body strong {
  color: #4f7f71; /* kopergroen */
}

/* Lists inside modal */
.modal-body ul {
  padding-left: 1.2rem;
}

.modal-body li {
  margin-bottom: .25rem;
  color: #444;
}

/* ================================
   Utility classes
================================ */
.text-muted {
  color: #7a7a7a !important;
}

.small {
  font-size: .85rem;
}