/* styles.css: exact design implementation */
@import url('https://fonts.googleapis.com/css2?family=Inter:wwght@400;500;600&display=swap');

:root {
  --clr-primary: #004b8d;
  --clr-primary-light: #006bb3;
  --clr-text: #1c2a35;
  --clr-bg-light: rgba(255, 255, 255, 0.85);
  --clr-border: #e2e8f0;
  --radius: 1rem;
  --space: 1rem;
  --space-sm: 0.5rem;
  --btn-gradient-from: var(--clr-primary);
  --btn-gradient-to: var(--clr-primary-light);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.7),
    rgba(255,255,255,0.7)
  ),
  url('photos/background.jpg') center/cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--clr-text);
}

/* Heading and subtitle */
h1#indexheading {
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 var(--space) 0;
  color: var(--clr-primary);
}
p {
  margin: 0 0 calc(var(--space) * 1.5) 0;
  font-size: 1rem;
  color: var(--clr-text);
}

/* Form container card */
#searchForm {
  position: relative;
  width: 100%;
  max-width: 900px;
  background: var(--clr-bg-light);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  padding: calc(var(--space) * 1);
  backdrop-filter: blur(10px);
  box-sizing: border-box;
  margin: var(--space) auto;
}

/* Labels for fields (excluding radio) */
#searchForm > label {
  display: block;
  text-align: left;
  margin-bottom: var(--space-sm);
  font-weight: 500;
}

/* Inputs and selects */
#searchForm input[type="text"],
#searchForm input[type="date"],
#searchForm select {
  width: 100%;
  height: 44px;
  padding: 0 0.75rem;
  margin-bottom: var(--space);
  border: 1px solid var(--clr-border);
  border-radius: 0.5rem;
  background: #fff;
  font-size: 0.95rem;
  outline: none;
  box-sizing: border-box;
  text-align: center;
  appearance: none;
}
#searchForm input:focus,
#searchForm select:focus {
  border-color: var(--clr-primary-light);
  box-shadow: 0 0 0 3px rgba(0,75,141,0.15);
}

/* Suggestions dropdown */
#suggestions {
  position: absolute;
  top: calc(70px + var(--space));
  left: 0.75rem;
  width: calc(100% - 1.5rem);
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: 0.5rem;
  max-height: 8rem;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 10;
}
#suggestions div {
  padding: var(--space-sm);
  text-align: center;
  cursor: pointer;
}
#suggestions div:hover {
  background: var(--clr-bg-light);
}

/* Radio-group: centered pill buttons */
.radio-group {
  display: flex;
  gap: var(--space);
  margin-bottom: var(--space);
}
#searchForm .radio-group input[type="radio"] {
  display: none;
}
#searchForm .radio-group label {
  flex: 1;
  padding: var(--space-sm) 0;
  background: #fff;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  text-align: center;
  font-size: 0.95rem;
  cursor: pointer;
  margin: 0;
}
#searchForm .radio-group input[type="radio"]:checked + label {
  background: var(--btn-gradient-to);
  border-color: var(--btn-gradient-to);
  color: #fff;
}

/* Submit button */
#searchForm button[type="submit"] {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 0.5rem;
  background: linear-gradient(
    90deg,
    var(--btn-gradient-from),
    var(--btn-gradient-to)
  );
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: var(--space);
  transition: background 0.3s;
}
#searchForm button[type="submit"]:hover {
  background: linear-gradient(
    90deg,
    var(--btn-gradient-to),
    var(--btn-gradient-from)
  );
}

/* Error message */
#searchMsg {
  height: 1.2rem;
  margin-top: var(--space-sm);
  font-size: 0.9rem;
  color: crimson;
  text-align: center;
}

/* Mobile overrides for phones <=480px */
@media (max-width: 1000px) {
  html, body {
    margin: 0;
    padding: 0;
  }
  #searchForm {
    width: 80vw;
    height: auto;
    max-width: none;
    margin: 10px auto;
    padding: 10px;
    border-radius: var(--radius);
  }
  #searchForm input[type="text"],
  #searchForm input[type="date"],
  #searchForm select {
    height: 64px;
    font-size: 1.6rem;
    margin-bottom: 10px;
  }
  .radio-group label {
    font-size: 1.6rem;
    padding: calc(var(--space) * 0.75) 0;
  }
  #searchForm button[type="submit"] {
    height: 64px;
    font-size: 1.6rem;
  }
  #suggestions {
    position: absolute;
    top: calc(85px + var(--space));
    left: 0.75rem;
    width: calc(100% - 1.5rem);
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: 0.5rem;
    max-height: 8.3rem;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 10;
  }
  h1#indexheading {
  font-size: 4rem;
  font-weight: 600;
  margin: 0 0 var(--space) 0;
  color: var(--clr-primary);
}
p {
  margin: 0 0 calc(var(--space) * 1.5) 0;
  font-size: 2rem;
  color: var(--clr-text);
}
}