/* ========================================
   Gosmooth Contact Page CSS
   Page: 支援及查詢
   Scope: body.contact-page
   ======================================== */

/* --- CSS Variables (scoped) --- */
body.contact-page {
  --contact-yellow: #FFC127;
  --contact-gold: #DB7F21;
  --contact-deep: #1f1f1f;
  --contact-body: #2A2A2A;
  --contact-bg-gray: #f5f5f5;
  --contact-blue-glass: rgba(19, 36, 62, 0.82);
  --contact-white: #ffffff;
  --contact-section-padding: 64px 0;
  --contact-max-width: 1180px;
  --contact-media-height: clamp(360px, 28vw, 430px);
}

/* --- General Section (保留旧区块兜底) --- */
body.contact-page .contact-section {
  padding: var(--contact-section-padding);
}

body.contact-page .contact-section__inner {
  max-width: var(--contact-max-width);
  margin: 0 auto;
  padding: 0 48px;
}

body.contact-page .contact-section__title {
  font-family: var(--font-serif, "Noto Serif TC", serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--contact-deep);
  margin: 0 0 4px 0;
  line-height: 1.35;
}

body.contact-page .contact-section__subtitle {
  font-family: var(--font-sans, "Noto Sans TC", sans-serif);
  font-size: 17px;
  font-weight: 500;
  color: #54595F;
  margin: 0 0 24px 0;
}

body.contact-page .contact-section__text {
  font-family: var(--font-sans, "Noto Sans TC", sans-serif);
  font-size: 16px;
  line-height: 26px;
  color: var(--contact-body);
  letter-spacing: 0.3px;
  text-align: justify;
}

/* ====================================
    1. Hero (legacy — no longer in HTML, preserved for reference)
    ==================================== */
/*
body.contact-page .contact-hero { ... }
*/

/* ====================================
    2. Anchor Nav (頁內快速錨點導航)
    ==================================== */
body.contact-page .contact-anchor-nav {
  background: var(--contact-white);
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 90;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

body.contact-page .contact-anchor-nav__inner {
  max-width: var(--contact-max-width);
  margin: 0 auto;
  padding: 16px 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

body.contact-page .contact-anchor-nav__inner::-webkit-scrollbar {
  display: none;
}

body.contact-page .contact-anchor-nav__link {
  font-family: var(--font-sans, "Noto Sans TC", sans-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--contact-body);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 4px;
  transition: color 0.25s, background 0.25s;
}

body.contact-page .contact-anchor-nav__link:hover,
body.contact-page .contact-anchor-nav__link:focus-visible {
  color: var(--contact-yellow);
  background: rgba(255, 193, 39, 0.08);
}

body.contact-page .contact-anchor-nav__sep {
  color: #ccc;
  font-size: 14px;
  user-select: none;
  flex-shrink: 0;
}

/* ====================================
    3. Full-Bleed Media (V05.gif 全寬)
    ==================================== */
body.contact-page .contact-full-bleed-media {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  overflow: hidden;
}

body.contact-page .contact-full-bleed-media img {
  display: block;
  width: 100%;
  height: auto;
}

/* ====================================
    3b. Contact Title Line (inline 渐变标题)
    ==================================== */
.contact-title-line {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: nowrap;
  margin: 0 0 24px;
}

.contact-title-main {
  font-size: 22px !important;
  line-height: 1.25;
  font-family: var(--font-serif, "Noto Serif TC", serif);
  font-weight: 700;
  background: linear-gradient(180deg, #FFC127 0%, #DB7F21 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contact-title-sub {
  font-size: 17px !important;
  line-height: 1.35;
  color: #54595F !important;
  font-family: var(--font-sans, "Noto Sans TC", sans-serif);
  font-weight: 550;
}

.contact-title-line {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: nowrap;
}

@media (max-width: 767px) {
  .contact-title-main {
    font-size: 22px !important;
  }

  .contact-title-sub {
    font-size: 16px !important;
  }

  .contact-title-line {
    flex-wrap: wrap;
    gap: 6px 12px;
  }
}

/* ====================================
    4. Intro Section
    ==================================== */
body.contact-page .contact-intro {
  padding: 52px 0 48px;
}

body.contact-page .contact-intro p {
  color: #2A2A2A;
  font-family: "Noto Sans TC", sans-serif;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 2;
  margin: 0;
}

/* ====================================
    4b. Support Layout (左文字卡片 + 右圖片)
    ==================================== */
body.contact-page .contact-support-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: stretch;
  padding: 0 0 38px;
}

body.contact-page .contact-support-layout__text {
  display: flex;
  flex-direction: column;
}

body.contact-page .contact-support__cards {
  flex: 1;
}

body.contact-page .contact-support-visual {
  height: 100%;
  align-self: stretch;
}

body.contact-page .contact-support-visual img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  display: block;
  border: 1px solid #E8B20A;
  border-radius: 6px;
  box-shadow: -12px 13px 10px rgba(0, 0, 0, 0.5);
}

@media (max-width: 767px) {
  body.contact-page .contact-support-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  body.contact-page .contact-support-visual,
  body.contact-page .contact-support-visual img {
    height: auto;
    min-height: 0;
  }
}

/* ====================================
    5. Support Cards (在 support layout 内使用)
    ==================================== */
body.contact-page .contact-support__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

body.contact-page .contact-support-card {
  background: var(--contact-white);
  border-radius: 8px;
  padding: 36px 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.3s, box-shadow 0.3s;
  border: 1px solid #eee;
}

body.contact-page .contact-support-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  border-color: var(--contact-yellow);
}

body.contact-page .contact-support-card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: var(--contact-gold);
}

body.contact-page .contact-support-card__icon svg {
  width: 100%;
  height: 100%;
}

body.contact-page .contact-support-card__title {
  font-family: var(--font-serif, "Noto Serif TC", serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--contact-deep);
  margin: 0 0 12px 0;
}

body.contact-page .contact-support-card__text {
  font-family: var(--font-sans, "Noto Sans TC", sans-serif);
  font-size: 15px;
  line-height: 24px;
  color: #555;
  margin: 0;
}

/* ====================================
    6. Quote Layout (左圖片 + 右文字)
    ==================================== */
body.contact-page .contact-quote-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  padding: 30px 0;
}

body.contact-page .contact-quote-visual img {
  width: 100%;
  height: var(--contact-media-height);
  object-fit: cover;
  display: block;
  border: 2px solid #E8B20A !important;
  border-radius: 6px;
  box-shadow: -12px 13px 20px rgba(0, 0, 0, 0.5) !important;
}

body.contact-page .contact-quote-layout__text {
  color: #2A2A2A;
}

body.contact-page .contact-quote-layout__text p {
  color: #2A2A2A;
  font-family: "Noto Sans TC", sans-serif;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 2;
  margin: 0;
}

@media (max-width: 767px) {
  body.contact-page .contact-quote-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  body.contact-page .contact-quote-visual img {
    height: auto;
  }
}

/* ====================================
    6b. Quick Quote Info (图标 + 时间)
    ==================================== */
body.contact-page .contact-quote-info {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

body.contact-page .contact-quote-info-item {
  display: grid;
  grid-template-columns: 26px 1fr;
  column-gap: 16px;
  align-items: flex-start;
}

body.contact-page .contact-quote-icon {
  width: 22px;
  height: 22px;
  margin-top: 3px;
  display: block;
  background-image: url("../../images/icon/iconR2.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex: 0 0 auto;
}

body.contact-page .contact-quote-info-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  color: #2A2A2A;
  font-size: 16px;
  line-height: 1.6;
}

body.contact-page .contact-quote-info-head strong {
  font-weight: 700;
  color: #2A2A2A;
}

body.contact-page .contact-quote-info-head span {
  font-weight: 700;
  color: #2A2A2A;
}

body.contact-page .contact-quote-info-time {
  margin-top: 4px;
  color: #2A2A2A;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 700;
  letter-spacing: 0.02em;
}

@media (max-width: 767px) {
  body.contact-page .contact-quote-info {
    margin-top: 22px;
    gap: 22px;
  }

  body.contact-page .contact-quote-info-item {
    grid-template-columns: 22px 1fr;
    column-gap: 12px;
  }

  body.contact-page .contact-quote-icon {
    width: 19px;
    height: 19px;
    margin-top: 4px;
  }

  body.contact-page .contact-quote-info-head {
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 16px;
  }

  body.contact-page .contact-quote-info-time {
    font-size: 16px;
    line-height: 1.7;
  }
}

/* ====================================
     7. Location List (左地圖 + 右資訊)
     ==================================== */
body.contact-page .contact-location-list {
  padding: 28px 0;
}

body.contact-page .contact-location-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-bottom: 56px;
}

body.contact-page .contact-location-row:last-child {
  margin-bottom: 0;
}

/* ─── 地圖外層容器：淺灰白底 + 黃色邊框 + 陰影 + hover 上浮 ─── */
.contact-location-map,
#gosmooth-map01,
#gosmooth-map02,
#gosmooth-map03,
#gosmooth-map04 {
  position: relative;
  overflow: hidden;
  background: #f5f5f5;
  padding: 14px;
  border: 3px solid #E8B20A;
  border-radius: 6px;
  box-shadow:
    -12px 13px 20px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 左側黃色品牌裝飾條 */
.contact-location-map::before,
#gosmooth-map01::before,
#gosmooth-map02::before,
#gosmooth-map03::before,
#gosmooth-map04::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  width: 6px;
  height: 70%;
  background: #E8B20A;
  border-radius: 0 4px 4px 0;
  z-index: 2;
}

/* 地圖本體：亮白、清晰、微小層次陰影 */
.contact-location-map iframe,
#gosmooth-map01 iframe,
#gosmooth-map02 iframe,
#gosmooth-map03 iframe,
#gosmooth-map04 iframe {
  display: block;
  width: 100%;
  height: 316px;
  border: 0 !important;
  border-radius: 4px;
  filter: brightness(1.04) contrast(1.06) saturate(1.02);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.35),
    0 2px 4px rgba(0,0,0,0.25);
  transform: translateZ(0);
}

/* ─── 電腦端 hover 上浮動態 ─── */
@media (min-width: 768px) {
  .contact-location-map:hover,
  #gosmooth-map01:hover,
  #gosmooth-map02:hover,
  #gosmooth-map03:hover,
  #gosmooth-map04:hover {
    transform: translateY(-8px);
    box-shadow:
      -25px 35px 60px -15px rgba(0, 0, 0, 0.7),
      -10px 10px 20px -5px rgba(232, 178, 10, 0.18);
  }
}

/* ─── 手機版：適配小螢幕 ─── */
@media (max-width: 767px) {
  body.contact-page .contact-location-row {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 40px;
  }

  .contact-location-map,
  #gosmooth-map01,
  #gosmooth-map02,
  #gosmooth-map03,
  #gosmooth-map04 {
    padding: 10px;
    border-width: 3px;
    box-shadow:
      -8px 10px 18px rgba(0, 0, 0, 0.35);
  }

  .contact-location-map iframe,
  #gosmooth-map01 iframe,
  #gosmooth-map02 iframe,
  #gosmooth-map03 iframe,
  #gosmooth-map04 iframe {
    height: 198px !important;
  }

  body.contact-page .contact-location-title {
    font-size: 20px;
  }

  body.contact-page .contact-location-meta li a,
  body.contact-page .contact-location-meta li .contact-info-text {
    font-size: 15px;
  }
}

/* ─── 聯絡資訊文字（不受地圖容器影響）─── */
body.contact-page .contact-location-title {
  font-family: "Noto Serif TC", serif;
  font-size: 20px;
  font-weight: 800;
  background: linear-gradient(180deg, #FFC127 0%, #DB7F21 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin: 0 0 12px;
  padding: 0;
}

body.contact-page .contact-location-address {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #2A2A2A;
  margin: 0 0 16px;
}

body.contact-page .contact-location-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.contact-page .contact-location-meta li {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.5;
}

body.contact-page .contact-location-meta li a,
body.contact-page .contact-location-meta li .contact-info-text {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #2A2A2A;
  text-decoration: none;
  cursor: default;
}

body.contact-page .contact-location-meta li a:hover,
body.contact-page .contact-location-meta li .contact-info-text:hover {
  color: inherit;
  text-decoration: none;
}

/* ─── Contact Icon Base (span + mask) ─── */
.contact-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  vertical-align: middle;
  background-color: #F0B82D;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

/* WhatsApp — use brand green */
.contact-icon-whatsapp {
  background-color: #35C17D;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.56 2 2.1 6.45 2.1 11.93c0 1.75.46 3.46 1.33 4.96L2 22l5.25-1.38a9.88 9.88 0 0 0 4.79 1.22h.01c5.48 0 9.94-4.45 9.94-9.93C21.99 6.45 17.53 2 12.04 2Zm0 18.16h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.18 8.18 0 0 1-1.25-4.37c0-4.55 3.7-8.25 8.25-8.25a8.2 8.2 0 0 1 5.83 2.42 8.17 8.17 0 0 1 2.42 5.82c-.02 4.54-3.72 8.24-8.27 8.24Zm4.53-6.18c-.25-.12-1.47-.72-1.7-.8-.23-.09-.39-.12-.56.12-.17.25-.64.8-.79.97-.15.17-.29.19-.54.06-.25-.12-1.05-.39-2-1.23-.74-.66-1.24-1.48-1.39-1.73-.15-.25-.02-.38.11-.5.12-.11.25-.29.37-.44.12-.15.17-.25.25-.42.08-.17.04-.31-.02-.44-.06-.12-.56-1.35-.77-1.85-.2-.49-.41-.42-.56-.43h-.48c-.17 0-.44.06-.66.31-.23.25-.87.85-.87 2.07s.89 2.4 1.01 2.57c.12.17 1.75 2.67 4.24 3.74.59.25 1.05.4 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.08.15-1.18-.06-.1-.23-.16-.48-.28Z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.56 2 2.1 6.45 2.1 11.93c0 1.75.46 3.46 1.33 4.96L2 22l5.25-1.38a9.88 9.88 0 0 0 4.79 1.22h.01c5.48 0 9.94-4.45 9.94-9.93C21.99 6.45 17.53 2 12.04 2Zm0 18.16h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.18 8.18 0 0 1-1.25-4.37c0-4.55 3.7-8.25 8.25-8.25a8.2 8.2 0 0 1 5.83 2.42 8.17 8.17 0 0 1 2.42 5.82c-.02 4.54-3.72 8.24-8.27 8.24Zm4.53-6.18c-.25-.12-1.47-.72-1.7-.8-.23-.09-.39-.12-.56.12-.17.25-.64.8-.79.97-.15.17-.29.19-.54.06-.25-.12-1.05-.39-2-1.23-.74-.66-1.24-1.48-1.39-1.73-.15-.25-.02-.38.11-.5.12-.11.25-.29.37-.44.12-.15.17-.25.25-.42.08-.17.04-.31-.02-.44-.06-.12-.56-1.35-.77-1.85-.2-.49-.41-.42-.56-.43h-.48c-.17 0-.44.06-.66.31-.23.25-.87.85-.87 2.07s.89 2.4 1.01 2.57c.12.17 1.75 2.67 4.24 3.74.59.25 1.05.4 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.08.15-1.18-.06-.1-.23-.16-.48-.28Z'/%3E%3C/svg%3E");
}

/* Email — solid envelope */
.contact-icon-email {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

/* Mobile phone — solid */
.contact-icon-mobile {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 1.01L7 1c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-1.99-2-1.99zM17 19H7V5h10v14z'/%3E%3C/svg%3E");
}

/* Fax — printer/fax solid */
.contact-icon-fax {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z'/%3E%3C/svg%3E");
}

/* Landline / Desk phone — classic desk phone with coiled cord */
.contact-icon-landline {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}

/* ====================================
    8. Contact Form
    ==================================== */
body.contact-page .contact-form-section {
  background-image: url('../../images/Bg/Bg08.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
}

/* 半透明白色遮罩，確保表單可讀 */
/* 極淡遮罩，保留 Bg08 背景圖可見 */
body.contact-page .contact-form-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.08);
  z-index: 1;
  pointer-events: none;
}

body.contact-page .contact-form-section .contact-section__inner {
  position: relative;
  z-index: 2;
}

body.contact-page .contact-form-section__title {
  text-align: center;
  margin-bottom: 28px;
}

body.contact-page .contact-form {
  max-width: 688px;
  margin: 0 auto;
  background: var(--contact-white);
  padding: 32px 40px;
  border-radius: 12px;
  border: 2px solid #EEB21B;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

body.contact-page .contact-form__field {
  margin-bottom: 8px;
  overflow: visible;
}

/* Ensure phone field wrapper does not clip dropdown */
body.contact-page .contact-form__field .gs-phone-field {
  overflow: visible;
}

body.contact-page .contact-form__label {
  display: block;
  font-family: var(--font-sans, "Noto Sans TC", sans-serif);
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 6px;
}

body.contact-page .contact-form__required {
  color: #FF7878;
}

body.contact-page .contact-form__input,
body.contact-page .contact-form__select {
  width: 100%;
  font-family: var(--font-sans, "Noto Sans TC", sans-serif);
  font-size: 15px;
  color: #333;
  min-height: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #DADADA;
  border-radius: 3px;
  background: var(--contact-white);
  transition: border-color 0.25s;
  box-sizing: border-box;
}

body.contact-page .contact-form__textarea {
  width: 100%;
  font-family: var(--font-sans, "Noto Sans TC", sans-serif);
  font-size: 15px;
  line-height: 1.55;
  color: #333;
  min-height: 100px;
  padding: 10px 12px;
  border: 1px solid #DADADA;
  border-radius: 3px;
  background: var(--contact-white);
  transition: border-color 0.25s;
  box-sizing: border-box;
  resize: vertical;
}

body.contact-page .contact-form__input:focus,
body.contact-page .contact-form__select:focus,
body.contact-page .contact-form__textarea:focus {
  outline: none;
  border-color: #EEB21B;
}

body.contact-page .contact-form__input::placeholder,
body.contact-page .contact-form__textarea::placeholder {
  color: #aaa;
}

body.contact-page .contact-form__error {
  display: block;
  font-family: var(--font-sans, "Noto Sans TC", sans-serif);
  font-size: 13px;
  color: #e74c3c;
  margin-top: 4px;
  min-height: 4px;
}

body.contact-page .contact-form__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

body.contact-page .contact-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans, "Noto Sans TC", sans-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--contact-white);
  background: #EEB21B;
  border: 1px solid #D3D3D3;
  border-radius: 3px;
  padding: 12px 32px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  letter-spacing: 0.5px;
}

body.contact-page .contact-form__submit:hover {
  background: #595959;
  color: var(--contact-white);
}

body.contact-page .contact-form__submit-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

body.contact-page .contact-form__mailto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans, "Noto Sans TC", sans-serif);
  font-size: 14px;
  color: #666;
  text-decoration: none;
  transition: color 0.25s;
}

body.contact-page .contact-form__mailto:hover {
  color: var(--contact-gold);
}

body.contact-page .contact-form__mailto svg {
  width: 18px;
  height: 18px;
}

/* ====================================
    9. Bottom CTA (照抄 logistics 页面同款尺寸)
    ==================================== */
body.contact-page .contact-bottom-cta {
  background: #222222;
  color: #ffffff;
  padding: 66px 0;
}

body.contact-page .contact-bottom-cta-inner {
  text-align: center;
}

body.contact-page .contact-bottom-cta h2 {
  font-family: "Noto Serif TC", serif;
  font-size: 26px;
  margin: 0 0 14px;
  color: #e8b20a;
}

body.contact-page .contact-bottom-cta p {
  max-width: 760px;
  margin: 0 auto 28px;
  font-size: 16px;
  line-height: 1.8;
}

body.contact-page .contact-bottom-cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

body.contact-page .contact-bottom-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  min-height: 48px;
  padding: 12px 22px;
  text-decoration: none;
  font-weight: 700;
}

body.contact-page .contact-bottom-cta-btn--primary {
  background: #e8b20a;
  color: #111111;
}

body.contact-page .contact-bottom-cta-btn--dark {
  background: #ffffff;
  color: #111111;
}

@media (max-width: 767px) {
  body.contact-page .contact-bottom-cta h2 {
    font-size: 22px;
  }

  body.contact-page .contact-bottom-cta-actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
}


/* ====================================
   Tablet (max-width: 1024px)
   ==================================== */
@media (max-width: 1024px) {
  body.contact-page .contact-section__inner {
    padding: 0 32px;
  }

  body.contact-page .contact-support__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }


  body.contact-page .contact-anchor-nav__inner {
    padding: 14px 32px;
    justify-content: flex-start;
  }

  body.contact-page .contact-form {
    padding: 30px;
  }
}

/* ═══════════════════════════════════════════════════════════
   Phone Country Selector 樣式已統一移至
   assets/css/components/phone-field.css
   本頁不再覆蓋共用組件樣式。
   ═══════════════════════════════════════════════════════════ */

/* ====================================
    Mobile (max-width: 767px)
    ==================================== */
@media (max-width: 767px) {
  body.contact-page .contact-section {
    padding: 40px 0;
  }

  body.contact-page .contact-section__inner {
    padding: 0 16px;
  }

  body.contact-page .contact-section__title {
    font-size: 21px;
  }

  body.contact-page .contact-section__subtitle {
    font-size: 17px;
    margin-bottom: 16px;
  }

  body.contact-page .contact-section__text {
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0.1px;
  }

  /* Anchor Nav Mobile */
  body.contact-page .contact-anchor-nav__inner {
    padding: 12px 16px;
    gap: 2px;
    justify-content: flex-start;
  }

  body.contact-page .contact-anchor-nav__link {
    font-size: 14px;
    padding: 6px 10px;
  }

  body.contact-page .contact-anchor-nav__sep {
    font-size: 12px;
  }

  /* Support Cards Mobile */
  body.contact-page .contact-support__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body.contact-page .contact-support-card {
    padding: 24px 20px;
  }

  body.contact-page .contact-support-card__title {
    font-size: 18px;
  }

  body.contact-page .contact-support-card__text {
    font-size: 14px;
  }

  /* Quick Quote hours Mobile */
  body.contact-page .contact-quickquote__hours {
    flex-direction: column;
    gap: 20px;
  }


  /* Form Mobile */
  body.contact-page .contact-form {
    padding: 24px 20px;
    border-radius: 8px;
  }

  body.contact-page .contact-form__submit {
    width: 100%;
    justify-content: center;
    font-size: 15px;
    padding: 12px 20px;
  }

  /* ─── 手機版內容區塊左右留白 16px ─── */
  body.contact-page .contact-section,
  body.contact-page .contact-intro,
  body.contact-page .contact-support-layout,
  body.contact-page .contact-quote-layout,
  body.contact-page .contact-location-list {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ─── 表單寬度對齊地圖：移除 section__inner 重複內縮 ─── */
  body.contact-page .contact-form-section .contact-section__inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.contact-page .contact-form {
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

}

/* Hero 统一交給 assets/css/components/page-hero.css 控制，本页 CSS 不覆盖 Hero。 */

/* ======================================================
   Hero 与白色导航列之间去除多余空白
   Hero 使用 position: relative + top: -50px（手机 -36px）
   视觉上移但文档流保留原位，需用负 margin 补偿
   ====================================================== */
body.contact-page .contact-anchor-nav,
body.contact-page .contact-tab-nav,
body.contact-page .contact-section-nav {
  margin-top: -50px !important;
  position: relative;
  z-index: 91;
}

body.contact-page .gs-page-hero + .contact-anchor-nav,
body.contact-page .gs-page-hero + .contact-tab-nav,
body.contact-page .gs-page-hero + .contact-section-nav {
  margin-top: -50px !important;
  position: relative;
  z-index: 91;
}

@media (max-width: 767px) {
  body.contact-page .contact-anchor-nav,
  body.contact-page .contact-tab-nav,
  body.contact-page .contact-section-nav {
    margin-top: -36px !important;
  }

  body.contact-page .gs-page-hero + .contact-anchor-nav,
  body.contact-page .gs-page-hero + .contact-tab-nav,
  body.contact-page .gs-page-hero + .contact-section-nav {
    margin-top: -36px !important;
  }
}

/* ======================================================
   桌面端 Hero 下面所有主要内容左右留白 48px
   不包括 contact-full-bleed-media（全宽不需要留白）
   ====================================================== */
@media (min-width: 1024px) {
  .contact-page main > section:not(.contact-full-bleed-media):not(.gs-page-hero),
  .contact-page .contact-intro,
  .contact-page .contact-support-layout,
  .contact-page .contact-quote-layout,
  .contact-page .contact-location-list,
  .contact-page .contact-section {
    padding-left: 48px;
    padding-right: 48px;
  }
}