/* Shared contact dialog and button styles. */
body.modal-open { overflow: hidden; }
    .contact-open {
      min-width: 184px;
      border: 1px solid rgba(81, 99, 88, 0.22);
      border-radius: 18px;
      padding: 15px 24px;
      background: rgba(255, 255, 255, 0.88);
      color: #425248;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', 'Microsoft YaHei UI', sans-serif;
      font-size: 15px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.04em;
      cursor: pointer;
      box-shadow: 0 8px 24px rgba(28, 20, 16, 0.08);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }
    .contact-open:hover {
      transform: translateY(-2px);
      background: #fff;
      box-shadow: 0 12px 30px rgba(28, 20, 16, 0.12);
    }
    .contact-open:focus-visible,
    .contact-modal button:focus-visible,
    .contact-modal input:focus-visible,
    .contact-modal textarea:focus-visible {
      outline: 1px solid rgba(216, 0, 15, 0.28);
    }

    /* ---------- CONTACT MODAL ---------- */
    .contact-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: grid;
      place-items: center;
      padding: 24px;
      background: rgba(34, 43, 37, 0.48);
      backdrop-filter: blur(18px) saturate(0.82);
      -webkit-backdrop-filter: blur(18px) saturate(0.82);
      animation: contact-backdrop-in 0.22s ease both;
    }
    .contact-modal[hidden] { display: none; }
    .contact-panel {
      position: relative;
      width: min(94vw, 790px);
      max-height: min(86vh, 720px);
      overflow-y: auto;
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid rgba(81, 99, 88, 0.14);
      border-radius: 30px;
      padding: clamp(28px, 4vw, 40px);
      text-align: left;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', 'Microsoft YaHei UI', sans-serif;
      box-shadow: 0 28px 80px rgba(15, 24, 18, 0.24);
      animation: contact-panel-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .contact-close {
      position: absolute;
      top: 24px;
      right: 24px;
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(81, 99, 88, 0.2);
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.86);
      color: #53665a;
      font-size: 25px;
      line-height: 1;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease;
    }
    .contact-close:hover { background: #f2f5f2; transform: scale(1.03); }
    .contact-title {
      padding-right: 64px;
      margin-bottom: 30px;
      font-family: inherit;
      font-size: clamp(27px, 3.5vw, 36px);
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }
    .contact-options {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 54px 220px;
      gap: 0;
      align-items: stretch;
    }
    .contact-message-panel {
      padding: 22px;
      background: #fff;
      border-radius: 22px;
    }
    .contact-divider {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: rgba(28, 20, 16, 0.52);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
    }
    .contact-divider::before,
    .contact-divider::after {
      content: '';
      width: 1px;
      flex: 1;
      background: #d8ded9;
    }
    .contact-divider span {
      padding: 9px 0;
      color: #748079;
    }
    .contact-option-title {
      margin-bottom: 14px;
      color: var(--dark);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.02em;
    }
    .contact-field { display: block; margin-bottom: 18px; }
    .contact-field span {
      display: block;
      margin-bottom: 7px;
      font-size: 13px;
      font-weight: 700;
    }
    .contact-field input,
    .contact-field textarea {
      display: block;
      width: 100%;
      border: 1px solid #dce2dd;
      border-radius: 15px;
      padding: 13px 15px;
      background: #f7f9f7;
      color: var(--dark);
      font-family: inherit;
      font-size: 15px;
      font-weight: 400;
      line-height: 1.55;
    }
    .contact-field input::placeholder,
    .contact-field textarea::placeholder { color: #88938c; }
    .contact-field input:focus,
    .contact-field textarea:focus {
      border-color: rgba(216, 0, 15, 0.44);
      background: #fff;
    }
    .contact-field textarea { min-height: 106px; resize: vertical; }
    .contact-submit {
      width: 100%;
      border: 0;
      border-radius: 15px;
      padding: 15px 20px;
      background: var(--red);
      color: #fff;
      font-family: inherit;
      font-size: 15px;
      font-weight: 700;
      line-height: 1.2;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(216, 0, 15, 0.18);
      transition: transform 0.2s ease, background 0.2s ease;
    }
    .contact-submit:hover { transform: translateY(-1px); background: #bd000d; }
    .contact-submit:disabled { cursor: wait; opacity: 0.62; }
    .contact-status {
      min-height: 1.6em;
      margin-top: 12px;
      font-size: 13px;
      line-height: 1.6;
    }
    .contact-status.is-error { color: #a4000b; }
    .contact-hp {
      position: absolute !important;
      left: -10000px !important;
      width: 1px !important;
      height: 1px !important;
      overflow: hidden !important;
    }
    .wechat-panel {
      padding: 22px;
      background: #f1f4f1;
      border: 1px solid #e0e5e1;
      border-radius: 22px;
      text-align: center;
    }
    .wechat-qr {
      display: block;
      width: min(58vw, 180px);
      height: auto;
      margin: 0 auto 10px;
      border: 1px solid #dde3de;
      border-radius: 16px;
    }
    .close-sub .close-logo { margin-bottom: 0; }
    body.modal-open .hint { opacity: 0; }

    @keyframes contact-backdrop-in {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes contact-panel-in {
      from { opacity: 0; transform: translateY(18px) scale(0.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
      .contact-modal,
      .contact-panel { animation: none; }
      .contact-open,
      .contact-close,
      .contact-submit { transition: none; }
    }



@media (max-width: 768px) {
      .contact-panel { width: 100%; max-height: 90vh; border-radius: 26px; padding: 26px 20px 22px; }
      .contact-close { top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 14px; }
      .contact-title { margin-bottom: 24px; font-size: 28px; }
      .contact-options { grid-template-columns: 1fr; gap: 0; }
      .contact-message-panel { padding: 18px; border-radius: 20px; }
      .contact-divider {
        height: 42px;
        flex-direction: row;
      }
      .contact-divider::before,
      .contact-divider::after {
        width: auto;
        height: 1px;
      }
      .contact-divider span { padding: 0 12px; }
      .wechat-panel {
        display: grid;
        grid-template-columns: 120px 1fr;
        align-items: center;
        gap: 18px;
        padding: 18px;
        border-radius: 20px;
        text-align: left;
      }
      .wechat-panel .contact-option-title { grid-column: 2; margin: 0; }
      .wechat-qr { grid-column: 1; grid-row: 1; width: 120px; margin: 0; }

}