:root {
  --yellow:  #FFEB3B;
  --green:   #4CAF50;
  --teal:    #009688;
  --dark:    #212121;
  --light:   #F1F8E9;
}

/* Base resets & fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Montserrat:wght@500;700&display=swap');
* { box-sizing: border-box; margin:0; padding:0; }
body {
  font-family: 'Open Sans', sans-serif;
  background: var(--light);
  color: var(--dark);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Main container */
.container {
  width: 100%;
  max-width: 480px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  overflow: hidden;
}

/* Header bar */
.header {
  background: linear-gradient(135deg, var(--yellow), var(--green));
  color: var(--dark);
  padding: 24px;
  text-align: center;
}
.header h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  margin: 0;
}

/* Form styling */
.form {
  padding: 24px;
}
.form input, .form button {
  width: 100%;
  margin-bottom: 16px;
  font-size: 16px;
}
.form input {
  padding: 12px;
  border: 1px solid #CCC;
  border-radius: 4px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(76,175,80,0.3);
}
.form button {
  padding: 14px;
  background: var(--green);
  border: none;
  border-radius: 4px;
  color: white;
  font-weight: 600;
  transition: background 0.2s, transform 0.2s;
}
.form button:hover {
  background: var(--teal);
  transform: translateY(-2px);
}

/* Links below forms */
.link {
  text-align: center;
  padding-bottom: 16px;
}
.link a {
  color: var(--green);
  text-decoration: none;
  font-weight: 600;
}
.link a:hover {
  text-decoration: underline;
}

/* Map embed (request page) */
#map {
  width: 100%;
  height: 200px;
  border-radius: 4px;
  margin-bottom: 16px;
}

/* Bid cards */
.bid-card {
  background: var(--light);
  border: 1px solid #EEE;
  border-left: 4px solid var(--green);
  border-radius: 4px;
  margin-bottom: 16px;
  padding: 16px;
  transition: box-shadow 0.2s;
}
.bid-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.bid-card p {
  margin: 8px 0;
}
.bid-card .bid-form {
  display: flex;
  gap: 8px;
}
.bid-card .bid-form input {
  flex: 1;
}
.bid-card .bid-form button {
  flex: 0 0 120px;
}