/* ===== GENERAL STYLES ===== */
/* ===== GENERAL PAGE STYLES ===== */
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: linear-gradient(to bottom, #1c1c1c, #111);
  color: #f5f5f5;
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  text-align: center;
  color: #ff4d4d; /* urgent red for headings */
  text-shadow: 1px 1px 5px #000;
}

/* ===== LOGO HEADER ===== */
.logo-header {
  text-align: center;
  padding: 20px;
  background-color: #111;
  box-shadow: 0 4px 8px rgba(0,0,0,0.7);
}

.logo {
  height: 80px;
}

/* ===== BUTTONS ===== */
button {
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  transition: all 0.3s ease;
}

#requestBtn {
  background-color: #ff4d4d;
  color: white;
  font-size: 18px;
  font-weight: bold;
  border: 2px solid #ff1a1a;
  box-shadow: 0 0 10px #ff4d4d, 0 0 20px #ff1a1a;
  margin: 20px auto;
  display: block;
  width:400px;
  height:400px;
}

#requestBtn:hover {
  background-color: #ff1a1a;
  box-shadow: 0 0 20px #ff4d4d, 0 0 30px #ff1a1a;
}

/* ===== REQUEST CARDS ===== */
.request-card {
  background: #1a1a1a;
  border-left: 6px solid green; /* default low urgency */
  margin: 15px auto;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(255,0,0,0.3);
  max-width: 600px;
  transition: all 0.3s ease;
}

.request-card:hover {
  transform: scale(1.02);
  box-shadow: 0 0 25px rgba(255,0,0,0.5);
}

.request-card strong {
  color: #ff4d4d;
}

/* urgency colors */
.request-card[style*="border-left-color: red"] { border-left-color: red; }
.request-card[style*="border-left-color: orange"] { border-left-color: orange; }
.request-card[style*="border-left-color: green"] { border-left-color: green; }

/* ===== ADMIN CONTROLS ===== */
.admin-controls {
  text-align: center;
  margin: 20px;
}

.admin-controls button {
  margin: 0 10px;
  background-color: #333;
  color: #ff4d4d;
  border: 1px solid #ff4d4d;
  box-shadow: 0 0 10px #ff4d4d;
}

.admin-controls button:hover {
  background-color: #ff4d4d;
  color: #111;
}

/* ===== LINKS ===== */
a {
  color: #ff6666;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ===== PHOTO SLIDER ===== */
.slider {
  max-width: 800px;
  margin: 20px auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255,0,0,0.4);
}

.slider img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}

.slider:hover img {
  transform: scale(1.05);
}

/* ===== ABOUT PARAGRAPH ===== */
.about {
  max-width: 700px;
  margin: 30px auto;
  font-size: 18px;
  line-height: 1.6;
  color: #f5f5f5;
  text-align: center;
}

/* ===== REFRESH NOTE ===== */
.refresh-note {
  color: #ff9999;
  font-style: italic;
  margin-top: 10px;
}

/* ===== MODAL POPUP ===== */
#modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.hidden {
  display: none;
}

#modalOverlay:not(.hidden) {
  display: flex;
  align-items: center;
  justify-content: center;
}

#requestFormModal {
  background: #222;
  padding: 25px 30px;
  border-radius: 10px;
  box-shadow: 0 0 25px rgba(255,0,0,0.6);
  height:90%;
  width: 90%;
  position: relative;
  animation: popIn 0.3s ease;
  row-gap:10%;
}

/* Modal Animation */
@keyframes popIn {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* Close Button */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  background: none;
  border: none;
  color: #ff4d4d;
  cursor: pointer;
  font-weight: bold;
}

.close-btn:hover {
  color: #ff1a1a;
}

/* ===== FORM STYLING INSIDE MODAL ===== */
#requestForm input,
#requestForm textarea {
  width: 100%;
  padding: 10px;
  margin: 8px 0 16px 0;
  border-radius: 5px;
  border: 1px solid #555;
  background: #111;
  color: #fff;
  row-gap:10%;
}

#requestForm label {
  font-weight: bold;
  color: #ff4d4d;
}

#requestForm button[type="submit"] {
  background-color: #ff4d4d;
  color: white;
  border: 2px solid #ff1a1a;
  font-weight: bold;
  width: 100%;
  padding: 12px;
  border-radius: 5px;
  font-size: 16px;
  box-shadow: 0 0 10px #ff4d4d;
  cursor: pointer;
}

#requestForm button[type="submit"]:hover {
  background-color: #ff1a1a;
}