/* template.css */
body { font-family: Arial, sans-serif; background:#f6f6f6; margin:0; color:#222; }
.header { background:#fff; border-bottom:1px solid #e6e6e6; }
.wrap { max-width: 980px; margin: 0 auto; padding: 16px; }
.brand { display:flex; align-items:center; gap:14px; }
.brand img { width:64px; height:64px; border-radius:10px; }
.brand h1 { font-size:20px; margin:0; }
.nav { margin-top:10px; display:flex; gap:16px; flex-wrap:wrap; font-size:14px; }
.nav a { color:#1f3b2c; text-decoration:none; font-weight:bold; }
.card { background:#fff; border:1px solid #e6e6e6; border-radius:12px; padding:18px; margin:16px 0; }
h2 { font-size:18px; margin:0 0 12px; }
label { display:block; font-weight:bold; margin-top:12px; }
input[type=text], input[type=email], textarea, select {
  width:100%; padding:10px; border:1px solid #ccc; border-radius:8px; font-size:14px;
}
.small {
  font-size: 12px;
  line-height: 1.5;   /* makes it match the agreement text */
  color: #555;
  margin-top: 6px;
}

.grid { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
@media (max-width: 700px){ .grid { grid-template-columns: 1fr; } }

/* Hard reset to keep fieldsets aligned with other form fields */
*, *:before, *:after { box-sizing: border-box; }

fieldset {
  margin: 0;              /* kills default indent/margins */
  padding: 0;             /* kills default padding */
  border: 0;              /* remove the fieldset box (optional, but usually looks cleaner) */
  min-inline-size: 0;     /* fixes odd shrink/indent in some browsers */
}

legend {
  padding: 0;
  margin: 0 0 12px 0;
  font-weight: 700;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

/* Give your “sections” the same look as the rest of the form */
fieldset + .hr,
.hr + fieldset { margin-top: 16px; }

fieldset input[type="file"] {
  width: 100%;
}

/* Ensure the submit button aligns like other fields */
form button.btn {
  display: inline-block;
  margin-left: 0;
}
/* Small helper text under header title */
.medium { font-size: 14px; color:#555; margin-top:4px; }

/* Divider */
.hr { border-top: 1px solid #e6e6e6; margin: 18px 0; }

/* Buttons */
.btn {
  appearance: none;
  border: 0;
  background: #1f3b2c;
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.btn:active { transform: translateY(1px); }

/* Form actions */
.actions { margin-top: 16px; }

/* Mobile tap targets + prevent iOS zoom (16px+) */
input[type=text], input[type=email], input[type=tel], input[type=url], textarea, select {
  font-size: 16px;
  min-height: 44px;
}

input[type=file]{
  padding: 10px;
  border: 1px dashed #ccc;
  border-radius: 10px;
  background: #fafafa;
}

.checkbox-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 10px;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  background: #fafafa;
  cursor: pointer;
}
.checkbox-row input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

/* Focus styles */
input:focus, textarea:focus, select:focus {
  outline: 2px solid rgba(31, 59, 44, .35);
  outline-offset: 2px;
  border-color: rgba(31, 59, 44, .45);
}

/* Header tweaks for small screens */
@media (max-width: 700px){
  .wrap { padding: 12px; }
  .card { padding: 14px; }
  .brand { flex-direction: column; align-items:flex-start; }
  .brand img { width: 56px; height: 56px; }
  .nav a { padding: 8px 10px; background:#f6f6f6; border-radius: 10px; }
  .btn { width: 100%; }
}