/* ── Appin Career Coach — Frontend Form Styles ── */
:root {
  --acc-orange: #D94F2B;
  --acc-dark:   #1E2D3D;
  --acc-mid:    #5D6D7E;
  --acc-light:  #F5F6FA;
  --acc-green:  #27AE60;
  --acc-red:    #E74C3C;
  --acc-blue:   #2980B9;
  --acc-border: #E0E0E0;
  --acc-white:  #FFFFFF;
}

.acc-wrap {
  max-width: 640px;
  margin: 0 auto;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: var(--acc-dark);
}

/* ── PROGRESS HEADER ── */
.acc-progress-header {
  background: var(--acc-dark);
  border-radius: 12px 12px 0 0;
  padding: 18px 22px 14px;
  margin-bottom: 0;
}
.acc-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.acc-brand strong { color: #fff; font-size: 15px; display: block; line-height: 1.2; }
.acc-brand span   { color: #888; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; display: block; }
.acc-logo-badge {
  width: 38px; height: 38px;
  background: var(--acc-orange);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; color: #fff;
  flex-shrink: 0;
}
.acc-logo-badge.large { width: 48px; height: 48px; font-size: 24px; border-radius: 10px; }
.acc-progress-bar-outer {
  background: rgba(255,255,255,.1);
  border-radius: 4px; height: 5px; overflow: hidden;
}
.acc-progress-bar-inner {
  height: 100%; background: var(--acc-orange);
  border-radius: 4px; transition: width .4s ease;
}
.acc-step-label { color: #888; font-size: 11px; margin-top: 8px; text-transform: uppercase; letter-spacing:.06em; }

/* ── STEP CARD ── */
.acc-step {
  background: var(--acc-white);
  border: 1px solid var(--acc-border);
  border-top: none;
  padding: 28px 26px;
  border-radius: 0 0 12px 12px;
}
.acc-step h2 { font-size: 18px; margin: 0 0 6px; color: var(--acc-dark); }
.acc-sub { color: var(--acc-mid); font-size: 13px; margin: 0 0 20px; }

/* ── FIELDS ── */
.acc-field { margin-bottom: 20px; }
.acc-field label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--acc-mid); margin-bottom: 8px; }
.acc-field input[type="text"],
.acc-field input[type="email"],
.acc-field input[type="tel"],
.acc-field select {
  width: 100%; padding: 10px 14px;
  border: 1.5px solid var(--acc-border);
  border-radius: 7px; font-size: 14px;
  font-family: inherit; color: var(--acc-dark);
  background: var(--acc-light);
  box-sizing: border-box;
  transition: border-color .2s;
  appearance: auto;
}
.acc-field input:focus,
.acc-field select:focus { border-color: var(--acc-orange); outline: none; background: #fff; }
.acc-hint { font-size: 12px; color: var(--acc-mid); display: block; margin-top: 4px; }
.req { color: var(--acc-orange); }

/* ── RADIO GRID ── */
.acc-radio-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.acc-radio-card {
  border: 1.5px solid var(--acc-border);
  border-radius: 7px; padding: 10px 12px;
  cursor: pointer; font-size: 13px;
  display: flex; align-items: center; gap: 8px;
  transition: all .2s;
}
.acc-radio-card:hover { border-color: var(--acc-orange); background: #FFF8F3; }
.acc-radio-card input[type="radio"]:checked + span { color: var(--acc-orange); font-weight: 700; }
.acc-radio-card input { accent-color: var(--acc-orange); flex-shrink:0; }

/* ── RADIO STACK ── */
.acc-radio-stack { display: flex; flex-direction: column; gap: 8px; }
.acc-radio-row {
  border: 1.5px solid var(--acc-border);
  border-radius: 7px; padding: 10px 14px;
  cursor: pointer; font-size: 13px;
  display: flex; align-items: center; gap: 10px;
  transition: all .2s;
}
.acc-radio-row:hover { border-color: var(--acc-orange); background: #FFF8F3; }
.acc-radio-row input { accent-color: var(--acc-orange); flex-shrink:0; }
.acc-radio-row:has(input:checked) { border-color: var(--acc-orange); background: #FFF8F3; }

/* ── TAG GROUP ── */
.acc-tag-group { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-tag {
  border: 1.5px solid var(--acc-border);
  border-radius: 20px; padding: 6px 14px;
  cursor: pointer; font-size: 13px;
  display: flex; align-items: center; gap: 6px;
  transition: all .2s;
}
.acc-tag:hover { border-color: var(--acc-orange); }
.acc-tag input { display: none; }
.acc-tag:has(input:checked) { border-color: var(--acc-orange); background: var(--acc-orange); color: #fff; }

/* ── CHECKBOX GRID ── */
.acc-checkbox-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.acc-checkbox-card {
  border: 1.5px solid var(--acc-border);
  border-radius: 7px; padding: 9px 12px;
  cursor: pointer; font-size: 13px;
  display: flex; align-items: center; gap: 8px;
  transition: all .2s;
}
.acc-checkbox-card:hover { border-color: var(--acc-orange); }
.acc-checkbox-card input { accent-color: var(--acc-orange); flex-shrink:0; }
.acc-checkbox-card:has(input:checked) { border-color: var(--acc-orange); background: #FFF8F3; }

/* ── BUTTONS ── */
.acc-btn-row { display: flex; gap: 10px; margin-top: 22px; }
.acc-btn-next, .acc-btn-submit {
  flex: 1; padding: 13px 20px;
  background: var(--acc-orange); color: #fff;
  border: none; border-radius: 8px;
  font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  letter-spacing: .03em; transition: background .2s;
}
.acc-btn-next:hover, .acc-btn-submit:hover { background: #c0401e; }
.acc-btn-back {
  padding: 13px 18px;
  background: transparent; color: var(--acc-mid);
  border: 1.5px solid var(--acc-border); border-radius: 8px;
  font-size: 14px; cursor: pointer; font-family: inherit;
}
.acc-btn-restart {
  margin-top: 16px; padding: 10px 20px;
  background: transparent; color: var(--acc-mid);
  border: 1.5px solid var(--acc-border); border-radius: 7px;
  font-size: 13px; cursor: pointer; font-family: inherit;
}

/* ── FOMO STRIP ── */
.acc-fomo-strip {
  background: #FFF3F0; border-left: 4px solid var(--acc-orange);
  padding: 12px 16px; border-radius: 6px;
  font-size: 13px; color: var(--acc-dark); margin: 16px 0 20px;
  line-height: 1.6;
}

/* ── CERT PUNCH ── */
.acc-cert-punch {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; margin: 22px 0 16px;
  background: var(--acc-light); border-radius: 10px; padding: 18px;
}
.acc-cert-stat { text-align: center; }
.acc-cert-num { font-size: 32px; font-weight: 900; line-height: 1; }
.acc-cert-num.acc-green { color: var(--acc-green); }
.acc-cert-num.acc-red   { color: var(--acc-red); }
.acc-cert-label { font-size: 12px; color: var(--acc-mid); margin-top: 4px; line-height: 1.4; }
.acc-cert-vs { font-size: 16px; font-weight: 900; color: var(--acc-mid); }

/* ── COURSE INFO BOX ── */
.acc-course-info-box {
  background: var(--acc-light); border-left: 4px solid var(--acc-orange);
  border-radius: 6px; padding: 14px 16px; margin-top: 12px; font-size: 13px;
}

/* ── FINAL NOTE ── */
.acc-final-note {
  background: #F0F8FF; border-left: 4px solid var(--acc-blue);
  padding: 12px 16px; border-radius: 6px;
  font-size: 13px; margin: 16px 0; line-height: 1.6; color: var(--acc-dark);
}

/* ── LOADING ── */
.acc-loading-screen {
  background: #fff; border: 1px solid var(--acc-border);
  border-radius: 12px; padding: 48px 28px; text-align: center;
}
.acc-spinner {
  width: 48px; height: 48px; border-radius: 50%;
  border: 3px solid var(--acc-light); border-top: 3px solid var(--acc-orange);
  margin: 0 auto 24px; animation: acc-spin 1s linear infinite;
}
@keyframes acc-spin { to { transform: rotate(360deg); } }
.acc-loading-title { font-size: 15px; font-weight: 700; color: var(--acc-orange); margin: 0 0 6px; }
.acc-loading-msg   { color: var(--acc-mid); font-size: 14px; margin: 0 0 20px; }
.acc-loading-steps { text-align: left; max-width: 300px; margin: 0 auto; }
.acc-ls { font-size: 13px; color: #ccc; padding: 4px 0; transition: color .4s; }
.acc-ls.active { color: var(--acc-dark); }
.acc-ls.done   { color: var(--acc-green); }
.acc-ls.done::before { content: '✓ '; }

/* ── REPORT OUTPUT ── */
.acc-report-output {
  background: #fff; border: 1px solid var(--acc-border);
  border-radius: 12px; overflow: hidden;
}
.acc-report-header {
  background: var(--acc-dark); padding: 22px 24px;
  display: flex; align-items: center; gap: 14px;
}
.acc-report-header strong { color: #fff; font-size: 15px; display: block; }
.acc-report-header span   { color: #888; font-size: 13px; display: block; margin-top: 3px; }
.acc-report-delivery-notice {
  background: #F0FFF5; border-bottom: 1px solid #C3E6CB;
  padding: 12px 24px; font-size: 13px; color: #155724;
}
.acc-report-content {
  padding: 24px; font-size: 14px; line-height: 1.8;
  color: var(--acc-dark); max-height: 600px; overflow-y: auto;
}
.acc-report-content h2, .acc-report-content h3 {
  color: var(--acc-orange); border-bottom: 1px solid #f0e0da;
  padding-bottom: 4px; margin-top: 22px;
}
.acc-report-cta {
  background: var(--acc-light); border-top: 1px solid var(--acc-border);
  padding: 20px 24px; text-align: center;
}
.acc-report-cta p { margin: 0 0 12px; font-size: 15px; }
.acc-btn-cta {
  background: var(--acc-orange); color: #fff;
  padding: 12px 26px; border-radius: 8px;
  text-decoration: none; font-weight: 700; font-size: 14px;
  display: inline-block; transition: background .2s;
}
.acc-btn-cta:hover { background: #c0401e; color: #fff; }

/* ── ERROR ── */
.acc-error-box {
  background: #fff5f5; border: 1.5px solid var(--acc-red);
  border-radius: 10px; padding: 24px; text-align: center; color: var(--acc-red);
}

/* ── RESPONSIVE ── */
@media (max-width: 480px) {
  .acc-radio-grid    { grid-template-columns: 1fr; }
  .acc-checkbox-grid { grid-template-columns: 1fr; }
  .acc-cert-punch    { flex-direction: column; gap: 12px; }
  .acc-step { padding: 20px 16px; }
}