/* ============================================================
   after-submit.css — 「送出之後會發生什麼」三步示意（精簡兩列）
   部署位置：/Content/css/after-submit.css（於 site.css 之後載入）
   版面：第一列「① › ② › ③」，第二列一句說明。
         放在 .apply-wrap 內：窄螢幕在表單正上方；寬螢幕（≥880px，兩欄）只佔表單那一欄，右側欄往上對齊。
         放在窄欄（寬度 ≤300px，例如補助辦法內文）時改為直式三列。
   動畫：只有 after-submit.js 加上 .as-ready 後才有隱藏態；.as-play 時播放一次；只動 transform／opacity；
         prefers-reduced-motion 時完全不動。沒有 JS 時就是靜態的三步。
   ============================================================ */

.as-steps { container: as / inline-size; margin: 0 0 14px; padding: 8px 10px 8px; background: #f3f8fe; border: 1px solid #d6e6f8; border-radius: 10px; }
.apply-wrap > .as-steps { margin: 0; }
@media (min-width: 880px) {
  .apply-wrap > .as-steps { grid-column: 1; }
  .apply-wrap > .as-steps ~ .apply-side { grid-column: 2; grid-row: 1 / span 2; }
}
.as-steps .as-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 0; }
.as-steps .as-step { display: inline-flex; align-items: center; margin: 0; padding: 0; white-space: nowrap; }
.as-steps .as-step + .as-step::before { content: "›"; display: inline-block; width: 14px; margin: 0 1px; text-align: center;
  font-size: 18px; font-weight: 700; line-height: 1; color: #7d9cc8; }
.as-steps .as-n { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 18px; height: 18px; margin-right: 3px;
  border-radius: 50%; background: #0B3D91; color: #fff; font-size: 12px; font-weight: 800; line-height: 1; font-style: normal; }
.as-steps .as-step-3 .as-n { background: #d9a441; color: #24180a; }
.as-steps .as-lb { font-size: 14px; font-weight: 800; line-height: 1.45; color: #1a2333; }
.as-steps .as-note { margin: 3px 0 0; font-size: 14px; font-weight: 500; line-height: 1.5; text-align: center; color: #4a566b; }
.as-steps .as-note b { display: inline-block; font-weight: 800; color: #0B3D91; white-space: nowrap; }

/* 窄欄：直式三列 */
@container as (max-width: 300px) {
  .as-steps .as-list { flex-direction: column; align-items: flex-start; width: max-content; max-width: 100%; margin: 0 auto; gap: 3px; }
  .as-steps .as-step + .as-step::before { display: none; }
}

/* ── 動畫（JS 加 .as-ready 才生效；.as-play 時播放一次，約 1.4 秒） ── */
.as-ready .as-step, .as-ready .as-note { opacity: 0; }
.as-ready.as-play .as-step { animation: as-rise .38s cubic-bezier(.2,.8,.2,1) both; }
.as-ready.as-play .as-step-2 { animation-delay: .35s; }
.as-ready.as-play .as-step-3 { animation-delay: .7s; }
.as-ready.as-play .as-step .as-n { animation: as-pop .38s cubic-bezier(.2,1.5,.4,1) both; }
.as-ready.as-play .as-step-2 .as-n { animation-delay: .35s; }
.as-ready.as-play .as-step-3 .as-n { animation-delay: .7s; }
.as-ready.as-play .as-note { animation: as-rise .45s ease-out 1.05s both; }
@keyframes as-pop { from { transform: scale(.4); } to { transform: none; } }
@keyframes as-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .as-ready .as-step, .as-ready .as-note { opacity: 1; }
  .as-ready.as-play .as-step, .as-ready.as-play .as-step .as-n, .as-ready.as-play .as-note { animation: none !important; }
}