/* ============================================================
   TutorZone · 家長「免費搵導師」表單 v2（2026-10-26）
   設計語言跟後台 admin/css/tz_admin.css：navy #123149、藍 #0b63a5、
   muted #8598ab、邊框 #cfd9e4。
   只改外觀：唔會隱藏、改名或重接任何欄位。
   ============================================================ */

/* ---- 頂部標題帶 + 進度 ---- */
.tzp-head{max-width:660px;margin:24px auto 0;padding:22px 26px 18px;background:#123149;color:#fff;border-radius:14px 14px 0 0}
.tzp-head h1{margin:0 0 6px;font-size:24px;line-height:1.25;font-weight:800;color:#fff}
.tzp-head p{margin:0;font-size:13.5px;color:#9dc0e0}
.tzp-steps{display:flex;gap:6px;list-style:none;margin:16px 0 0;padding:0}
.tzp-steps li{flex:1 1 0;min-width:0;font-size:11.5px;color:#9dc0e0;padding-top:8px;border-top:3px solid #2c4a66;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tzp-steps li.on{color:#fff;border-top-color:#41c07a}
.tzp-steps li b{display:block;font-size:12.5px;font-weight:800;margin-bottom:2px}

/* ---- 舊包裝：CF7 50px padding（手機過窄）+ 白底（桌面第二層卡片）一齊拆 ---- */
.wpcf7,.edubin-form-wrapper,.elementor-widget-edubin-contact-form-7,
.elementor-widget-edubin-contact-form-7 .elementor-widget-container{
  padding:0 !important;background:transparent !important;border:0 !important;box-shadow:none !important;
}
.wpcf7>form{margin-left:auto !important;margin-right:auto !important}

/* ---- 卡片：直接套喺表單本身 ---- */
#Step1Form,#Step2Form,#Step3Form,#Step4Form,#Step5Form{
  box-sizing:border-box;max-width:660px;margin:0 auto 34px;padding:26px 26px 24px;background:#fff;
  border:1px solid #e3e9f0;border-top:0;border-radius:0 0 14px 14px;
  box-shadow:0 10px 30px rgba(18,49,73,.08);
}

/* ---- 欄位：緊密、一致 ---- */
#Step1Form p,#Step2Form p,#Step3Form p,#Step4Form p,#Step5Form p{margin:0 !important}
#Step1Form br,#Step2Form br,#Step3Form br,#Step4Form br,#Step5Form br{display:none}
#Step1Form label,#Step2Form label,#Step3Form label,#Step4Form label,#Step5Form label{display:block;margin:0 0 18px}
#Step1Form h5,#Step2Form h5,#Step3Form h5,#Step4Form h5,#Step5Form h5{
  margin:0 0 8px !important;font-size:13px !important;font-weight:700 !important;color:#41556a !important;
  letter-spacing:.2px;line-height:1.4 !important;
}

/* ---- select / text / textarea ---- */
#Step1Form select,#Step2Form select,#Step3Form select,#Step4Form select,#Step5Form select,
#Step1Form input.wpcf7-text,#Step2Form input.wpcf7-text,#Step3Form input.wpcf7-text,
#Step4Form input.wpcf7-text,#Step5Form input.wpcf7-text,
#Step1Form textarea,#Step2Form textarea,#Step3Form textarea,#Step4Form textarea,#Step5Form textarea{
  box-sizing:border-box;width:100% !important;float:none !important;margin:0 !important;
  height:46px;padding:0 14px;font-size:15px;color:#1c2b3a;background:#fff;
  border:1px solid #cfd9e4;border-radius:9px;box-shadow:none;transition:border-color .15s,box-shadow .15s;
}
#Step1Form select,#Step2Form select,#Step3Form select,#Step4Form select,#Step5Form select{
  -webkit-appearance:none;appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238598ab' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
#Step1Form select:focus,#Step2Form select:focus,#Step3Form select:focus,#Step4Form select:focus,#Step5Form select:focus,
#Step1Form input.wpcf7-text:focus,#Step2Form input.wpcf7-text:focus,#Step3Form input.wpcf7-text:focus,
#Step4Form input.wpcf7-text:focus,#Step5Form input.wpcf7-text:focus{
  outline:0;border-color:#0b63a5;box-shadow:0 0 0 3px rgba(11,99,165,.12)
}

/* ---- 選項：舊按鈕 → 膠囊 chip ---- */
#Step1Form a[id^="show_"],#Step2Form a[id^="show_"],#Step3Form a[id^="show_"],
#Step4Form a[id^="show_"],#Step5Form a[id^="show_"]{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:0 18px;margin:0 9px 9px 0;
  border:1px solid #cfd9e4;border-radius:999px;background:#fff;
  font-size:14px;font-weight:600;color:#2b3f52;line-height:1;text-decoration:none;transition:all .15s;
}
#Step1Form a[id^="show_"]:hover,#Step2Form a[id^="show_"]:hover,#Step3Form a[id^="show_"]:hover,
#Step4Form a[id^="show_"]:hover,#Step5Form a[id^="show_"]:hover{border-color:#0b63a5;color:#0b63a5}
#Step1Form a.checkactived,#Step2Form a.checkactived,#Step3Form a.checkactived,
#Step4Form a.checkactived,#Step5Form a.checkactived{
  background:#0b63a5 !important;border-color:#0b63a5 !important;color:#fff !important;
  box-shadow:0 2px 8px rgba(11,99,165,.28)
}

/* ---- 主要掣 ---- */
#Step1Form input.wpcf7-submit,#Step2Form input.wpcf7-submit,#Step3Form input.wpcf7-submit,
#Step4Form input.wpcf7-submit,#Step5Form input.wpcf7-submit{
  height:52px !important;min-height:0 !important;line-height:52px !important;width:auto !important;
  padding:0 40px !important;border:0 !important;border-radius:10px !important;
  background:#0b63a5 !important;color:#fff !important;
  font-size:15.5px !important;font-weight:800 !important;letter-spacing:.5px;
  cursor:pointer;box-shadow:0 6px 18px rgba(11,99,165,.28);display:inline-block;margin-top:6px;
}
#Step1Form input.wpcf7-submit:hover,#Step2Form input.wpcf7-submit:hover,#Step3Form input.wpcf7-submit:hover,
#Step4Form input.wpcf7-submit:hover,#Step5Form input.wpcf7-submit:hover{
  background:#095283 !important;box-shadow:0 8px 22px rgba(11,99,165,.34)
}

/* ---- 舊「選擇補習項目」小標題 ---- */
.dbl__title-wrapper{max-width:660px;margin:30px auto 8px !important;padding:0 4px}
.dbl__title{font-size:12px !important;font-weight:800;color:#8598ab !important;letter-spacing:2.4px;text-transform:uppercase}

/* ---- 手機 ---- */
@media (max-width:640px){
  .tzp-head{margin:12px 12px 0;padding:18px 16px 15px;border-radius:12px 12px 0 0}
  .tzp-head h1{font-size:20px}
  .tzp-head p{font-size:12.5px}
  .tzp-steps{gap:4px;margin-top:13px}
  .tzp-steps li{font-size:9.5px;padding-top:7px;letter-spacing:0}
  .tzp-steps li b{font-size:11px}
  #Step1Form,#Step2Form,#Step3Form,#Step4Form,#Step5Form{
    margin:0 12px 26px;padding:18px 15px 20px;border-radius:0 0 12px 12px;
  }
  #Step1Form select,#Step2Form select,#Step3Form select,#Step4Form select,#Step5Form select,
  #Step1Form input.wpcf7-text,#Step2Form input.wpcf7-text,#Step3Form input.wpcf7-text,
  #Step4Form input.wpcf7-text,#Step5Form input.wpcf7-text{height:50px;font-size:16px}
  #Step1Form a[id^="show_"],#Step2Form a[id^="show_"],#Step3Form a[id^="show_"],
  #Step4Form a[id^="show_"],#Step5Form a[id^="show_"]{min-height:44px;padding:0 15px;font-size:14px}
  #Step1Form input.wpcf7-submit,#Step2Form input.wpcf7-submit,#Step3Form input.wpcf7-submit,
  #Step4Form input.wpcf7-submit,#Step5Form input.wpcf7-submit{display:block;width:100% !important;margin-top:12px}
  .dbl__title-wrapper{margin:18px 12px 6px !important}
}
