/* ============================================================
   付款頁 payment.php（.payment-section 白底覆寫）
   來源 style.css 行 3297-3368（純搬移，內容未改）
   ============================================================ */

/* ============ 線上付款表單：白底卡片（對齊 Figma 1301:37640） ============
   範圍化覆寫於 .payment-section，不影響其他頁面的 .contact-form。
   思路：
   - 卡片底色翻白、邊框移除
   - 所有底線/虛線/文字/箭頭翻成深色
   - <option> 面板改白底 */
.contact-page-section.payment-section {
  padding: clamp(90px, 12vw, 170px) 0 clamp(80px, 10vw, 230px);
}

.payment-section .contact-title {
  font-size: clamp(48px, 7vw, 68px);
}

@media (max-width: 767px) {
  .payment-section .contact-title-icon {
    display: inline-block;
    width: 86px;
    height: 48px;
    vertical-align: baseline;
    margin-left: -20px;
    margin-bottom: 0px;
    object-fit: contain;
  }

  .payment-section .contact-subtitle {
    font-family: 'Inter', 'Noto Sans TC', sans-serif;
    font-weight: 400;
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.5;
    color: var(--c-on-dark);
    margin-block: 20px;
  }

  .payment-section .contact-desc {
    margin-bottom: 1rem;
  }
}

.payment-section .contact-form {
  background: var(--c-bg-white);
  border: 0;
  border-radius: 40px;
  /* 4 角皆圓角 */
}

/* 一般文字輸入 */
.payment-section .contact-form .field input {
  color: var(--c-text-2);
  border-bottom-color: rgba(27, 26, 25, 0.3);
}

.payment-section .contact-form .field input:focus {
  border-bottom-color: var(--c-accent);
}

.payment-section .contact-form .field-placeholder,
.payment-section .contact-form .field-label {
  color: var(--c-text-2);
}

/* 下拉選單 */
.payment-section .contact-form .field--select select {
  color: var(--c-text-2);
  border-bottom-color: rgba(27, 26, 25, 0.3);
}

.payment-section .contact-form .field--select select:focus {
  border-bottom-color: var(--c-accent);
}

.payment-section .contact-form .field--select::after {
  border-color: var(--c-text-2);
}

.payment-section .contact-form .field--select:focus-within::after {
  border-color: var(--c-accent);
}

.payment-section .contact-form .field--select select option {
  background: var(--c-bg-white);
  color: var(--c-text-2);
}

/* 多行付款項目 textarea */
.payment-section .contact-form .form-textarea {
  color: var(--c-text-2);
  border-color: rgba(27, 26, 25, 0.3);
}

.payment-section .contact-form .form-textarea::placeholder {
  color: rgba(27, 26, 25, 0.5);
}

.payment-section .contact-form .form-textarea:focus {
  border-color: var(--c-accent);
}