:root {
  --bg: #C46A4A;        /* light terracotta background */
  --text: #FFE9D6;      /* cream text */
  --card: #A44A2F;      /* terracotta card background */
  --comment: #D99682;   /* lighter terracotta for comments */
  --button: #8C3F27;    /* darker terracotta button */
}

body.dark {
  --bg: #8C3F27;        /* dark terracotta background */
  --text: #FFE9D6;      /* cream text for contrast */
  --card: #A44A2F;      /* medium terracotta card */
  --comment: #B35A3A;   /* darker comment area */
  --button: #5E2A1F;    /* deep terracotta button */
}

/* BASE */
body {
  background: var(--bg);
  color: var(--text);
  font-family: Arial, sans-serif;
  padding: 20px;
  margin: 0;
}

/* HEADER */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* SEARCH */
#searchBox {
  width: 100%;
  padding: 12px;
  margin: 20px 0;
  font-size: 16px;
  box-sizing: border-box;
  background: rgba(255, 233, 214, 0.2); /* semi-transparent cream */
  color: var(--text);
  border: 1px solid rgba(255, 233, 214, 0.5);
  border-radius: 6px;
}

/* DATABASE CONTAINER */
#databaseContainer {
  height: auto;
  overflow: visible;
  border: 1px solid #B35A3A;
  padding: 10px;
  box-sizing: border-box;
  background: var(--bg);
}

/* SONG CARD */
.song {
  background: var(--card);
  margin-bottom: 20px;
  border-radius: 10px;
  padding: 15px;
  padding-bottom: 180px; /* Extra space for iPhones */
  overflow: hidden;
  color: var(--text);
}

/* AUDIO PLAYER */
audio {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding-bottom: 20px;
  position: static;
}

/* DONATE BUTTON CONTAINER */
.donate-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  position: relative;
  z-index: 3;
  transform: translateZ(0);
}

.donate-buttons::before {
  content: "";
  display: block;
  height: 10px;
}

.donate-buttons a {
  text-decoration: none;
}

/* PAYPAL BUTTONS */
.payButton {
  background: var(--button);
  color: var(--text);
  padding: 12px;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  width: 100%;
  display: block;
}

.payButton:hover {
  background: #5E2A1F; /* slightly darker on hover */
}

/* COMMENTS */
.comment {
  background: var(--comment);
  padding: 8px;
  margin-top: 6px;
  border-radius: 6px;
  color: var(--text);
}

/* COMMENT BOX */
.commentBox {
  display: block;
  width: 100%;
  margin-top: 15px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #B35A3A;
  background: rgba(255, 233, 214, 0.2);
  color: var(--text);
}

/* MOBILE OPTIMIZATION */
@media (max-width: 768px) {
  body {
    padding: 15px;
  }

  .song {
    padding-bottom: 200px; /* extra safety */
  }
}