/* 麦尚食品 · contact 页面样式（PC 段 + 手机段，各自媒体查询包裹） */

/* PC 布局：≥1200px */
@media (min-width: 1200px) {
  button {
          margin: 0;
          padding: 0;
          border: 0.0694vw solid transparent;
          outline: none;
          background-color: transparent;
        }
        input {
          background-color: transparent;
          border: 0;
          outline: none;
        }

        /* ============ 页面骨架 ============ */
        .page {
          position: relative;
          width: 100vw;
          margin: 0 auto;
        }

        /* ============ 头部导航 ============ */
        .header-zone {
          width: 100vw;
          height: 8.3333vw;
        }

        /* ============ 联系方式 ============ */
        .sec-contact-info {
          /* 装饰底图内联在标签上（见 page-contact.php 的 $ms_section_bg） */
          background-color: rgba(255, 255, 255, 1);
          width: 100vw;
          height: 43.0556vw;
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          align-items: flex-start;
        }
        .contact-info-col {
          width: 39.5139vw;
          margin: 5.8333vw 0 0 8.3333vw;
          display: flex;
          flex-direction: column;
        }
        .contact-title-banner {
          height: 5.1389vw;
          width: 39.2361vw;
          margin-left: 0.2778vw;
          background: url(../../img/title-contact.webp) 100% no-repeat;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
        }
        .contact-title-banner span {          width: 10.9028vw;
          height: 2.7083vw;
          color: rgba(51, 51, 51, 1);
          font-size: 2.7778vw;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          white-space: nowrap;
          line-height: 2.7778vw;
          margin: 1.1111vw 0 0 -0.2778vw;
        }
        .contact-bar {
          background-color: rgba(230, 0, 18, 1);
          width: 5.5556vw;
          height: 0.2778vw;
          margin: 1.3889vw 0 0 0.0694vw;
        }
        .contact-address {
          width: 100%;
          color: rgba(51, 51, 51, 1);
          font-size: 1.25vw;
          text-align: left;
          line-height: 3.1667vw;
          margin-top: 3.1944vw;
        }
        .contact-strip {
          width: 25.4167vw;
          height: 3.3333vw;
          margin-top: 4.5139vw;
        }
        .contact-map {
          width: 50vw;
          height: 30.5556vw;
          margin: 5.8333vw 0 0 2.1528vw;
        }

        /* ============ 合作表单 / 页脚 ============ */
        /* 高度交给内容撑开：原稿的 86.1806vw 是「表单 + 页脚」的高度，
           而页脚已由 footer.php 挪到所有区块之外，写死会在页面底部
           空出一整个页脚。 */
        .sec-contact {
          width: 100vw;
          display: flex;
          flex-direction: column;
        }
        .contact-panel {
          width: 100vw;
          height: 41.6667vw;
          background: rgba(233, 210, 166, 1) url(../../img/hero-cooperation-pc.webp) 100%
            no-repeat;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          padding-left: 51.0417vw;
        }
        .contact-heading {
          width: 29.5833vw;
          margin: 5.4861vw 0 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }
        .contact-heading h2 {          width: 19.3056vw;
          color: rgba(51, 51, 51, 1);
          font-size: 2.7778vw;
          font-family: PingFangSC-Semibold;
          font-weight: 600;
          text-align: left;
          white-space: nowrap;
          line-height: 2.7778vw;
          margin-left: 0.1389vw;
        }
        .contact-heading p {
          width: 29.5833vw;
          color: rgba(102, 102, 102, 1);
          font-size: 1.1111vw;
          text-align: left;
          white-space: nowrap;
          line-height: 2.2222vw;
          margin-top: 1.0417vw;
        }
        .contact-form {
          width: 40.5556vw;
          display: block;
        }
        /* 报错状态的 .form-input.has-error 规则统一放在 base.css（两套稿共用） */
        .form-row {
          display: flex;
          gap: 2.7778vw;
        }
        .form-row .form-row-item {
          flex: 1;
        }
        .form-row-item {
          display: flex;
          flex-direction: column;
          margin-bottom: 0.6944vw;
        }
        .form-label {
          color: rgba(51, 51, 51, 1);
          font-size: 1.25vw;
          font-weight: 600;
          text-align: left;
          white-space: nowrap;
          line-height: 1.6667vw;
          margin-bottom: 0.3472vw;
        }
        .form-label .req {
          color: rgba(230, 0, 18, 1);
        }
        .form-input {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 0.5556vw;
          border: 0.0694vw solid transparent;
          height: 3.3333vw;
          padding: 0 1.1111vw;
          font-size: 1.1111vw;
          color: rgba(51, 51, 51, 1);
          font-family: inherit;
          transition:
            border-color 0.3s ease,
            box-shadow 0.3s ease;
        }
        .form-input::placeholder {
          color: rgba(153, 153, 153, 1);
        }
        .form-input:focus {
          border-color: rgba(230, 0, 18, 1);
          box-shadow: 0 0 0.5556vw 0 rgba(230, 0, 18, 0.25);
        }
        .captcha-row {
          height: 3.3333vw;
          display: flex;
          flex-direction: row;
          gap: 2.7778vw;
        }
        .captcha-box {
          background-color: rgba(255, 255, 255, 1);
          border-radius: 0.5556vw;
          height: 3.3333vw;
          width: 18.8889vw;
          display: flex;
          flex-direction: row;
          overflow: hidden;
        }
        .captcha-box .form-input {
          width: 10.4167vw;
        }
        .captcha-box img {
          width: 8.3333vw;
          height: 3.1944vw;
          cursor: pointer;
        }
        .btn-submit {
          position: relative;
          overflow: hidden;
          background-color: rgba(255, 255, 255, 1);
          border-radius: 0.5556vw;
          height: 3.3333vw;
          width: 8.3333vw;
          cursor: pointer;
          display: flex;
          flex-direction: column;
        }
        .btn-submit::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: rgba(230, 0, 18, 1);
          transform: scaleX(0);
          transform-origin: left center;
          transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .btn-submit:hover::before {
          transform: scaleX(1);
        }
        .btn-submit span {
          color: rgba(51, 51, 51, 1);
          font-size: 1.1111vw;
          text-align: left;
          white-space: nowrap;
          line-height: 3.3333vw;
          text-align: center;
          position: relative;
          z-index: 1;
          transition: color 0.35s ease;
        }
        .btn-submit:hover span {
          color: #fff;
        }

        /* ============ 降噪 ============ */
        @media (prefers-reduced-motion: reduce) {
          *,
          *::before,
          *::after {
            animation: none !important;
            transition: none !important;
          }
        }


    /* ===== 英文稿与中文稿的差异（自动生成，来源：线上 PC 稿）===== */
    html[lang^="en"] .contact-heading h2 {
      width: auto;
    }
    html[lang^="en"] .contact-title-banner span {
      width: auto;
    }
  }

/* 手机布局：<1200px */
@media (max-width: 1199.98px) {
  /* ---------- 联系我们 ---------- */
        .contact-section {
          margin-top: 1.2rem;
          padding: 0.63rem 0 0.5rem;
          /* 手机端的装饰底图统一用 block-bg-2.webp（PC 那边是 bg-section-pasture.webp） */
          background: #fff url(../../img/block-bg-2.webp) 100% 100% / contain no-repeat;
        }
        #concat-title {
          background: url(../../img/contact-title-bg.webp) 50% 50% / contain no-repeat;
        }
        .contact-section .section-head {
          margin-bottom: 0.49rem;
        }
        .contact-address {
          margin: 0 auto;
          font-size: 0.28rem;
          line-height: 0.56rem;
          color: #666;
          text-align: center;
        }
        .contact-address a {
          color: inherit;
        }
        .contact-map {
          width: 6.86rem;
          height: 6rem;
          margin: 0.51rem auto 0;
        }
        .contact-map img {
          width: 100%;
          height: auto;
          display: block;
        }

        /* ---------- 期待与您的合作（表单区，按设计稿覆写） ---------- */
        .contact-form .section-head {
          margin-bottom: 0;
        }
        .contact-form .section-head .section-bar {
          display: none;
        }
        .contact-form .section-head h2 {
          margin-top: 0.79rem;
        }
        .contact-form .form-intro {
          margin: 0.29rem 0 0.45rem;
          color: #666;
          line-height: 0.42rem;
        }
        .contact-form .form-field label {
          color: #333;
        }
        .contact-form .form-field label .req {
          color: #e60012;
        }
        .contact-form .form-field textarea {
          height: 0.64rem;
        }
        .contact-form .captcha-row {
          position: relative;
        }
        .contact-form .captcha-row input {
          padding-right: 1.72rem;
        }
        .contact-form .captcha-row img {
          position: absolute;
          top: 0.01rem;
          right: 0.11rem;
          width: 1.44rem;
          height: 0.62rem;
          border-radius: 0.04rem;
        }
        .contact-form .form-submit {
          margin-top: 0.48rem;
          font-size: 0.28rem;
          letter-spacing: normal;
        }
}
