/* ==========
   index.html 專用主題與驗證樣式
   ========== */
body.container {
  max-width: 720px;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 0 20px rgba(0,0,0,0.08);
  padding: 2rem 1.5rem;
}

/* 標題 */
h3 {
  font-weight: 600;
  color: #333;
}

p.text-muted {
  font-size: 0.95rem;
}

/* Logo */
.logo {
  display: block;
  margin: 0 auto 1.2rem auto;
  max-width: 100%;
}

/* 標籤與欄位 */
.form-label {
  font-weight: 600;
  color: #444;
}

.form-control {
  border-radius: 0.5rem;
  transition: border-color 0.2s ease;
}

/* 驗證樣式 */
input:invalid, textarea:invalid {
  border: 2px solid #dc3545 !important;
  background-color: #fff5f5;
}

input:valid, textarea:valid {
  border: 2px solid #198754 !important;
  background-color: #f5fff7;
}

.validation-message {
  display: none;
  font-size: 0.85rem;
  color: #dc3545;
  margin-top: 0.25rem;
}

.validation-message.active {
  display: block;
}

/* Checkbox / Radio 群組 */
.checkbox-group,
.form-check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.checkbox-group label,
.form-check-group label {
  font-weight: 500;
  color: #555;
}

/* 按鈕 */
button[type="submit"] {
  border: none;
  border-radius: 0.5rem;
  background-color: #f3981e;
  color: #fff;
  font-weight: 600;
  padding: 0.75rem;
  transition: all 0.2s;
}

button[type="submit"]:hover {
  background-color: #d9810c;
}

button[disabled] {
  opacity: 0.7;
  pointer-events: none;
}

/* Footer */
footer.footer {
  text-align: center;
  font-size: 0.8rem;
  color: #777;
  margin-top: 2rem;
}

/* RWD */
@media (max-width: 576px) {
  body.container {
    padding: 1rem;
  }
}