/* Donate page styling, close to rules/stat & rules header */

/* Header like rules */
#header {
  min-width: 100%;
  min-height: 700px;
  height: 30vh;
  background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  z-index: 0;
  display: flex;
  align-items: center;
}

#header .content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  padding: 150px;
  width: 100%;
}

#header .content .info { display:flex; flex-direction:column; }
#header .content .info .minecraft-server-ip { color: var(--white-color); text-transform: uppercase; font-size: 18px; font-weight: 600; }
#header .content .info .title { color: var(--white-color); text-transform: uppercase; font-size: 65px; font-weight: 900; }
#header .content .description { color: var(--description-color); font-size: 18px; font-weight: 400; max-width: 700px; line-height: 1.6; }

#donations .content { max-width: 1100px; margin: 0 auto; padding: 24px 12px; }

.donate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.server-card, .creators-card {
  background: #1e1e1e;
  border-radius: 12px;
  padding: 16px;
}

.stats-title { color: #fff; margin: 0 0 12px 0; }

.server-body { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 12px; align-items: end; }
.server-text p, .server-text li { color: #ddd; }
.server-text ul { margin: 8px 0 12px 18px; }
.server-text .note { margin-top: 8px; color: #ccc; }
.server-text .warn { color: #ff6d6d; font-size: 12px; }
.btn.primary { display:inline-block; padding:10px 16px; background:#3fcf7f; color:#0e0e0e; border-radius: 24px; text-decoration:none; font-weight:600; margin-top:10px; }

.server-skin img { width: 100%; max-width: 220px; display:block; margin-left:auto; }

.creators-list { display:flex; flex-direction:column; gap:10px; }
.creator { display:grid; grid-template-columns: 56px 1fr 48px; align-items:center; background:#262626; border-radius: 999px; padding:10px 12px; }
.creator .avatar { width:40px; height:40px; }
.creator .avatar img { width:40px; height:40px; object-fit:cover; border-radius:50%; display:block; }
.creator .avatar .placeholder { width:40px; height:40px; border-radius:50%; background:#e5e5e5; display:block; }
.creator .name { color:#fff; padding-left:6px; }
.creator .action .pill { display:inline-block; width:28px; height:28px; border-radius:50%; line-height:28px; text-align:center; color:#0e0e0e; text-decoration:none; font-weight:700; }
.creator .action .pill.success { background: var(--green-color); }
.creator .action .pill.danger { background: var(--red-color); color:#111; }

@media (max-width: 900px) {
  .donate-grid { grid-template-columns: 1fr; }
  .server-body { grid-template-columns: 1fr; }
  .server-skin img { margin: 0 auto; }
}

/* Responsive header like rules */
@media screen and (max-width: 1625px) {
  #header .content { padding: 150px 90px; }
}
@media screen and (max-width: 1361px) {
  #header .content { flex-direction: column; padding: 120px 90px; }
}
@media screen and (max-width: 819px) {
  #header .content { padding: 150px 30px; }
  #header .content .info .minecraft-server-ip { font-size: 15px; }
  #header .content .info .title { font-size: 40px; }
  #header .content .info .description { font-size: 16px; }
}
@media screen and (max-width: 530px) {
  #header .content { justify-content: start; align-items: start; }
  #header .content .info .title { font-size: 30px; }
}