* { box-sizing: border-box; }
html,body { height: 100%; margin: 0; padding: 0; }
body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background: #f5f8ff;
  color: #0b2b3a;
  -webkit-font-smoothing: antialiased;
}

/* container */
.form-container {
  max-width: 950px;
  margin: 36px auto;
  padding: 18px;
}

/* card */
.job-form, form {
  background: #fff;
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(3,51,77,0.06);
  border: 1px solid rgba(3,51,77,0.04);
}

/* title centered */
.form-title, h2 {
  text-align: center;
  color: #0057b8;
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 700;
}

/* section title */
.section-title {
  color: #0056b3;
  margin: 26px 0 10px;
  font-size: 16px;
  font-weight: 700;
  border-bottom: 2px solid rgba(0,123,255,0.07);
  padding-bottom: 6px;
}

/* grid */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px 20px;
  margin-top: 6px;
}

.full-width { grid-column: 1 / -1; }

.form-group { display: flex; flex-direction: column; padding: 6px 2px; }

/* labels above inputs (attachments will be above inputs) */
label { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #0b2b3a; }

/* inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="date"],
select,
textarea {
  padding: 11px 12px;
  border: 1px solid #d6e3f5;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  color: #05232d;
  outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
  width: 100%;
}

textarea { min-height: 86px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  border-color: #0076ff;
  box-shadow: 0 10px 26px rgba(0,118,255,0.06);
}

/* ---------------------------------
   Requirements multi-options (tag like)
   --------------------------------- */
.multi-options { display: flex; flex-wrap: wrap; gap: 10px; }

.multi-options .multi-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: #f1f6ff;
  border: 1px solid #d7e7ff;
  cursor: pointer;
  transition: all .16s ease;
  color: #03334d;
  font-size: 14px;
  user-select: none;
}

/* hover */
.multi-options .multi-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(3,84,165,0.04); }

/* input visuals */
.multi-options input[type="checkbox"] { transform: scale(1.05); accent-color: #0076ff; }

/* when checked visually highlight label:
   use :has where supported, otherwise JS toggles .selected on label */
.multi-options .multi-item:has(input:checked),
.multi-options .multi-item.selected {
  background: #0076ff;
  color: #fff;
  border-color: #0076ff;
  box-shadow: 0 12px 30px rgba(0,118,255,0.12);
}

/* ------------------------------
   Styled last two checkboxes card
   ------------------------------ */
.checkbox-card { grid-column: 1 / -1; margin-top: 14px; }

.terms-label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #cce0ff;
  background: #f8faff;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  color: #003366;
  font-size: 15px;
  line-height: 1.4;
}

/* hover state */
.terms-label:hover {
  background: #f0f6ff;
  border-color: #007bff;
  box-shadow: 0 10px 26px rgba(0,118,255,0.04);
}

/* checkbox input inside card */
.terms-label input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #007bff;
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 3px;
  transition: all 0.18s ease;
  background: #fff;
}

/* checked visuals for checkbox */
.terms-label input[type="checkbox"]:checked {
  background-color: #007bff;
  border-color: #007bff;
}

.terms-label input[type="checkbox"]:checked::after {
  content: "✓";
  color: #fff;
  font-size: 15px;
  position: absolute;
  left: 4px;
  top: 0px;
}

/* if browser supports :has() this will color entire card when checked */
.checkbox-card .terms-label:has(input:checked) {
  border-color: #007bff;
  background: linear-gradient(180deg, #0076ff 0%, #0062d6 100%);
  color: #fff;
  box-shadow: 0 14px 40px rgba(0,118,255,0.14);
}

/* fallback: when :has not supported, the input itself will still show blue check and label text will remain readable.
   We also toggle .selected on parent label in JS for visual parity (JS already toggles .selected on multi options). */

/* ------------------------------
   Submit button states
   ------------------------------ */
.btn {
  display: block;
  width: 100%;
  padding: 12px 14px;
  margin-top: 18px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  border: none;
  color: #fff;
  background: #98a2b3; /* disabled color */
  cursor: not-allowed;
  transition: background .14s ease, transform .12s ease;
}

/* enabled */
.btn.enabled {
  background: #0076ff;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,118,255,0.12);
}
.btn.enabled:hover { background: #005ec0; transform: translateY(-2px); }

/* responsive tweaks */
@media (max-width: 820px) {
  .form-grid { grid-template-columns: 1fr; gap: 14px; }
  .terms-label { padding: 12px; }
  .multi-options { gap: 10px; }
}