/* Card spacing tweak */
.card {
  max-width: 800px;
  margin: auto;
}

/* Heading */
.card h2 {
  margin-bottom: 6px;
}

/* Muted text */
.muted {
  font-size: 14px;
  color: var(--muted);
}

/* Grid spacing */
.grid-2 {
  gap: 14px;
}

/* Inputs */
input,
select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  transition: 0.2s;
  background: #fff;
}

input:focus,
select:focus {
  border-color: var(--primary);
}

/* Form spacing */
form {
  margin-top: 20px;
}

/* Submit button full width feel on small screens */
#submitBtn {
  width: 100%;
}

/* Hidden helper */
.hidden {
  display: none;
}

/* Editing mode highlight */
#editInfo {
  margin-bottom: 10px;
  color: var(--primary);
  font-weight: 500;
}


/* =========================
   AVAILABILITY BUTTON STYLE
========================= */

.availability-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* Hide default checkbox */
.availability {
  display: none;
}

/* Label as button */
.availability-label {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  transition: 0.2s;
  user-select: none;
  background: #fff;
}

/* Hover */
.availability-label:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Checked state */
.availability:checked + .availability-label {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Responsive */
@media (max-width: 768px) {
  .card {
    padding: 16px;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }
}