/* Background for whole page */
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: #f3f4f6;
}

/* Layout */
.layout {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

.form-container {
  background: #ffffff;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
  max-width: 1100px;
  width: 100%;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

/* Titles */
h1 {
  margin-top: 0;
  font-size: 26px;
  margin-bottom: 10px;
}
.form-subtitle {
  margin-bottom: 30px;
}

/* Section box */
.section-box {
  background: #f6f9fc;
  padding: 25px;
  border-radius: 10px;
  margin-bottom: 30px;
}

.section-header {
  background: #dcecff;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 15px;
  font-weight: 600;
}

.sub-title {
  margin-top: 20px;
  margin-bottom: 10px;
}

/* Form Rows */
.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.form-field,
.form-field-full {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.form-field-full {
  flex: 100%;
}

label {
  font-weight: 600;
  margin-bottom: 5px;
}

input,
select {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
}

/* Radio helper rows in Education section */
.radio-inline-group {
  display: flex;
  gap: 20px;
  margin-top: 4px;
}

.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Radio rows (legacy helpers) */
.radio-row {
  display: flex;
  align-items: center;
  gap: 30px;
  margin: 10px 0 20px 0;
}

.radio-row label {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Choice grid */
.choice-grid {
  display: flex;
  gap: 30px;
  margin-top: 10px;
}

.choice-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

hr {
  margin: 20px 0;
  border: none;
  border-bottom: 1px solid #ccc;
}

/* OSSD / Camp blocks */
#ossdBlock,
#campBlock .form-row {
  margin-top: 10px;
}

#ossdBlock select,
#campBlock select,
#ossdBlock input,
#campBlock input {
  width: 100%;
}

/* Main panel (kept for compatibility) */
.app-form-panel {
  max-width: 1100px;
  margin: 40px auto;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
  padding: 32px 40px 40px;
}

/* Center header */
.app-form-header {
  text-align: center;
  margin-bottom: 24px;
}

.app-form-header h1 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
}

.app-form-header p {
  margin: 0;
  font-size: 14px;
  color: #555;
}

/* Submit button row at bottom, centered */
.form-submit-row {
  margin-top: 32px;
  text-align: center;
}

/* Primary button (same style as other pages) */
.primary-btn {
  display: inline-block;
  padding: 10px 28px;
  border-radius: 999px;
  border: none;
  background: #004aad;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.primary-btn:hover {
  filter: brightness(1.05);
}

/* Top EMC banner */
.emc-header-banner {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}

.emc-header-banner img {
  width: 100%;
  max-width: 1100px;
  display: block;
  margin: 0 auto;
}

/* Additional Services section */
.service-row {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.service-row label:first-child {
  width: 250px;
  font-weight: 600;
}

.service-options label {
  margin-right: 25px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.service-divider {
  border: none;
  border-bottom: 1px solid #ddd;
  margin: 20px 0;
}

/* Simple error highlight for required fields (optional) */
.input-error {
  border-color: #dc2626 !important;
  background-color: #fef2f2;
}

.btn-primary { background: #004aad; }
.btn-primary:hover { background: #003a8d; }

.btn-secondary { background: #1e75c8; }
.btn-secondary:hover { background: #155ea3; }

.btn-green { background: #2e9e47; }
.btn-green:hover { background: #227a37; }

.btn-purple { background: #7e44e3; }
.btn-purple:hover { background: #622bb8; }

.btn-brown { background: #422604; }
.btn-brown:hover { background: #361e02; }

.btn-dark {
    background: #333;
}
.btn-dark:hover {
    background: #222;
}

.btn-yellow { background: #d7d717; }
.btn-yellow:hover { background: #cece04; }

.formErrorBox {
  color:#d90000;
  font-style: italic;
  text-align:center;
  margin-top:10px;
  font-weight:300;
  display:none;
}