#wpcontent {
    background: #fff;
}
.email-block {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 5px;
}
label { display: block; margin-top: 8px; }
input, select, textarea{
    width:100%;
}
/* Container layout */
.vform-automation-main { display: none; gap:20px; align-items: flex-start; margin-top:12px; }
.vform-left { width: 400px; }
.vf-panel { background:#fff; border:1px solid #e1e1e1; padding:16px; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.03); }
.vform-canvas-wrap { flex:1; display:flex; justify-content:center; align-items:flex-start; padding:10px 0; }
.vform-canvas { width:100%; min-height:420px; background:#f7f7fb; border-radius:6px; position:relative; padding:30px 0; overflow:auto; }

/* Start badge */
.vf-canvas-start { width:120px; margin:0 auto 18px auto; background:#fff; border:1px solid #e0e0e6; text-align:center; padding:8px 10px; border-radius:6px; color:#333; font-weight:600; }

/* Card styles */
.vf-card { width:80%; margin: 12px auto; background:#fff; border-radius:8px; border:1px solid #e6e6ef; padding:12px 14px; position:relative; box-shadow:0 2px 4px rgba(0,0,0,0.03); cursor:grab; }
.vf-card .vf-card-header { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.vf-card .vf-card-title { font-weight:700; color:#1a1a1a; }
.vf-card .vf-card-type { background:#eef2ff; color:#2b3ed6; padding:4px 8px; border-radius:14px; font-size:12px; font-weight:600; }
.vf-card .vf-card-body { margin-top:10px; color:#333; font-size:14px; }

/* connectors: dot + line */
.vf-connector { width:10px; height:10px; background:#6b6bf0; border-radius:50%; margin:10px auto; position:relative; }
.vf-connector::after { content:""; display:block; width:2px; height:26px; background:#d8d8ef; margin:8px auto 0; }

/* small meta */
.vf-meta { font-size:13px; color:#666; margin-top:8px; }

/* action buttons */
.vf-card .vf-actions { position:absolute; top:10px; right:65px; display:flex; gap:6px; }
.vf-card .vf-actions button { border:none; background:transparent; color:#4a4a4a; cursor:pointer; font-size:13px; padding:4px 6px; border-radius:4px; }
.vf-card .vf-actions button:hover { background:#f2f4ff; color:#2b3ed6; }

/* Delay input inline */
.vf-delay-row { display:flex; gap:8px; align-items:center; margin-top:6px; }
.vf-delay-row input[type="number"] { width:120px; padding:6px 8px; }
.vf-delay-row select { padding:6px 8px; }

/* Modal */
.vf-modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.45); z-index:9999; }
.vf-modal[aria-hidden="false"] { display:flex; }
.vf-modal-inner { width:760px; max-width:95%; background:#fff; padding:18px; border-radius:8px; box-shadow:0 6px 24px rgba(0,0,0,0.2); }
#vf-editor { min-height:220px; border:1px solid #e6e6ef; padding:12px; border-radius:6px; background:#fff; overflow:auto; }

/* editor toolbar */
.vf-editor-toolbar { display:flex; gap:8px; margin-bottom:8px; }
.vf-editor-toolbar button { padding:6px 8px; border-radius:6px; border:1px solid #e6e6ef; background:#fafafa; cursor:pointer; }

.quicktags-toolbar {
    display: flex;
}

/* small responsiveness */
@media (max-width:1000px) {
  .vform-canvas { width:640px; }
}
@media (max-width:800px) {
  .vform-automation-main { flex-direction:column; }
  .vform-left { width:100%; }
  .vform-canvas { width:100%; }
}


/* Button Container Spacing */
.vf-automation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* General Button Base */
.vf-btn {
  display: inline-block;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 5px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  text-align: center;
}

/* Primary (Add / Save / Update) */
.vf-btn-primary {
  background-color: #2271b1;
  border-color: #2271b1;
  color: #fff;
}
.vf-btn-primary:hover {
  background-color: #135e96;
  border-color: #135e96;
}

/* Secondary (Cancel / Neutral Actions) */
.vf-btn-secondary {
  background-color: #f6f7f7;
  border-color: #dcdcde;
  color: #1d2327;
}
.vf-btn-secondary:hover {
  background-color: #e0e0e0;
}

/* Danger (Delete / Remove) */
.vf-btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #fff;
}
.vf-btn-danger:hover {
  background-color: #c82333;
  border-color: #bd2130;
}

/* Edit / Light Action */
.vf-btn-edit {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #212529;
}
.vf-btn-edit:hover {
  background-color: #e0a800;
  border-color: #d39e00;
}

/* Smaller Button Variant */
.vf-btn-sm {
  padding: 5px 10px;
  font-size: 12px;
}

/* Optional subtle shadow for modern look */
.vf-btn {
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.vf-btn:hover {
  box-shadow: 0 2px 4px rgba(0,0,0,0.12);
}