/* ...existing code moved from join-magiban.php inline style... */
.vol-card {
  max-width: 900px;
  margin: 20px auto 40px;
  background:#ffffff;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  overflow:hidden;
  font-family:inherit;
}
.vol-card .card-header {
  background:linear-gradient(90deg,#0b74de,#0a6fb8);
  color:#fff;
  padding:18px 22px;
}
.vol-card .card-body { padding:22px; }
.row-flex { display:flex; flex-wrap:wrap; gap:12px; }
.col-6 { flex:1 1 calc(50% - 12px); min-width:220px; }
.col-12 { flex:1 1 100%; }
.field-label { font-weight:600; margin-bottom:6px; display:block; color:#333; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, input[type="time"], input[type="date"] {
  width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:6px; box-sizing:border-box;
}
.small-time-input { width:120px; padding:8px; border-radius:6px; }
.time-preset { background:#f1f5f9; border:1px solid #e2e8f0; color:#1f2937; padding:8px 10px; border-radius:6px; cursor:pointer; }
.time-preset.active { background:#00674f; color:#fff; border-color:#00674f; box-shadow:0 4px 12px rgba(0,103,79,0.18); }
.quick-times { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.small-btn { padding:8px 10px; border-radius:6px; background:#efefef; border:1px solid #ddd; cursor:pointer; }
.small { font-size:0.9rem; color:#666; }
.form-actions { text-align:right; margin-top:12px; }
.theme-btn { background:#00674f; color:#fff; padding:12px 18px; border-radius:8px; border:none; cursor:pointer; font-weight:600; }
.theme-btn[disabled] { opacity:0.6; cursor:not-allowed; }
#formMessage { margin-bottom:16px; display:none; border-radius:8px; padding:12px; }
#formMessage.success { background:#e6ffed; color:#0b5a2f; display:block; border:1px solid #b7f0c8; }
#formMessage.error { background:#fff1f0; color:#8a1c1c; display:block; border:1px solid #f5c2c7; }
.preset-wrap { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
@media (max-width:768px){
  .col-6, .col-3, .col-12 { flex:1 1 100% !important; width:100% !important; max-width:100% !important; }
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, input[type="time"], input[type="date"], input[type="file"], .small-time-input {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; display: block !important;
  }
  .preset-wrap { width: 100%; }
  .quick-times { width: 100%; display: flex; flex-direction: column; gap: 8px; }
  .time-preset { width: 100%; text-align: center; }
  .time-custom-row { flex-direction: column; align-items: stretch !important; width: 100%; }
}
.spinner{width:18px;height:18px;border:3px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;display:inline-block;vertical-align:middle;margin-left:8px;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}