.custom-card {
  border-radius: 10px;
  border: none;
  background: var(--Prussian-100, #E9EFF8);
  display: flex;
  padding: 24px 16px;
  text-align: left;
  margin-bottom: 20px;
  align-items: left; /* Ensures vertical alignment of date-box and event details */
}

/* Date Box - Ensures alignment across all event cards */
.date-box {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  width: 90px; /* Ensures all date boxes are the same width */
  min-width: 90px;
  padding: 10px;
  text-align: left;
  font-weight: var(--fw-bold);
  color: var(--Marian-700);
  flex-shrink: 0; /* Prevents the date box from shrinking */
}

/* Month Styling */
.date-box .month {
  font-size: var(--fs-title-1);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: var(--Marian-700);
}

/* Day Container - Keeps days inline (e.g., 17-18) */
.date-box .day-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px; /* Controls spacing between numbers */
}

/* Day Number Styling */
.date-box .day {
  font-size: var(--fs-title-1);
  font-weight: var(--fw-bold);
  color: var(--Marian-700);
}

/* Separator (-) between multi-day events */
.date-box .separator {
  font-size: var(--fs-title-1);
  font-weight: var(--fw-bold);
  color: var(--Marian-700);
}

/* Ensures event details take the remaining space */
.event-details {
  margin-left: 30px;
  flex-grow: 1;
}

/* Event Badge */
.event-badge {
  background-color: var(--Butterscotch-100);
  color: var(--Butterscotch-800);
  font-family: var(--font-roboto);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  padding: 5px 8px;
  border-radius: 5px;
}

/* Event Date Styling */
.event-date {
  font-family: var(--font-roboto);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--Prussian-600);
}

/* Event Title */
.event-title {
  font-family: var(--font-poppins);
  font-size: var(--fs-title-3);
  font-weight: var(--fw-semibold);
  color: var(--Grayscale-700);
  margin: 4px 0px;
}

/* Event Location */
.event-location {
  font-family: var(--font-roboto);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--Prussian-600);
}
.btn-primary {
  border-radius: 6px;
  background: var(--Marian-100, #C7D7F1);
  color: var(--Marian-800, #082E67);
  font-family: var(--font-roboto);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  border: none; /* Remove Bootstrap default border */
  transition: background 0.3s ease, color 0.3s ease; /* Smooth effect */
}

/* Hover effect */
.btn-primary:hover {
  background: var(--Marian-200, #A5C1E8); /* Lighter or darker shade */
  color: var(--Marian-900, #021C44); /* Darker text color */
}

/* Enhanced secondary button styling for seniors using grayscale */
.btn-secondary {
  border-radius: 8px;
  font-family: var(--font-roboto);
  font-size: var(--fs-headline); /* Larger than body text */
  font-weight: var(--fw-medium);
  padding: 12px 20px; /* Increased padding for larger touch target */
  border: none;
  background: var(--Grayscale-600);
  color: var(--Grayscale-50);

}

/* Hover effect for secondary button */
.btn-secondary:hover {
  background-color: var(--Grayscale-800);
}