:root {
  --form-teal: #008080;
  --form-teal-dark: #006666;
  --form-border: #d9e2e7;
  --form-bg: #f7fafb;
  --form-text: #1e293b;
}

.form-page .content,
.job-apply-page .content,
.become-dealer-page .content,
.register-product-page .content { padding: 2rem 4vw 4rem; }

.form-shell {
  width: min(900px, 100%);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--form-border);
  border-radius: 14px;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
}

.form-shell h1 { color: #000; text-align: center; margin-bottom: .55rem; }
.form-shell > .form-intro { text-align: center; color: #475569; line-height: 1.65; margin-bottom: 1.5rem; }
.form-notice { background: #eef8f8; border-left: 4px solid var(--form-teal); padding: .9rem 1rem; margin: 1rem 0 1.5rem; line-height: 1.55; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem 1.25rem; }
.form-field { display:flex; flex-direction:column; gap:.4rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 700; color: var(--form-text); }
.form-field input,
.form-field select,
.form-field textarea {
  width:100%; padding:.75rem .85rem; border:1px solid #cbd5e1; border-radius:8px;
  font: inherit; color:var(--form-text); background:#fff; outline:none;
}
.form-field textarea { min-height: 130px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color:var(--form-teal); box-shadow:0 0 0 3px rgba(0,128,128,.12); }
.form-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.35rem; align-items:center; }
.primary-btn,
.secondary-btn,
.form-actions button,
.form-actions a {
  display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:.7rem 1.15rem; border-radius:8px; border:1px solid var(--form-teal);
  font-weight:700; text-decoration:none; cursor:pointer; transition:transform .15s ease, background .15s ease;
}
.primary-btn,
.form-actions button { background:var(--form-teal); color:#fff; }
.secondary-btn,
.form-actions a { background:#fff; color:var(--form-teal); }
.primary-btn:hover,.form-actions button:hover,.secondary-btn:hover,.form-actions a:hover { transform:translateY(-1px); background:var(--form-teal-dark); color:#fff; }
.form-status { min-height:1.3em; margin-top:1rem; font-weight:600; }
.form-status.success { color:#166534; }
.form-status.error { color:#b91c1c; }
.review-link { color:var(--form-teal); font-weight:700; text-decoration:underline; }

.jd-section { margin-bottom:1.5rem; padding-bottom:1.5rem; border-bottom:1px solid var(--form-border); }
.jd-section h2 { color:#555; margin-bottom:.75rem; }
.jd-frame { width:100%; height:520px; border:1px solid var(--form-border); border-radius:10px; background:#f8fafc; }
.job-apply-title { margin-bottom:.8rem; }

@media (max-width: 700px) {
  .form-page .content,
  .job-apply-page .content,
  .become-dealer-page .content,
  .register-product-page .content { padding: 1.25rem 1rem 2.5rem; }
  .form-grid { grid-template-columns:1fr; }
  .form-field.full { grid-column:auto; }
  .jd-frame { height:430px; }
}


/* Responsive refinements for newly added form pages. */
@media (max-width: 1024px) {
  .form-page .content, .job-apply-page .content, .become-dealer-page .content, .register-product-page .content { padding: 1.5rem 2.5vw 3rem; }
  .form-shell { width:min(100%, 820px); }
  .jd-frame { height:500px; }
}
@media (max-width: 700px) {
  .form-shell { border-radius:10px; padding:1rem; }
  .form-shell h1 { font-size:clamp(1.35rem,6vw,1.8rem); }
  .form-actions { align-items:stretch; }
  .form-actions .primary-btn, .form-actions .secondary-btn, .form-actions button, .form-actions a { width:100%; }
  .jd-frame { height:430px; }
}
@media (max-width: 480px) {
  .form-page .content, .job-apply-page .content, .become-dealer-page .content, .register-product-page .content { padding:1rem .75rem 2rem; }
  .form-shell { padding:.85rem; }
  .form-notice { font-size:.9rem; }
  .jd-frame { height:360px; }
}