/* ========== Base Layout ========== */
.vmd-field-wrapper { 
  margin-bottom: 16px; 
}
.vmd-field-label, 
.vmd-field-wrapper label { 
  display: block; 
  margin-bottom: 6px; 
  font-weight: 600; 
}
.vmd-required { 
  color: #d63638; 
  margin-left: 4px; 
}

/* ========== Inputs / Controls ========== */
.vmd-field-wrapper input[type="text"],
.vmd-field-wrapper input[type="email"],
.vmd-field-wrapper input[type="tel"],
.vmd-field-wrapper input[type="url"],
.vmd-field-wrapper input[type="password"],
.vmd-field-wrapper input[type="date"],
.vmd-field-wrapper input[type="time"],
.vmd-field-wrapper input[type="datetime-local"],
.vmd-field-wrapper input[type="color"],
.vmd-field-wrapper input[type="number"],
.vmd-field-wrapper input[type="range"],
.vmd-field-wrapper input[type="file"],
.vmd-field-wrapper select,
.vmd-field-wrapper textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  background: #fff;
  line-height: 1.4;
  outline: none;
}

/* Subtle placeholder */
.vmd-field-wrapper ::placeholder {
  color: #9aa0a6;
}

/* Focus state */
.vmd-field-wrapper input:focus,
.vmd-field-wrapper select:focus,
.vmd-field-wrapper textarea:focus {
  border-color: #7aa7ff;
  box-shadow: 0 0 0 3px rgba(122, 167, 255, 0.15);
}

/* Radios / Checkboxes inline */
.vmd-inline { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  margin-right: 14px; 
}

/* Divider */
.vmd-field-divider { 
  border: 0; 
  border-top: 1px solid #e2e2e2; 
  margin: 18px 0; 
}

/* ========== Width Utilities ========== */
.vmd-width-full { width: 100%; }

/* Use inline-block to allow simple grid without flex dependencies */
.vmd-width-half, 
.vmd-width-third { 
  display: inline-block; 
  vertical-align: top; 
}

/* Two-column */
.vmd-width-half { 
  width: 48%; 
  margin-right: 2%; 
}

/* Three-column */
.vmd-width-third { 
  width: 31%; 
  margin-right: 2%; 
}

/* Remove trailing margin on the last inline element in a row */
.vmd-field-wrapper:last-child { 
  margin-right: 0; 
}

/* Responsive: stack on small screens */
@media (max-width: 768px) {
  .vmd-width-half, 
  .vmd-width-third {
    width: 100%;
    margin-right: 0;
  }
}

/* ========== Sections ========== */
.vmd-section { 
  padding: 14px; 
  border: 1px solid #eee; 
  border-radius: 8px; 
  margin-bottom: 18px; 
  background: #fff;
}
.vmd-section-title { 
  margin-top: 0; 
  margin-bottom: 10px; 
  font-weight: 700;
}

/* Section actions (Save Section button area) */
.vmd-section-actions { 
  margin-top: 10px; 
}

/* ========== Buttons ========== */
.vmd-cf-save-section { 
  padding: 10px 16px; 
  border-radius: 6px; 
  border: 1px solid #c8c8c8; 
  background: #f6f6f6; 
  cursor: pointer; 
  line-height: 1.2;
}
.vmd-cf-save-section:hover { 
  background: #efefef; 
}
.vmd-cf-save-section:focus { 
  outline: none; 
  box-shadow: 0 0 0 3px rgba(122, 167, 255, 0.15); 
}

/* ========== Optional: small helpers ========== */
/* Reduce default input height for range so it aligns better visually */
.vmd-field-wrapper input[type="range"] { 
  padding: 0; 
  height: 2.2em; 
}

/* Make file input look less cramped */
.vmd-field-wrapper input[type="file"] { 
  padding: 6px; 
}