@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&family=Poppins:wght@400;600&display=swap");

body {
  background: linear-gradient(180deg, #ffe6f0 0%, #fff8ff 100%);
  font-family: "Quicksand", "Poppins", sans-serif;
  color: #4a3a42;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.navbar {
  background: #d52f7a;
  border-bottom: 3px solid #ffb6c1;
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.3rem;
}

.navbar a {
  color: #fff !important;
  text-decoration: none;
}

.navbar a:hover {
  text-decoration: underline;
}

h1, h5 {
  font-family: "Poppins", sans-serif;
}

h1 {
  color: #d52f7a;
  font-weight: 700;
}

.card {
  border-radius: 1.25rem;
  border: none;
  background: #ffffffee;
  box-shadow: 0 5px 15px rgba(255, 192, 203, 0.3);
  transition: 0.3s ease-in-out;
}

.card:hover {
  box-shadow: 0 6px 20px rgba(255, 182, 193, 0.4);
}

.card-header {
  border-radius: 1.25rem 1.25rem 0 0;
  font-weight: 600;
}

.card-header.bg-danger {
  background-color: #d52f7a !important;
}

.card-header.bg-success {
  background-color: #d52f7a !important; /* rosy pink */
}

.calendar-grid,
.time-grid {
  display: grid;
  gap: 0.75rem;
  justify-content: center;
}

.calendar-grid {
  grid-template-columns: repeat(7, 1fr);
}

.time-grid {
  grid-template-columns: repeat(4, 1fr);
}

button.slot {
  background: #fff;
  border: 2px solid #ffcce0;
  border-radius: 12px;
  padding: 0.75rem;
  cursor: pointer;
  font-weight: 600;
  transition: 0.25s ease;
  color: #b33f62;
  box-shadow: 0 2px 6px rgba(255, 182, 193, 0.2);
}

button.slot:hover {
  background: #ffd6eb;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(255, 182, 193, 0.35);
}

button.slot.selected {
  background: #f06292;
  color: #fff;
  border-color: #f06292;
  box-shadow: 0 4px 10px rgba(240, 98, 146, 0.4);
}

.input-group {
  max-width: 600px;
  margin: 1.5rem auto;
  border: 2px solid #ffd6eb;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.input-group-text {
  background: #ffb6c1;
  color: white;
  border: none;
}

#noteInput {
  font-size: 0.95rem;
  border: none;
  box-shadow: none !important;
}

#noteInput:focus {
  outline: none;
}

#saveNoteBtn {
  background: #d52f7a;
  color: white;
  font-weight: 600;
  border: none;
  transition: 0.2s;
}

#saveNoteBtn:hover {
  background: #d52f7a;
  transform: scale(1.05);
}

.alert-info {
  background: #fff3f8;
  border: 1px solid #ffb6c1;
  color: #b33f62;
}

.alert-success {
  background: #f8e6ef;
  border: 1px solid #f06292;
  color: #4a2e36;
}

.alert-warning {
  background: #ffe6f3;
  border: 1px solid #f48fb1;
}

footer {
  background: #ff7eb9;
  color: #fff;
  padding: 1rem 0;
  font-size: 0.9rem;
  margin-top: 5rem;
  box-shadow: 0 -4px 10px rgba(255, 182, 193, 0.3);
}

footer a {
  color: #fff;
  text-decoration: underline;
}

footer a:hover {
  text-decoration: none;
}