/* ============================================================
   form.css — 聯絡表單區（s11 標題 + 底色 + 表單 + 送出鈕 + CTA + loader）
   ============================================================ */

:root {
  --cta-bar-h: 100px;
}

html {
  scroll-behavior: smooth;
}

/* 隱藏 reCAPTCHA 徽章（沿用原版） */
.grecaptcha-badge {
  display: none;
}

/* ---- 整個聯絡區用「一張連續背景」，標題與表單共用，消除接縫 ---- */
.contact {
  background: #0d2f63 url("https://d10acm3j8e4ewy.cloudfront.net/EDM/hisnyeh.news/v20260602/images/contact-form/contact-from-bg.avif") center top / cover no-repeat;
}

/* s11 標題（透明文字層，疊在連續背景上）*/
.contact__title {
  display: block;
  width: 100%;
  height: auto;
}

/* 表單區本身不再有自己的背景，沿用上方 .contact 的連續背景 */
.contact__form-area {
  background: none;
  padding: 2% 7% 14%;
}

.contact-form-block {
  margin: 0 auto;
  max-width: 560px;
}

/* ---- 欄位 ---- */
.contact-form-v1 {
  font-size: 16px;
}

.contact-from-lable-style-v1,
.contact-form-lable {
  display: block;
  color: var(--text-light);
  font-size: 17px;
  font-weight: 500;
  margin: 22px 0 8px;
  letter-spacing: 0.5px;
}

.contact-form-text-field-style-v1 {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font-size: 16px;
  font-family: inherit;
  color: #16233d;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  outline: none;
}

select.contact-form-text-field-style-v1 {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #16233d 50%),
    linear-gradient(135deg, #16233d 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.contact-form-text-field-style-v1:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(198, 172, 142, 0.4);
}

/* ---- checkbox（改用原生、可靠）---- */
.contact-form-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 18px 6px 0;
  color: var(--text-light);
  font-size: 16px;
  cursor: pointer;
}

.contact-form-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--gold);
  margin: 0;
  cursor: pointer;
}

.contact-form-checkbox.privacy-checkbox {
  display: flex;
  margin-top: 14px;
}

/* 隱私權說明：平鋪直敘的純文字，不加底色框 */
.contact-form-privacy-rich-text-block-style-v1 {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  line-height: 1.75;
  margin-top: 8px;
}
.contact-form-privacy-rich-text-block-style-v1 .heading,
.contact-form-privacy-rich-text-block-style-v1 .heading-2 {
  font-size: 13px;
  font-weight: 400;
  margin: 4px 0;
}
.contact-form-privacy-rich-text-block-style-v1 a {
  color: var(--gold);
  text-decoration: underline;
}

/* ---- 驗證錯誤訊息（沿用原版樣式） ---- */
form#wf-form-Contact-Form label.error {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  background-color: var(--error-red);
  border-radius: 2px;
  padding: 4px 10px;
  margin: 6px 0;
}

/* ---- 送出鈕（submit-btn-1.avif 當背景）---- */
.contact-from-submit-button {
  display: block;
  width: 58%;
  max-width: 200px;
  aspect-ratio: 712 / 194;
  margin: 28px auto 0;
  border: 0;
  background: url("https://d10acm3j8e4ewy.cloudfront.net/EDM/hisnyeh.news/v20260602/images/submit/submit-btn-1.avif") center / contain no-repeat;
  font-size: 0;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.contact-from-submit-button:hover {
  filter: brightness(1.05);
}
.contact-from-submit-button:active {
  transform: scale(0.98);
}
.contact-from-submit-button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---- 送出成功 / 失敗訊息 ---- */
.w-form-done,
.w-form-fail {
  display: none;
}
.contact-form-success-img,
.contact-form-error-img {
  width: 100%;
  height: auto;
  margin-top: 16px;
}

/* ============================================================
   底部固定 4 顆 CTA
   ============================================================ */
.cta-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--col-width);
  min-height: var(--cta-bar-h);
  display: flex;
  align-items: stretch;
  /* 毛玻璃藍底，提亮、加飽和以引導點擊 */
  background: linear-gradient(180deg, rgba(31, 84, 162, 0.96), rgba(15, 47, 104, 0.98));
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border-top: 1px solid rgba(150, 190, 245, 0.35);
  z-index: 50;
  box-shadow: 0 -3px 18px rgba(0, 0, 0, 0.45);
}

/* 扁平按鈕：等寬填滿、以細分隔線區隔（取代原本的卡片漸層）*/
.cta-bar__item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  transition: background 0.2s ease;
}
.cta-bar__item + .cta-bar__item {
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}
.cta-bar__item:hover {
  background: rgba(150, 190, 245, 0.22);
}

.cta-bar__item img {
  width: auto;
  height: clamp(60px, 17vw, 80px); /* icon+文字（SVG 已拆掉卡片底）*/
}

/* ============================================================
   全頁載入遮罩（送出時顯示）
   ============================================================ */
#loader_widget {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(6, 20, 46, 0.72);
  color: #fff;
  font-size: 16px;
  letter-spacing: 2px;
  z-index: 9999;
}
#loader_widget.is-active {
  display: flex;
}
#loader_widget::before {
  content: "";
  width: 44px;
  height: 44px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: loader-spin 0.8s linear infinite;
}
#loader_widget::after {
  content: attr(data-text);
}
@keyframes loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   桌機微調：略增 skymap 高度、CTA 維持置中固定列
   ============================================================ */
@media (min-width: 768px) {
  :root {
    --skymap-h: 60vh;
  }
}

@media (max-width: 767px) {
  :root {
    --skymap-h: 72vh;
  }
}