/* ═══════════════════════════════════════════════════════════════════
   Ladder Lessons · ll-funnel.css
   ll-funnel.js 產生嘅表單樣式。跟 06_LADDER_LESSONS_STYLE_GUIDE：
   3px ink 框 · --r-lg 圓角 · 硬陰影 · 珊瑚底一定配墨字。
   ⚠️ 呢個檔會喺 landing page、portal、Ladder Phonics 三處用，
      所以唔可以靠任何一個站嘅 CSS 變數 —— 自己帶 fallback。
   ═══════════════════════════════════════════════════════════════════ */
.llf{
  --f-coral:#FF6B6B; --f-coral2:#FF8E53; --f-ink:#2C3E50; --f-soft:#5A6C7D;
  --f-cream:#FFF9F0; --f-cream2:#F6EDE0; --f-yellow:#FFE66D;
  --f-ok:#15803D; --f-err:#B93A2B;
  --f-head:'Fredoka','Noto Sans HK','PingFang HK','Microsoft JhengHei',sans-serif;
  --f-body:'Nunito','Noto Sans HK','PingFang HK','Microsoft JhengHei',sans-serif;
  display:block;font-family:var(--f-body);color:var(--f-ink);
  border:3px solid var(--f-ink);border-radius:24px;background:#fff;
  box-shadow:0 4px 0 rgba(44,62,80,.14);overflow:hidden;position:relative}
.llf::before{content:'';position:absolute;top:0;left:0;right:0;height:8px;
  background:linear-gradient(90deg,var(--f-coral),var(--f-coral2))}
.llf__body{padding:24px 22px 20px}
.llf--compact .llf__body{padding:16px 16px 14px}

.llf__t{display:block;font-family:var(--f-head);font-weight:700;
  font-size:clamp(17px,2.2vw,22px);line-height:1.3;margin-bottom:6px}
.llf__b{margin:0 0 14px;font-size:14.5px;font-weight:600;
  color:var(--f-soft);line-height:1.6}
.llf--compact .llf__b{margin-bottom:10px;font-size:13.5px}

.llf__form{display:flex;gap:9px;flex-wrap:wrap}
.llf__in{flex:1 1 220px;min-width:0;min-height:48px;
  font-family:var(--f-body);font-size:16px;font-weight:600;  /* ⚠️ 16px 起 —— 細過就會令 iOS Safari 自動放大成頁 */
  padding:11px 15px;border:2.5px solid var(--f-ink);border-radius:9999px;
  background:var(--f-cream);color:var(--f-ink);outline:none}
.llf__in::placeholder{color:var(--f-soft);font-weight:600}
.llf__in:focus{background:#fff;box-shadow:0 0 0 4px rgba(255,107,107,.22)}
.llf__btn{flex:0 0 auto;min-height:48px;cursor:pointer;
  font-family:var(--f-head);font-weight:700;font-size:16px;letter-spacing:.01em;
  padding:11px 26px;border:3px solid var(--f-ink);border-radius:9999px;
  /* 珊瑚底 → 墨字。白字落珊瑚得 2.78:1，過唔到 AA。*/
  background:linear-gradient(135deg,var(--f-coral) 0%,var(--f-coral2) 100%);
  color:var(--f-ink);box-shadow:0 4px 0 rgba(44,62,80,.14);
  transition:transform .12s,box-shadow .12s}
.llf__btn:hover:not(:disabled){transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(44,62,80,.14)}
.llf__btn:active:not(:disabled){transform:translateY(4px);box-shadow:none}
.llf__btn:disabled{background:#E5E7EB;color:var(--f-soft);
  border-color:#9CA3AF;box-shadow:none;cursor:default}
.llf__btn:focus-visible,.llf__in:focus-visible{outline:none;
  box-shadow:0 0 0 4px var(--f-yellow),0 4px 0 rgba(44,62,80,.14)}

.llf__note{margin:11px 0 0;font-size:12.5px;font-weight:600;
  color:var(--f-soft);line-height:1.55}
.llf__note.is-ok{color:var(--f-ok)}
.llf__note.is-err{color:var(--f-err)}

/* 交完 email —— 收起個表單，剩返句訊息 */
.llf.is-done .llf__form{display:none}
.llf.is-done{border-color:var(--f-ok)}
.llf.is-done::before{background:var(--f-ok)}

@media (max-width:520px){
  /* ⚠️⚠️ flex-direction 一轉做 column，flex-basis 就係量緊「高度」唔係闊度。
     .llf__in 寫住 flex:1 1 220px，喺 row 之下係「至少 220px 闊」，
     一轉 column 就變成「220px 高」—— 個輸入格變咗一大嚿。
     （Shari 2026-08-04 手機截圖影到）
     所以轉 column 之後一定要重設 flex。*/
  .llf__form{flex-direction:column}
  .llf__in{flex:0 0 auto;width:100%;min-height:52px}
  .llf__btn{flex:0 0 auto;width:100%;min-height:52px}
}
@media (prefers-reduced-motion:reduce){.llf__btn{transition:none}}