/* Frontend styles for Formmailer component */
.form-container {
  max-width: 80%;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
}

/* 標題樣式 */
.form-container h2 {
  font-size: 24px !important;
  margin-bottom: 20px !important;
  color: #333 !important;
}

/* 表格樣式 */
.form-container table {
  max-width: 600px !important;
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 20px 0 !important;
  background: #fff !important;
  box-sizing: border-box !important;
  table-layout: fixed !important;
}

.form-container table th,
.form-container table td {
  padding: 10px !important;
  border: 1px solid #ddd !important;
  text-align: left !important;
  vertical-align: top !important;
}

.form-container table th {
  background: #f1f1f1 !important;
  font-weight: bold !important;
}

.form-container table tr:nth-child(even) {
  background: #f9f9f9 !important;
}

.form-container table td:first-child {
  width: 30% !important;
  font-weight: bold !important;
}

.form-container table td:last-child {
  width: 70% !important;
}

/* 表單輸入樣式 */
.form-container input[type="text"],
.form-container input[type="email"],
.form-container textarea,
.form-container select {
  width: 100% !important;
  padding: 8px !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
}

.form-container input[type="checkbox"] {
  margin-right: 5px !important;
  vertical-align: middle !important;
}

.form-container label {
  display: inline-block !important;
  margin-bottom: 5px !important;
}

.form-container label[for] {
  margin-right: 10px !important;
}

.form-container .required {
  color: red !important;
  margin-left: 3px !important;
}

/* 必填提示樣式 */
.form-container .required-hint {
  color: #d9534f !important; /* 與 .required 一致 */
  font-size: 0.9em !important; /* 稍小字體 */
  margin: 10px 0 !important; /* 上下間距 */
}

/* Placeholder 樣式 */
.form-container input::placeholder,
.form-container textarea::placeholder {
  color: #999 !important;
  font-style: italic !important;
  font-size: 12px !important;
}

/* Checkbox 的 Field Description */
.form-container .field-description {
  font-size: 12px !important;
  color: #666 !important;
  margin: 5px 0 0 0 !important;
  line-height: 1.4 !important;
  font-style: italic !important;
}

/* 按鈕樣式 */
.form-container button {
  background-color: #007bff !important;
  color: white !important;
  padding: 8px 16px !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  margin-right: 5px !important;
}

.form-container button:hover {
  background-color: #0056b3 !important;
}

.form-container button[type="reset"] {
  background-color: #6c757d !important;
}

.form-container button[type="reset"]:hover {
  background-color: #5a6268 !important;
}

/* 反饋訊息樣式 */
.form-container .feedback-message p {
  margin: 10px 0 !important;
  padding: 10px !important;
  border-radius: 4px !important;
}

.form-container .feedback-message p.error {
  background-color: #f8d7da !important;
  color: #721c24 !important;
}

.form-container .feedback-message p.success {
  background-color: #d4edda !important;
  color: #155724 !important;
}

/* Bootstrap 兼容樣式 */
.form-container .form-control {
  width: 100% !important;
  padding: 8px !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
}

.form-container .form-check-input {
  margin-right: 5px !important;
  vertical-align: middle !important;
}

/* 無效輸入樣式 */
.form-container input.invalid,
.form-container textarea.invalid,
.form-container select.invalid {
  border: 2px solid #dc3545 !important;
  background-color: #fff5f5 !important;
}

.text-content {
}

/* 媒體查詢 */
@media (max-width: 768px) {
  .form-container {
    max-width: 100% !important;
    padding: 10px !important;
  }

  .form-container table {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }

  .form-container table th,
  .form-container table td {
    padding: 8px !important;
    vertical-align: top !important;
  }

  .form-container table td:first-child {
    width: 40% !important;
  }

  .form-container table td:last-child {
    width: 60% !important;
  }

  .form-container input[type="text"],
  .form-container input[type="email"],
  .form-container textarea,
  .form-container select {
    padding: 6px !important;
    font-size: 14px !important;
  }

  .form-container input::placeholder,
  .form-container textarea::placeholder,
  .form-container .field-description {
    font-size: 11px !important;
  }

  .form-container button {
    padding: 6px 12px !important;
    font-size: 14px !important;
  }

  .form-container label {
    margin: 8px 0 4px !important;
  }

  .form-container .required-hint {
    font-size: 0.8em !important; /* 手機端稍小字體 */
  }
}