/**
 * hiyes-form.css
 * 海悅表單元件庫 — 提供兩種主題：classic（經典深色底線）與 glass（白框圓角透明）
 *
 * 用法：
 *   經典主題 → 元素加上 .hf-classic 容器，內部使用 .hf-field / .hf-label / .hf-btn-*
 *   玻璃主題 → 元素加上 .hf-glass  容器，內部使用 .hf-input / .hf-select / .hf-btn-*
 */

/* ========================================
   共用：隱藏 twzipcode 郵遞區號
   ======================================== */
.hf-classic input[name="zipcode"],
.hf-glass input[name="zipcode"] {
  display: none !important;
}

/* ========================================
   Theme: Classic — 無邊框無背景、深色底線 + 浮動 label
   ======================================== */
.hf-classic .hf-field {
  position: relative;
  border: none;
  border-bottom: 1px solid #333;
  background: transparent;
  transition: border-color 0.3s ease;
}
.hf-classic .hf-field:focus-within {
  border-bottom-color: #ff6600;
}

/* 浮動 label */
.hf-classic .hf-label {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  transition: opacity 0.2s ease;
  color: #333;
  font-weight: 500;
}
.hf-classic .hf-field:hover .hf-label,
.hf-classic .hf-field:focus-within .hf-label,
.hf-classic .hf-field.has-value .hf-label {
  opacity: 0;
}

/* input / select */
.hf-classic .hf-field input,
.hf-classic .hf-field select {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  color: #333;
}
.hf-classic .hf-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  padding-right: 1.5rem;
}
.hf-classic .hf-field select option {
  color: #333;
  background: white;
}

/* 按鈕 — classic 深色版 */
.hf-classic .hf-btn {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}
.hf-classic .hf-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: rgba(0, 120, 84, 0.5);
  transition: width 0.3s ease;
  z-index: 0;
}
.hf-classic .hf-btn > * {
  position: relative;
  z-index: 1;
}
.hf-classic .hf-btn:hover::before {
  width: 100%;
}
.hf-classic .hf-btn:hover {
  color: white !important;
}
.hf-classic .hf-btn:active {
  transform: scale(0.98);
}

/* 送出按鈕 — classic 版（含邊框滑入） */
.hf-classic .hf-btn-submit {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}
.hf-classic .hf-btn-submit::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #007855;
  transition: width 0.3s ease;
  z-index: 0;
}
.hf-classic .hf-btn-submit::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  border: 1px solid white;
  border-right: none;
  box-sizing: border-box;
  transition: width 0.3s ease;
  z-index: 1;
}
.hf-classic .hf-btn-submit > * {
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}
.hf-classic .hf-btn-submit:hover::before {
  width: 100%;
}
.hf-classic .hf-btn-submit:hover::after {
  width: 100%;
  border-right: 1px solid white;
}
.hf-classic .hf-btn-submit:hover > * {
  color: white;
}
.hf-classic .hf-btn-submit:active {
  transform: scale(0.98);
}


/* ========================================
   Theme: Glass — 白框圓角透明（深色背景適用）
   ======================================== */

/* input */
.hf-glass .hf-input {
  width: 100%;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  color: white;
  padding: 0 16px;
  font-size: 14px;
  outline: none;
  border-radius: 8px;
  transition: border-color 0.3s ease;
}
.hf-glass .hf-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.hf-glass .hf-input:focus {
  border-color: white;
}

/* select */
.hf-glass .hf-select {
  width: 100%;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: transparent;
  color: white;
  padding: 0 36px 0 16px;
  font-size: 14px;
  outline: none;
  border-radius: 8px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 0.3s ease;
}
.hf-glass .hf-select:focus {
  border-color: white;
}
.hf-glass .hf-select option {
  color: #333;
  background: white;
}

/* 按鈕 — glass 半透明白色 */
.hf-glass .hf-btn,
.hf-glass .hf-btn-submit {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.76);
  color: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 8px;
  transition: background 0.3s ease, transform 0.15s ease;
}
.hf-glass .hf-btn:hover,
.hf-glass .hf-btn-submit:hover {
  background: rgba(255, 255, 255, 0.92);
}
.hf-glass .hf-btn:active,
.hf-glass .hf-btn-submit:active {
  transform: scale(0.97);
}

/* 送出按鈕 — glass 版（與 .hf-btn 共用樣式） */